Val Town Code SearchReturn to Val Town

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

97
98export async function sendDailyBriefing(chatId?: string, today?: DateTime) {
99  // Get API keys from environment
100  const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
101  const telegramToken = Deno.env.get("TELEGRAM_TOKEN");
102
106  }
107
108  if (!apiKey) {
109    console.error("Anthropic API key is not configured.");
110    return;
111  }
122
123  // Initialize Anthropic client
124  const anthropic = new Anthropic({ apiKey });
125
126  // Initialize Telegram bot
162
163  // disabled title for now, it seemes unnecessary...
164  // await bot.api.sendMessage(chatId, `*${title}*`, { parse_mode: "Markdown" });
165
166  // Then send the main content
169
170  if (content.length <= MAX_LENGTH) {
171    await bot.api.sendMessage(chatId, content, { parse_mode: "Markdown" });
172    // Store the briefing in chat history
173    await storeChatMessage(
198    // Send each chunk as a separate message and store in chat history
199    for (const chunk of chunks) {
200      await bot.api.sendMessage(chatId, chunk, { parse_mode: "Markdown" });
201      // Store each chunk in chat history
202      await storeChatMessage(