Merge pull request #7 from All-Hands-AI/add-react-vite-example

Add React Vite example app with TypeScript SDK integration

Author: rbren

.eslintrc.js renamed to .eslintrc.cjs

@@ -80,4 +80,17 @@ This client is intended for developers who want to:
 - Integrate OpenHands capabilities into existing TypeScript/JavaScript applications
 - Develop custom frontends for the OpenHands Agent Server
 
-The client abstracts away the complexity of HTTP requests, WebSocket management, and API authentication, providing a clean, type-safe interface for all OpenHands Agent Server functionality.
+The client abstracts away the complexity of HTTP requests, WebSocket management, and API authentication, providing a clean, type-safe interface for all OpenHands Agent Server functionality.
+
+## Example Application
+
+The `example/` directory contains a React application built with Vite that demonstrates how to integrate the TypeScript SDK into a modern web application. This example serves as both a reference implementation and a verification tool to ensure the SDK works correctly in browser environments.
+
+The example application showcases:
+- Proper SDK integration with ES module compatibility
+- TypeScript configuration for client-side development
+- Build processes that compile the SDK before running the application
+- Import verification of all major SDK classes and enums
+- Modern React development patterns with Vite tooling
+
+This provides developers with a working template for building their own applications using the OpenHands Agent Server TypeScript Client.

.openhands/microagents/repo.md

@@ -0,0 +1,94 @@
+# OpenHands SDK React Example
+
+This is a basic React application built with Vite that demonstrates successful integration with the OpenHands Agent Server TypeScript Client SDK.
+
+## Features
+
+- ✅ **Local SDK Integration**: Uses a locally built version of the SDK via file dependency
+- ✅ **Automatic Build**: Builds the SDK before starting the app
+- ✅ **TypeScript Support**: Full TypeScript integration with type safety
+- ✅ **Import Verification**: Displays all imported SDK classes and enums
+- ✅ **Real-time Status**: Shows SDK import status and available functionality
+
+## What's Demonstrated
+
+The app successfully imports and displays:
+
+### Main Classes
+- `RemoteConversation` - Main conversation management class
+- `RemoteWorkspace` - Workspace file operations class  
+- `HttpClient` - HTTP client for API communication
+- `AgentExecutionStatus` - Enum for agent execution states
+- `EventSortOrder` - Enum for event sorting options
+
+### Enum Values
+- **AgentExecutionStatus**: IDLE, RUNNING, PAUSED, FINISHED, ERROR
+- **EventSortOrder**: TIMESTAMP, REVERSE_TIMESTAMP
+
+## Getting Started
+
+### Prerequisites
+- Node.js (v18 or higher)
+- npm
+
+### Installation & Running
+
+1. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+2. **Start development server**:
+   ```bash
+   npm run dev
+   ```
+   This will:
+   - Build the SDK from `../agent-server-typescript-client`
+   - Start the Vite dev server on port 12000
+   - Open the app at `http://localhost:12000`
+
+3. **Build for production**:
+   ```bash
+   npm run build
+   ```
+
+## Project Structure
+
+```
+example/
+├── src/
+│   ├── App.tsx          # Main React component with SDK integration
+│   ├── App.css          # Styling
+│   ├── main.tsx         # React entry point
+│   └── index.css        # Global styles
+├── package.json         # Dependencies and scripts
+├── vite.config.ts       # Vite configuration
+├── tsconfig.json        # TypeScript configuration
+└── index.html           # HTML template
+```
+
+## Key Configuration
+
+### package.json
+- **Local SDK Dependency**: `"@openhands/agent-server-typescript-client": "file:../agent-server-typescript-client"`
+- **Build Script**: `"build:sdk": "cd ../agent-server-typescript-client && npm run build"`
+- **Dev Script**: Builds SDK before starting Vite
+
+### vite.config.ts
+- Configured for React with TypeScript
+- CORS enabled for development
+- Host configuration for external access
+
+## SDK Integration Details
+
+The app demonstrates that the TypeScript SDK is properly:
+1. **Built as ES Modules** - Compatible with Vite's module system
+2. **Type-safe** - Full TypeScript support with proper type definitions
+3. **Functional** - All main classes and enums are importable and usable
+4. **Up-to-date** - Uses the latest local build of the SDK
+
+## Notes
+
+- The SDK includes some Node.js-specific functionality (fs, path modules) that are externalized for browser compatibility
+- This is expected behavior and doesn't affect the core SDK functionality in browser environments
+- The app serves as a "Hello World" example to verify SDK integration works correctly

example/README.md

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenHands SDK Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>