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, featuring centralized client management and performance optimizations.

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
• 🔄 NextSteps Auto-Execution - MCP tools can propose follow-up actions with automatic or manual execution
• 📄 Resource Viewer - MCP tools can display file content with syntax highlighting and fullscreen support
• 🔧 Centralized Client Pool - Unified MCP client management for optimal performance and reliability
• 📊 Performance Optimizations - Memoized rendering, stable references, and efficient connection reuse
• 🔍 Automatic MCP Server Status Checking - Real-time server health monitoring with detailed diagnostics
• 🎯 Command Palette - Quick access to MCP tools and prompts via / commands
• 💾 Persistent Storage - Chat history and settings saved locally with automatic restoration

The application now uses a unified MCPClientPool that eliminates duplicate connections and provides consistent access to MCP operations:

// Single source of truth for all MCP operations
const clientPool = new MCPClientPool(connectedClients, serverConfigs);

// Unified API across all components
await clientPool.testServer(serverName);
await clientPool.fetchTools();
await clientPool.callTool(serverName, toolName, args);

• ✅ No Duplicate Client Connections: Single client instance per server
• ✅ Memoized Client Resolution: Cached lookups prevent unnecessary re-renders
• ✅ Stable Reference Management: Arrays memoized to prevent reload loops
• ✅ Optimized useEffect Dependencies: Minimal effect re-executions
• ✅ Connection Reuse: Existing connections used for all operations

• ❌ Multiple client instances per server (4 separate creation points)
• ❌ Duplicate connection logic across components
• ❌ ResourceViewer reload loops due to unstable references
• ❌ Inconsistent error handling

• ✅ Single client instance per server via centralized pool
• ✅ Unified connection logic in MCPClientPool
• ✅ Stable component rendering with memoized references
• ✅ Consistent error handling across all components

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 static file serving
├── 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
│   │   ├── Settings.tsx    # Settings flyout
│   │   ├── MCPStatus.tsx   # MCP server status dashboard with progressive disclosure
│   │   ├── CommandPalette.tsx # MCP prompt command palette
│   │   ├── HTMLRenderer.tsx # HTML output renderer with MCP context
│   │   ├── NextSteps.tsx   # NextSteps auto-execution component
│   │   ├── ResourceViewer.tsx # File/resource viewer with syntax highlighting
│   │   └── Message.tsx     # Individual message component
│   ├── hooks/
│   │   └── useAnthropicStream.tsx # Streaming chat hook
│   ├── utils/
│   │   ├── mcpTesting.ts   # Frontend MCP server testing
│   │   └── mcpPrompts.ts   # Frontend MCP prompt fetching
│   └── 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)
• auto_execute_next_steps: Global setting for NextSteps auto-execution (defaults to true)

• GET / - Main application (serves frontend)
• GET /frontend/* - Frontend static files
• GET /shared/* - Shared utility files

Note: MCP server testing and prompt fetching are now handled directly on the frontend for improved performance and reduced server load.

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. Configure NextSteps auto-execution in settings (enabled by default)
6. Start chatting with Claude and watch responses stream in real-time!
7. Use the stop button (⏹️) to interrupt streaming at any time
8. Switch models anytime in settings without losing your chat history
9. Your chat history and settings will be automatically saved and restored when you return
10. When MCP tools return NextSteps proposals, they'll appear as interactive pills that can auto-execute or require manual selection

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
• NextSteps Auto-Execution: MCP tools can propose follow-up actions that execute automatically after a countdown or require manual selection. See NextSteps-README.md for implementation details.
• Resource Viewer: MCP tools can display file and resource content with syntax highlighting, fullscreen support, and intelligent rendering based on file type
• 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