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
• Configurable MCP servers with localStorage persistence
• Unobtrusive footer controls with settings and clear chat buttons co-located with input
• 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 3.5 Sonnet
• 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
• 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 the settings icon (⚙️) in the footer to configure your Anthropic API key
3. Add/remove/toggle MCP servers as needed
4. Start chatting with Claude!
5. Your chat history 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