|
|
@@ -0,0 +1,51 @@
|
|
|
+# GUI Mode
|
|
|
+
|
|
|
+## Introduction
|
|
|
+
|
|
|
+OpenHands provides a user-friendly Graphical User Interface (GUI) mode for interacting with the AI assistant. This mode offers an intuitive way to set up the environment, manage settings, and communicate with the AI.
|
|
|
+
|
|
|
+## Installation and Setup
|
|
|
+
|
|
|
+1. Follow the instructions in the [Installation](../installation) guide to install OpenHands.
|
|
|
+
|
|
|
+2. After running the command, access OpenHands at [http://localhost:3000](http://localhost:3000).
|
|
|
+
|
|
|
+## Interacting with the GUI
|
|
|
+
|
|
|
+### Initial Setup
|
|
|
+
|
|
|
+1. Upon first launch, you'll see a settings modal.
|
|
|
+2. Select an `LLM Provider` and `LLM Model` from the dropdown menus.
|
|
|
+3. Enter the corresponding `API Key` for your chosen provider.
|
|
|
+4. Click "Save" to apply the settings.
|
|
|
+
|
|
|
+### Advanced Settings
|
|
|
+
|
|
|
+1. Toggle `Advanced Options` to access additional settings.
|
|
|
+2. Use the `Custom Model` text box to manually enter a model if it's not in the list.
|
|
|
+3. Specify a `Base URL` if required by your LLM provider.
|
|
|
+
|
|
|
+### Main Interface
|
|
|
+
|
|
|
+The main interface consists of several key components:
|
|
|
+
|
|
|
+1. **Chat Window**: The central area where you can view the conversation history with the AI assistant.
|
|
|
+2. **Input Box**: Located at the bottom of the screen, use this to type your messages or commands to the AI.
|
|
|
+3. **Send Button**: Click this to send your message to the AI.
|
|
|
+4. **Settings Button**: A gear icon that opens the settings modal, allowing you to adjust your configuration at any time.
|
|
|
+5. **Workspace Panel**: Displays the files and folders in your workspace, allowing you to navigate and view files, or the agent's past commands or web browsing history.
|
|
|
+
|
|
|
+### Interacting with the AI
|
|
|
+
|
|
|
+1. Type your question, request, or task description in the input box.
|
|
|
+2. Click the send button or press Enter to submit your message.
|
|
|
+3. The AI will process your input and provide a response in the chat window.
|
|
|
+4. You can continue the conversation by asking follow-up questions or providing additional information.
|
|
|
+
|
|
|
+## Tips for Effective Use
|
|
|
+
|
|
|
+1. Be specific in your requests to get the most accurate and helpful responses, as described in the [prompting best practices](../prompting-best-practices).
|
|
|
+2. Use the workspace panel to explore your project structure.
|
|
|
+3. Use one of the recommended models, as described in the [LLMs section](usage/llms/llms.md).
|
|
|
+
|
|
|
+Remember, the GUI mode of OpenHands is designed to make your interaction with the AI assistant as smooth and intuitive as possible. Don't hesitate to explore its features to maximize your productivity.
|
OpenHands