This is the frontend of the OpenHands project. It is a React application that provides a web interface for the OpenHands project.

• Remix SPA Mode (React + Vite + React Router)
• TypeScript
• Redux
• TanStack Query
• Tailwind CSS
• i18next
• React Testing Library
• Vitest
• Mock Service Worker

• Node.js 20.x or later
• npm, bun, or any other package manager that supports the package.json file

# Clone the repository git clone https://github.com/All-Hands-AI/OpenHands.git # Change the directory to the frontend cd OpenHands/frontend # Install the dependencies npm install

We use msw to mock the backend API. To start the application with the mocked backend, run the following command:

npm run dev

This will start the application in development mode. Open http://localhost:3001 to view it in the browser.

NOTE: The backend is partially mocked using msw. Therefore, some features may not work as they would with the actual backend.

There are two ways to run the application with the actual backend:

# Build the application from the root directory make build # Start the application make start

OR

# Start the backend from the root directory make start-backend # Build the frontend cd frontend && npm run build # Serve the frontend npm start -- --port 3001

TODO

frontend ├── __tests__ # Tests ├── public ├── src │ ├── api # API calls │ ├── assets │ ├── components │ ├── context # Local state management │ ├── hooks # Custom hooks │ ├── i18n # Internationalization │ ├── mocks # MSW mocks for development │ ├── routes # React Router file-based routes │ ├── services │ ├── state # Redux state management │ ├── types │ ├── utils # Utility/helper functions │ └── root.tsx # Entry point └── .env.sample # Sample environment variables

Components are organized into folders based on their domain, feature, or shared functionality.

components ├── features # Domain-specific components ├── layout ├── modals └── ui # Shared UI components

• Real-time updates with WebSockets
• Internationalization
• Router data loading with Remix
• User authentication with GitHub OAuth (if saas mode is enabled)

We use Vitest for testing. To run the tests, run the following command:

npm run test

Please read the CONTRIBUTING.md file for details on our code of conduct, and the process for submitting pull requests to us.

TODO