Anthropic Chat with MCP

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

Features

Full-screen mobile-optimized chat interface
Direct client-side Anthropic API integration
Configurable MCP servers with localStorage persistence
Dedicated settings button in the chat header for easy access
Enhanced MCP response handling with collapsible sections for complex tool use and results
Real-time chat with Claude 3.5 Sonnet
Structured display of MCP tool calls and results to prevent truncation

Project Structure

├── 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

Configuration

The app stores configuration in localStorage:

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

Usage

Open the app at the provided URL
Click the settings icon (⚙️) to configure your Anthropic API key
Add/remove/toggle MCP servers as needed
Start chatting with Claude!

Default MCP Server

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)

Features in Detail

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
Dedicated Settings Access: Prominent settings button (⚙️) in the chat header alongside clear chat button
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

c15r