A mobile-optimized single page chat application that uses the Anthropic Messages API with MCP (Model Context Protocol) server support.

• Full-screen mobile-optimized chat interface
• Direct client-side Anthropic API integration
• Configurable MCP servers with localStorage persistence
• Settings flyout for API key and MCP server management
• Real-time chat with Claude 3.5 Sonnet

├── frontend/
│   ├── index.html          # Main HTML template
│   ├── index.tsx           # React app entry point
│   ├── components/
│   │   ├── App.tsx         # Main app component
│   │   ├── Chat.tsx        # Chat interface
│   │   ├── Settings.tsx    # Settings flyout
│   │   └── Message.tsx     # Individual message component
│   └── style.css           # Custom styles
└── README.md

The app stores configuration in localStorage:

• anthropic_api_key: Your Anthropic API key
• mcp_servers: Array of configured MCP servers

1. Open the app
2. Click the settings icon to configure your Anthropic API key
3. Add/remove MCP servers as needed
4. Start chatting with Claude!