Val Town Code SearchReturn to Val Town

15
16export interface AppConfig {
17  anthropicApiKey: string;
18  mcpServers: MCPServerConfig[];
19  selectedModel: string;
40export default function App() {
41  const [config, setConfig] = useState<AppConfig>({
42    anthropicApiKey: "",
43    mcpServers: [],
44    selectedModel: "claude-3-5-sonnet-20241022",
55  // Load config from localStorage on mount
56  useEffect(() => {
57    const savedApiKey = localStorage.getItem("anthropic_api_key");
58    const savedMcpServers = localStorage.getItem("mcp_servers");
59    const savedMessages = localStorage.getItem("chat_messages");
64    let mcpServers = savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS;
65    setConfig({
66      anthropicApiKey: savedApiKey || "",
67      mcpServers: mcpServers,
68      selectedModel: savedModel || "claude-3-5-sonnet-20241022",
81    }
82
83    // Show settings if no API key is configured
84    if (!savedApiKey) {
85      setShowSettings(true);
86    }
89  // Save config to localStorage when it changes
90  useEffect(() => {
91    if (config.anthropicApiKey) {
92      localStorage.setItem("anthropic_api_key", config.anthropicApiKey);
93    }
94    localStorage.setItem("mcp_servers", config.mcpServers?.length ? JSON.stringify(config.mcpServers) : "");

1# Anthropic Streaming Chat with MCP
2
3A 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**.
4
5Source: https://www.val.town/x/c15r/Chat 
38const clientPool = new MCPClientPool(connectedClients, serverConfigs);
39
40// Unified API across all components
41await clientPool.testServer(serverName);
42await clientPool.fetchTools();
116
117The app stores configuration and chat history in localStorage:
118- `anthropic_api_key`: Your Anthropic API key
119- `selected_model`: The chosen Claude model (defaults to claude-3-5-sonnet-20241022)
120- `mcp_servers`: Array of configured MCP servers
144For detailed testing information, see [TESTING.md](./TESTING.md).
145
146### API Endpoints
147
148- `GET /` - Main application (serves frontend)
155
1561. Open the app at the provided URL
1572. Click "Settings" in the footer to configure your Anthropic API key and select your preferred Claude model
1583. Add/remove/toggle MCP servers as needed
1594. Use the "Test" button next to each MCP server to verify connectivity (shows ✅ for success, ❌ for errors)
200- **Auto-scroll**: Messages automatically scroll to bottom during streaming
201- **Auto-resize**: Input field grows with content
202- **Error Handling**: Clear error messages for API issues with stream recovery
203- **Loading States**: Visual feedback during API calls and streaming
204- **Structured Responses**: MCP tool use and results are displayed in organized, collapsible sections
205- **Clean Interface**: Maximized chat area with no header, footer contains all controls