Skip to main content

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 guide to install OpenHands.

  2. After running the command, access OpenHands at 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.

GitHub Token Setup

OpenHands automatically exports a GITHUB_TOKEN to the shell environment if it is available. This can happen in two ways:

  1. Locally (OSS): The user directly inputs their GitHub token.
  2. Online (SaaS): The token is obtained through GitHub OAuth authentication.

When you reach the /app route, the app checks if a token is present. If it finds one, it sets it in the environment for the agent to use.

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.
  2. Use the workspace panel to explore your project structure.
  3. Use one of the recommended models, as described in the LLMs section.

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.