Sonnet Web UI is a React-based web application that provides an interface for interacting with the Claude 3.5 Sonnet AI model via the OpenRouter API. It features a split-screen layout with a React component rendering area on the left and a chat interface on the right.
Before you begin, ensure you have met the following requirements:
Clone the repository:
git clone https://github.com/yourusername/sonnet-web-ui.git
cd sonnet-web-ui
Install the dependencies:
npm install
Create a .env
file in the root directory and add your OpenRouter API key:
REACT_APP_OPENROUTER_API_KEY=your_api_key_here
To start the development server:
npm start
This will run the app in development mode. Open http://localhost:3000 to view it in your browser.
src/components/ui/
: Contains reusable UI componentssrc/lib/utils.js
: Utility functionssrc/SonnetWebUI.js
: Main component for the Sonnet Web UIsrc/App.js
: Root componentsrc/index.js
: Entry point of the applicationYou can customize the appearance of the UI by modifying the Tailwind CSS classes in the component files. The tailwind.config.js
file can be used to extend or override the default Tailwind configuration.
Contributions to the Sonnet Web UI project are welcome. Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.