Anthropic Chat with MCP

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
• Model selection - Choose between different Claude models (3.5 Sonnet, 3.5 Haiku, 3 Opus, etc.) without clearing chat history
• Configurable MCP servers with localStorage persistence
• Clean footer layout with text-based settings and clear chat links positioned alongside status text
• Enhanced MCP response handling with collapsible sections for complex tool use and results
• Persistent chat history - messages are saved to localStorage and restored on page load
• Real-time chat with Claude models
• Structured display of MCP tool calls and results to prevent truncation

├── backend/
│   └── index.ts            # Hono server for static file serving
├── 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 and chat history in localStorage:

• anthropic_api_key: Your Anthropic API key
• selected_model: The chosen Claude model (defaults to claude-3-5-sonnet-20241022)
• mcp_servers: Array of configured MCP servers
• chat_messages: Complete chat history (persists between page loads)

1. Open the app at the provided URL
2. Click "Settings" in the footer to configure your Anthropic API key and select your preferred Claude model
3. Add/remove/toggle MCP servers as needed
4. Start chatting with Claude!
5. Switch models anytime in settings without losing your chat history
6. Your chat history and settings will be automatically saved and restored when you return

The app comes pre-configured with the Val Town MCP server:

• Name: Val Town MCP
• URL: https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp
• Status: Enabled by default (you'll need to add your authorization token)

• Mobile-First Design: Optimized for mobile devices with touch-friendly controls
• Real-time Chat: Direct integration with Anthropic's Claude 3.5 Sonnet
• MCP Integration: Support for multiple Model Context Protocol servers
• Enhanced MCP Display: Collapsible sections for tool calls and results with proper JSON formatting
• Unobtrusive Footer Controls: Settings (⚙️) and clear chat (🗑️) buttons positioned in the footer alongside the input
• Persistent Chat History: All messages automatically saved to localStorage and restored on page load
• Persistent Settings: All configuration stored in browser localStorage
• Auto-scroll: Messages automatically scroll to bottom
• Auto-resize: Input field grows with content
• Error Handling: Clear error messages for API issues
• Loading States: Visual feedback during API calls
• Structured Responses: MCP tool use and results are displayed in organized, collapsible sections
• Clean Interface: Maximized chat area with no header, footer contains all controls