Add React Vite example app with TypeScript SDK integration

[rbren]

Summary

This PR adds a complete React application built with Vite that demonstrates successful integration with the OpenHands Agent Server TypeScript Client SDK. The example serves as a "Hello World" application that verifies the SDK can be successfully imported and used in a modern React/TypeScript environment.

Changes Made

SDK Configuration Updates

• ES Module Support: Modified tsconfig.json to output ES modules ("module": "ESNext") for browser compatibility
• Package Configuration: Updated package.json to include "type": "module" and "module" field for proper ES module support

New Example Application (example/)

• Complete Vite React App: Created a full-featured React application with TypeScript support
• Local SDK Integration: Configured to use the locally built SDK via file dependency
• Automatic Build Process: Includes build script that compiles the SDK before starting the app
• SDK Import Verification: Displays all imported SDK classes and enums to verify successful integration

Key Features Demonstrated

• ✅ RemoteConversation class import and type checking
• ✅ RemoteWorkspace class import and type checking
• ✅ HttpClient class import and type checking
• ✅ AgentExecutionStatus enum with all values (IDLE, RUNNING, PAUSED, FINISHED, ERROR)
• ✅ EventSortOrder enum with all values (TIMESTAMP, REVERSE_TIMESTAMP)
• ✅ Real-time import status and timestamp display

Development Experience

• TypeScript Support: Full type safety with proper module resolution
• Hot Reload: Vite development server with fast refresh
• Production Build: Optimized production build process
• CORS Configuration: Proper setup for external host access
• Comprehensive Documentation: Detailed README with setup and usage instructions

Technical Details

Module Compatibility

The SDK now outputs ES modules, making it compatible with modern bundlers like Vite while maintaining backward compatibility. Node.js-specific modules (fs, path) are properly externalized for browser environments.

Build Process

npm run dev    # Builds SDK + starts dev server
npm run build  # Builds SDK + creates production build

File Structure

example/
├── src/
│   ├── App.tsx          # Main component with SDK integration
│   ├── App.css          # Styling
│   ├── main.tsx         # React entry point
│   └── index.css        # Global styles
├── package.json         # Local SDK dependency configuration
├── vite.config.ts       # Vite configuration with CORS
├── tsconfig.json        # TypeScript configuration
└── README.md            # Comprehensive documentation

Testing

• ✅ SDK builds successfully with ES module output
• ✅ React app builds without errors
• ✅ All SDK classes and enums import correctly
• ✅ Development server runs successfully
• ✅ Production build completes successfully
• ✅ App displays SDK functionality in browser

Screenshots

The example app successfully displays:

• SDK import status confirmation
• All available classes with their types
• Complete enum values for AgentExecutionStatus and EventSortOrder
• Real-time import timestamp

This demonstrates that the TypeScript SDK is properly configured and ready for use in React applications.

@rbren can click here to continue refining the PR

[openhands-ai]

Looks like there are a few issues preventing this PR from being merged!

• GitHub Actions are failing:
  • CI

If you'd like me to help, just leave a comment, like

@OpenHands please fix the failing actions on PR #7 at branch `add-react-vite-example`

Feel free to include any additional details that might help me get this PR into a better state.

_{^{You can manage your notification settings}}