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

Source: https://www.val.town/x/c15r/Chat

Live server: https://c15r--7471cb243cdd11f08caa9e149126039e.web.val.run

• 🚀 Real-time streaming responses - See Claude's responses appear word-by-word as they're generated
• ⏹️ Stream control - Stop streaming at any time with the stop button
• Full-screen mobile-optimized chat interface
• Direct client-side Anthropic API integration with server-side streaming proxy
• 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
• Structured display of MCP tool calls and results to prevent truncation

This app implements Anthropic's official streaming guide using:

• Server-Sent Events (SSE) for real-time communication
• Proper event parsing (message_start, content_block_delta, message_stop, etc.)
• Content block reassembly for text, tool use, and thinking responses
• Error handling and keep-alive support
• Token usage tracking
• Support for all delta types (text, JSON, thinking)

├── backend/
│   ├── index.ts            # Hono server with streaming endpoints
│   └── anthropic.ts        # Anthropic streaming client implementation
├── frontend/
│   ├── index.html          # Main HTML template
│   ├── index.tsx           # React app entry point
│   ├── components/
│   │   ├── App.tsx         # Main app component
│   │   ├── StreamingChat.tsx # Real-time streaming chat interface
│   │   ├── Chat.tsx        # Legacy non-streaming chat (backup)
│   │   ├── Settings.tsx    # Settings flyout
│   │   └── Message.tsx     # Individual message component
│   └── style.css           # Custom styles with streaming animations
├── shared/
│   └── types.ts            # Shared TypeScript types for streaming
└── 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