Anthropic Streaming Chat with MCP

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

Bundles Contextual MCP server by default: https://c15r--1564b217248f4a97a4d37bfe82cb8b19.web.val.run/mcp

• 🚀 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
• MCP server testing - test button for each MCP server with visual status indicators (✅/❌)

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)

• POST /api/chat/stream - Real-time streaming chat responses (SSE)
• POST /api/chat - Non-streaming chat responses (fallback)
• POST /api/test-mcp - Test MCP server connectivity and protocol compliance

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. Use the "Test" button next to each MCP server to verify connectivity (shows ✅ for success, ❌ for errors)
5. Start chatting with Claude and watch responses stream in real-time!
6. Use the stop button (⏹️) to interrupt streaming at any time
7. Switch models anytime in settings without losing your chat history
8. 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 Streaming: Watch Claude's responses appear word-by-word as they're generated
• Stream Control: Stop streaming responses at any time with the stop button
• 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 during streaming
• Auto-resize: Input field grows with content
• Error Handling: Clear error messages for API issues with stream recovery
• Loading States: Visual feedback during API calls and streaming
• 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
• Streaming Animations: Visual cursor and highlighting for active streaming responses