🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

Demo

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

🔑 Anthropic API Key

\n \n

\n \n Enter your Anthropic API Key\n \n

\n setTempKey(e.target.value)}\n placeholder=\"sk-ant-api03-...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n setIsVisible(!isVisible)}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700\"\n >\n {isVisible ? '🙈' : '👁️'}\n \n

\n \n Save\n \n \n Clear\n \n

\n\n

\n Status:{' '}\n \n {apiKey ? '✅ API key configured' : '❌ No API key set'}\n \n

\n Your API key is stored locally in your browser and sent directly to Anthropic's API.\n

\n Get your API key from{' '}\n \n Anthropic Console\n \n

\n );\n}",[],[228,235,242],{"_102":250,"_95":251,"_143":252,"_145":236,"_146":132,"_147":131,"_149":150,"_104":253,"_99":219,"_152":172,"_154":254,"_155":27,"_156":-5,"_157":255,"_98":256},"406ea978-3cd8-11f0-8bd2-9e149126039e","App.tsx","a811d0a0-3c0b-11f0-a66f-9e149126039e",["D",1748555993999],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\nimport { MCPClient } from \"./MCPClient.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient(\"/mcp\");\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log(\"Available MCP tools:\", tools);\n }).catch(err => {\n console.error(\"Failed to load MCP tools:\", err);\n });\n\n // Add welcome message\n setMessages([{\n id: \"1\",\n role: \"system\",\n content:\n \"Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.\",\n timestamp: new Date(),\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem(\"anthropic_api_key\", key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert(\"Please enter your Anthropic API key first\");\n return;\n }\n\n if (!mcpClient) {\n alert(\"MCP client not initialized\");\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content,\n timestamp: new Date(),\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join(\"\\n\")}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n \"anthropic-beta\": \"mcp-client-2025-04-04\",\n },\n body: JSON.stringify({\n model: \"claude-3-5-sonnet-20241022\",\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content }]),\n mcp_servers: [{\n \"type\": \"url\",\n \"url\": \"https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp\",\n \"name\": \"val-town-mcp\",\n \"authorization_token\": \"YOUR_TOKEN\",\n }],\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n\n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n\n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === \"tool_use\") {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input,\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: \"assistant\",\n content: data.content\n ?.filter((block: any) => block.type === \"text\")\n ?.map((block: any) => block.text)\n ?.join(\"\\n\") || \"No response content\",\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined,\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: \"system\",\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: \"1\",\n role: \"system\",\n content: \"Chat cleared. You can start a new conversation.\",\n timestamp: new Date(),\n }]);\n };\n\n return (\n

\n 🏔️ Val Town MCP Client Demo\n

\n Chat with Claude using Val Town's MCP server capabilities\n

\n\n

\n \n\n

Chat Interface

\n \n Clear Chat\n \n

\n\n \n

\n\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n

\n\n \n

\n );\n}",[],[228,235,251],{"_102":258,"_95":259,"_143":260,"_145":236,"_146":132,"_147":131,"_149":150,"_104":261,"_99":148,"_152":172,"_154":262,"_155":27,"_156":-5,"_157":263,"_98":264},"406eb4f4-3cd8-11f0-8bd2-9e149126039e","ChatInterface.tsx","c29dafca-3c0b-11f0-99d2-9e149126039e",["D",1748555993999],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface ChatInterfaceProps {\n messages: Message[];\n onSendMessage: (content: string) => void;\n isLoading: boolean;\n availableTools: any[];\n}\n\nexport function ChatInterface({ messages, onSendMessage, isLoading, availableTools }: ChatInterfaceProps) {\n const [input, setInput] = useState('');\n const messagesEndRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim() && !isLoading) {\n onSendMessage(input.trim());\n setInput('');\n }\n };\n\n const formatTimestamp = (date: Date) => {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const renderMessageContent = (message: Message) => {\n if (message.role === 'assistant' && message.toolCalls) {\n return (\n

\n {/* Regular content */}\n {message.content && (\n

\n {message.content.split('\\n').map((line, i) => (\n

{line}

\n ))}\n

\n )}\n \n {/* Tool calls */}\n {message.toolCalls.map((toolCall, index) => (\n

\n 🔧 Tool Call: {toolCall.name}\n

\n \n

\n Arguments:\n

\n                    {JSON.stringify(toolCall.arguments, null, 2)}\n

\n \n {toolCall.result && (\n

\n Result:\n

\n                      {JSON.stringify(toolCall.result, null, 2)}\n

\n )}\n \n {toolCall.error && (\n

\n Error:\n

\n                      {toolCall.error}\n

\n )}\n

\n ))}\n

\n );\n }\n\n return (\n

\n {message.content.split('\\n').map((line, i) => (\n

{line}

\n ))}\n

\n );\n };\n\n const getMessageIcon = (role: string) => {\n switch (role) {\n case 'user': return '👤';\n case 'assistant': return '🤖';\n case 'system': return 'ℹ️';\n default: return '💬';\n }\n };\n\n const getMessageBgColor = (role: string) => {\n switch (role) {\n case 'user': return 'bg-blue-50 border-blue-200';\n case 'assistant': return 'bg-green-50 border-green-200';\n case 'system': return 'bg-yellow-50 border-yellow-200';\n default: return 'bg-gray-50 border-gray-200';\n }\n };\n\n return (\n

\n {/* Messages */}\n

\n {messages.map((message) => (\n \n

\n {getMessageIcon(message.role)}\n {message.role}\n

\n \n {formatTimestamp(message.timestamp)}\n \n

\n {renderMessageContent(message)}\n

\n ))}\n \n {isLoading && (\n

\n 🤖\n Assistant\n

\n Thinking...\n

\n )}\n \n

\n\n {/* Input form */}\n

\n setInput(e.target.value)}\n placeholder=\"Ask me anything about Val Town or request tool usage...\"\n disabled={isLoading}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100\"\n />\n \n {isLoading ? '⏳' : 'Send'}\n \n \n\n {/* Example prompts */}\n

Try these example prompts:

\n {[\n \"List all available tools\",\n \"Store some data in blob storage\",\n \"Query the SQLite database\",\n \"Send a test email\",\n \"Read a project file\",\n \"Get an environment variable\"\n ].map((prompt, index) => (\n !isLoading && setInput(prompt)}\n disabled={isLoading}\n className=\"px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n {prompt}\n \n ))}\n

\n );\n}",[],[228,235,259],{"_102":266,"_95":267,"_143":268,"_145":236,"_146":132,"_147":269,"_149":150,"_104":270,"_99":31,"_152":172,"_154":271,"_155":27,"_156":-5,"_157":272,"_98":273},"c93d9f84-3c0b-11f0-a847-9e149126039e","MCPClient.tsx","c93da01a-3c0b-11f0-a847-9e149126039e",17,["D",1748468176700],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * MCP Client for communicating with the Val Town MCP Server\n */\nexport class MCPClient {\n private baseUrl: string;\n private requestId: number = 1;\n\n constructor(baseUrl: string) {\n this.baseUrl = baseUrl;\n }\n\n private async makeRequest(method: string, params?: any): Promise {\n const request = {\n jsonrpc: \"2.0\",\n id: this.requestId++,\n method,\n ...(params && { params })\n };\n\n const response = await fetch(this.baseUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(request)\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n \n if (data.error) {\n throw new Error(`MCP Error: ${data.error.message}`);\n }\n\n return data.result;\n }\n\n async initialize(): Promise {\n return this.makeRequest('initialize', {});\n }\n\n async listTools(): Promise {\n const result = await this.makeRequest('tools/list');\n return result.tools || [];\n }\n\n async callTool(name: string, arguments_: any): Promise {\n return this.makeRequest('tools/call', {\n name,\n arguments: arguments_\n });\n }\n\n async listResources(): Promise {\n const result = await this.makeRequest('resources/list');\n return result.resources || [];\n }\n\n async readResource(uri: string): Promise {\n return this.makeRequest('resources/read', { uri });\n }\n\n async ping(): Promise {\n return this.makeRequest('ping');\n }\n}",[],[228,235,267],[228,235],{"_102":276,"_95":277,"_143":278,"_145":229,"_146":132,"_147":131,"_149":150,"_104":279,"_99":245,"_152":209,"_154":280,"_155":27,"_156":-5,"_157":281,"_98":282},"406ebdc8-3cd8-11f0-8bd2-9e149126039e","index.html","902fd09a-3c0b-11f0-8e65-9e149126039e",["D",1748555993999],"\n\n\n \n \n Val Town MCP Client Demo\n \n \n\n\n

\n \n\n",[],[228,277],{"_102":284,"_95":285,"_143":286,"_145":229,"_146":132,"_147":287,"_149":150,"_104":288,"_99":31,"_152":172,"_154":289,"_155":27,"_156":-5,"_157":290,"_98":291},"92c8ed32-3c0b-11f0-8e65-9e149126039e","index.tsx","92c8edfa-3c0b-11f0-8e65-9e149126039e",13,["D",1748468085338],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[228,285],[228],{"_102":294,"_95":295,"_143":296,"_145":-5,"_146":132,"_147":245,"_149":150,"_104":297,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":298,"_98":307},"cd9d2b82-3c09-11f0-8c8b-9e149126039e","shared","a0461c89-f398-426b-afac-535542e9505b",["D",1748467325043],[299],{"_102":300,"_95":301,"_143":302,"_145":296,"_146":132,"_147":245,"_149":150,"_104":303,"_99":31,"_152":172,"_154":304,"_155":27,"_156":-5,"_157":305,"_98":306},"cd9d0fc6-3c09-11f0-8c8b-9e149126039e","utils.ts","cd9d1098-3c09-11f0-8c8b-9e149126039e",["D",1748467325043],"/**\n * Shared utilities for the MCP server\n */\n\nexport interface MCPError {\n code: number;\n message: string;\n data?: any;\n}\n\nexport class MCPException extends Error {\n code: number;\n data?: any;\n\n constructor(code: number, message: string, data?: any) {\n super(message);\n this.code = code;\n this.data = data;\n this.name = 'MCPException';\n }\n}\n\n// MCP Error Codes\nexport const MCP_ERRORS = {\n PARSE_ERROR: -32700,\n INVALID_REQUEST: -32600,\n METHOD_NOT_FOUND: -32601,\n INVALID_PARAMS: -32602,\n INTERNAL_ERROR: -32603,\n TOOL_NOT_FOUND: -32000,\n RESOURCE_NOT_FOUND: -32001,\n PERMISSION_DENIED: -32002,\n} as const;\n\nexport function validateRequired(params: any, required: string[]): void {\n for (const field of required) {\n if (params[field] === undefined || params[field] === null) {\n throw new MCPException(\n MCP_ERRORS.INVALID_PARAMS,\n `Missing required parameter: ${field}`\n );\n }\n }\n}\n\nexport function sanitizeKey(key: string): string {\n // Ensure blob keys are safe\n return key.replace(/[^a-zA-Z0-9_\\-\\.\\/]/g, '_');\n}",[],[295,301],[295],{"_102":309,"_95":205,"_143":310,"_145":-5,"_146":132,"_147":311,"_149":150,"_104":312,"_99":171,"_152":209,"_154":313,"_155":27,"_156":-5,"_157":314,"_98":315},"aa44d602-3c0a-11f0-8162-9e149126039e","c9000cca-3c09-11f0-a57a-9e149126039e",11,["D",1748467695240],"# Val Town MCP Server\n\nA Model Context Protocol (MCP) server that exposes Val Town's native tools and resources, allowing AI models to interact with Val Town's capabilities through a standardized protocol.\n\n## Features\n\n- **Blob Storage**: Read, write, list, and delete blob data\n- **SQLite Database**: Execute queries and manage database operations\n- **Email**: Send emails through Val Town's email service\n- **OpenAI Integration**: Access OpenAI API through Val Town's service\n- **File Operations**: Read and list project files\n- **Environment Variables**: Access environment configuration\n\n## MCP Protocol Support\n\nThis server implements the Model Context Protocol specification, providing:\n- Tool discovery and execution\n- Resource listing and reading\n- Proper error handling and validation\n- JSON-RPC 2.0 compliant messaging\n\n## API Endpoints\n\n- `POST /mcp` - Main MCP protocol endpoint\n- `GET /` - Server information and documentation\n\n## Usage\n\nThe server exposes Val Town capabilities as MCP tools that can be called by compatible AI models and clients.\n\n### Endpoints\n\n- **Main Interface**: `GET /` - Web interface with documentation\n- **MCP Protocol**: `POST /mcp` - JSON-RPC 2.0 endpoint for MCP requests\n- **Health Check**: `GET /health` - Server health status\n- **API Documentation**: `GET /api/docs` - Complete API documentation in JSON format\n\n### Example MCP Requests\n\n```json\n// Initialize connection\n{\n \"jsonrpc\": \"2.0\",\n \"id\": 1,\n \"method\": \"initialize\",\n \"params\": {}\n}\n\n// List available tools\n{\n \"jsonrpc\": \"2.0\",\n \"id\": 2,\n \"method\": \"tools/list\"\n}\n\n// Call a tool\n{\n \"jsonrpc\": \"2.0\",\n \"id\": 3,\n \"method\": \"tools/call\",\n \"params\": {\n \"name\": \"blob_set\",\n \"arguments\": {\n \"key\": \"my-data\",\n \"value\": {\"hello\": \"world\"}\n }\n }\n}\n\n// List resources\n{\n \"jsonrpc\": \"2.0\",\n \"id\": 4,\n \"method\": \"resources/list\"\n}\n```\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main HTTP server\n│ ├── mcp/\n│ │ ├── server.ts # MCP protocol handler\n│ │ ├── tools.ts # Tool definitions and handlers\n│ │ ├── resources.ts # Resource definitions and handlers\n│ │ └── types.ts # MCP type definitions\n│ └── README.md\n├── shared/\n│ └── utils.ts # Shared utilities\n└── README.md\n```",[],[205],"files",[140,159,165,176,185,194,203,213,226,233,240,249,257,265,275,283,293,299,308],"counts",{"_320":31,"_321":171,"_322":31,"_323":31},"pulls","branches","forks","envVars","contents",[326,329,332,335],{"_102":141,"_95":142,"_143":144,"_145":-5,"_146":132,"_147":148,"_149":150,"_104":327,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":328},["D",1748467332476],[142],{"_102":227,"_95":228,"_143":229,"_145":-5,"_146":132,"_147":230,"_149":150,"_104":330,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":331},["D",1748468080979],[228],{"_102":294,"_95":295,"_143":296,"_145":-5,"_146":132,"_147":245,"_149":150,"_104":333,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":334},["D",1748467325043],[295],{"_102":309,"_95":205,"_143":310,"_145":-5,"_146":132,"_147":311,"_149":150,"_104":336,"_99":171,"_152":209,"_154":313,"_155":27,"_156":-5,"_98":337},["D",1748467695240],[205],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":343,"_347":348,"_562":31,"_563":150},{"_102":103,"_95":96,"_104":344,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":27,"_115":-5,"_116":31,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":27,"_21":345,"_129":346},["D",1748420544100],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5,"_136":-5,"_137":-5},"history",[349,363,368,377,385,393,401,409,417,425,433,440,448,457,464,472,480,487,495,503,511,519,524,531,538,548,553],{"_143":260,"_99":131,"_104":350,"_146":132,"_316":351},["D",1748555993999],[352,354,357,360],{"_102":258,"_146":132,"_143":260,"_95":259,"_154":262,"_152":172,"_99":148,"_145":236,"_104":350,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":353},[228,235,259],{"_102":276,"_146":132,"_143":278,"_95":277,"_154":280,"_152":209,"_99":245,"_145":229,"_104":355,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":356},["D",1748555993999],[228,277],{"_102":241,"_146":132,"_143":243,"_95":242,"_154":246,"_152":172,"_99":245,"_145":236,"_104":358,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":359},["D",1748555993999],[228,235,242],{"_102":250,"_146":132,"_143":252,"_95":251,"_154":254,"_152":172,"_99":219,"_145":236,"_104":361,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":362},["D",1748555993999],[228,235,251],{"_143":216,"_99":217,"_104":364,"_146":132,"_316":365},["D",1748555963084],[366],{"_102":214,"_146":132,"_143":216,"_95":215,"_154":221,"_152":220,"_99":219,"_145":144,"_104":364,"_147":217,"_156":222,"_149":150,"_155":27,"_98":367},[142,215],{"_143":216,"_99":369,"_104":370,"_146":132,"_316":371},36,["D",1748555825016],[372],{"_102":373,"_146":132,"_143":216,"_95":215,"_154":374,"_152":220,"_99":375,"_145":144,"_104":370,"_147":369,"_156":222,"_149":27,"_155":27,"_98":376},"dbb5c6a6-3cd7-11f0-885c-9e149126039e","/**\n * Val Town MCP Server - Main HTTP Entry Point\n */\n\nimport { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { getServerInfo, handleMCPRequest } from \"./mcp/server.ts\";\nimport { MCPRequest } from \"./mcp/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main MCP endpoint\napp.post(\"/mcp\", async (c) => {\n try {\n const request: MCPRequest = await c.req.json();\n const response = await handleMCPRequest(request);\n\n return c.json(response);\n } catch (error) {\n return c.json({\n jsonrpc: \"2.0\",\n error: {\n code: -32700,\n message: \"Parse error\",\n data: error.message,\n },\n }, 400);\n }\n});\n\n// Main page - Mobile-optimized MCP client demo\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Server information endpoint (moved to /info)\napp.get(\"/info\", (c) => {\n const serverInfo = getServerInfo();\n\n const html = `\n\n\n\n \n \n Val Town MCP Server\n \n\n\n

🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

Demo

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

\n\n`;\n\n return c.html(html);\n});\n\n// Demo/Test page with MCP client (legacy route)\napp.get(\"/demo\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n server: getServerInfo().name,\n });\n});\n\n// API documentation endpoint\napp.get(\"/api/docs\", async (c) => {\n const { TOOLS } = await import(\"./mcp/tools.ts\");\n\n return c.json({\n server: getServerInfo(),\n tools: TOOLS,\n endpoints: {\n mcp: \"POST /mcp - Main MCP protocol endpoint\",\n health: \"GET /health - Health check\",\n docs: \"GET /api/docs - This documentation\",\n },\n examples: {\n initialize: {\n jsonrpc: \"2.0\",\n id: 1,\n method: \"initialize\",\n params: {},\n },\n listTools: {\n jsonrpc: \"2.0\",\n id: 2,\n method: \"tools/list\",\n },\n callTool: {\n jsonrpc: \"2.0\",\n id: 3,\n method: \"tools/call\",\n params: {\n name: \"blob_get\",\n arguments: { key: \"example-key\" },\n },\n },\n },\n });\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",8,[142,215],{"_143":260,"_99":378,"_104":379,"_146":132,"_316":380},35,["D",1748555764275],[381],{"_102":382,"_146":132,"_143":260,"_95":259,"_154":383,"_152":172,"_99":245,"_145":236,"_104":379,"_147":378,"_156":-5,"_149":27,"_155":27,"_98":384},"b7813356-3cd7-11f0-8626-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface ChatInterfaceProps {\n messages: Message[];\n onSendMessage: (content: string) => void;\n isLoading: boolean;\n availableTools: any[];\n}\n\nexport function ChatInterface({ messages, onSendMessage, isLoading, availableTools }: ChatInterfaceProps) {\n const [input, setInput] = useState('');\n const messagesEndRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim() && !isLoading) {\n onSendMessage(input.trim());\n setInput('');\n }\n };\n\n const formatTimestamp = (date: Date) => {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const renderMessageContent = (message: Message) => {\n if (message.role === 'assistant' && message.toolCalls) {\n return (\n

\n {/* Regular content */}\n {message.content && (\n

\n {message.content.split('\\n').map((line, i) => (\n

{line}

\n ))}\n

\n )}\n \n {/* Tool calls */}\n {message.toolCalls.map((toolCall, index) => (\n

\n 🔧 Tool Call: {toolCall.name}\n

\n \n

\n Arguments ▶\n

\n                    {JSON.stringify(toolCall.arguments, null, 2)}\n

\n \n {toolCall.result && (\n

\n Result ▶\n

\n                      {JSON.stringify(toolCall.result, null, 2)}\n

\n )}\n \n {toolCall.error && (\n

\n Error:\n

\n                      {toolCall.error}\n

\n )}\n

\n ))}\n

\n );\n }\n\n return (\n

\n {message.content.split('\\n').map((line, i) => (\n

{line}

\n ))}\n

\n {/* Messages - takes most of the available space */}\n

\n {messages.map((message) => (\n \n

\n {getMessageIcon(message.role)}\n {message.role}\n

\n \n {formatTimestamp(message.timestamp)}\n \n

\n {renderMessageContent(message)}\n

\n ))}\n \n {isLoading && (\n

\n 🤖\n Assistant\n

\n Thinking...\n

\n )}\n \n

\n\n {/* Input form - fixed at bottom */}\n

\n setInput(e.target.value)}\n placeholder=\"Ask me anything...\"\n disabled={isLoading}\n className=\"flex-1 px-3 py-2 md:py-3 text-sm md:text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100\"\n />\n \n {isLoading ? '⏳' : 'Send'}\n \n \n\n {/* Example prompts - collapsible on mobile */}\n

\n 💡 Example prompts {/* Add arrow for mobile */}\n ▼\n

\n {[\n \"List all available tools\",\n \"Store some data in blob storage\", \n \"Query the SQLite database\",\n \"Send a test email\",\n \"Read a project file\",\n \"Get an environment variable\"\n ].map((prompt, index) => (\n !isLoading && setInput(prompt)}\n disabled={isLoading}\n className=\"px-2 md:px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n {prompt}\n \n ))}\n

\n );\n}",[228,235,259],{"_143":278,"_99":386,"_104":387,"_146":132,"_316":388},34,["D",1748555743832],[389],{"_102":390,"_146":132,"_143":278,"_95":277,"_154":391,"_152":209,"_99":171,"_145":229,"_104":387,"_147":386,"_156":-5,"_149":27,"_155":27,"_98":392},"ab51c47e-3cd7-11f0-8905-9e149126039e","\n\n\n \n \n Val Town MCP Client Demo\n \n \n \n\n\n

\n \n\n",[228,277],{"_143":243,"_99":394,"_104":395,"_146":132,"_316":396},33,["D",1748555732030],[397],{"_102":398,"_146":132,"_143":243,"_95":242,"_154":399,"_152":172,"_99":171,"_145":236,"_104":395,"_147":394,"_156":-5,"_149":27,"_155":27,"_98":400},"a4493860-3cd7-11f0-bb5e-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ApiKeyInputProps {\n apiKey: string;\n onApiKeyChange: (key: string) => void;\n}\n\nexport function ApiKeyInput({ apiKey, onApiKeyChange }: ApiKeyInputProps) {\n const [isVisible, setIsVisible] = useState(false);\n const [tempKey, setTempKey] = useState(apiKey);\n\n const handleSave = () => {\n onApiKeyChange(tempKey);\n };\n\n const handleClear = () => {\n setTempKey('');\n onApiKeyChange('');\n localStorage.removeItem('anthropic_api_key');\n };\n\n return (\n

🔑 Anthropic API Key

\n \n

\n \n Enter your Anthropic API Key\n \n

\n setTempKey(e.target.value)}\n placeholder=\"sk-ant-api03-...\"\n className=\"w-full px-3 py-2 md:py-3 text-sm md:text-base border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n setIsVisible(!isVisible)}\n className=\"absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 text-lg\"\n >\n {isVisible ? '🙈' : '👁️'}\n \n

\n \n Save\n \n \n Clear\n \n

\n\n

\n Status:{' '}\n \n {apiKey ? '✅ API key configured' : '❌ No API key set'}\n \n

\n Your API key is stored locally in your browser and sent directly to Anthropic's API.\n

\n Get your API key from{' '}\n \n Anthropic Console\n \n

\n );\n}",[228,235,242],{"_143":260,"_99":402,"_104":403,"_146":132,"_316":404},32,["D",1748555707440],[405],{"_102":406,"_146":132,"_143":260,"_95":259,"_154":407,"_152":172,"_99":171,"_145":236,"_104":403,"_147":402,"_156":-5,"_149":27,"_155":27,"_98":408},"95a0ad20-3cd7-11f0-b3cd-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface ChatInterfaceProps {\n messages: Message[];\n onSendMessage: (content: string) => void;\n isLoading: boolean;\n availableTools: any[];\n}\n\nexport function ChatInterface({ messages, onSendMessage, isLoading, availableTools }: ChatInterfaceProps) {\n const [input, setInput] = useState('');\n const messagesEndRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (input.trim() && !isLoading) {\n onSendMessage(input.trim());\n setInput('');\n }\n };\n\n const formatTimestamp = (date: Date) => {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n const renderMessageContent = (message: Message) => {\n if (message.role === 'assistant' && message.toolCalls) {\n return (\n

\n {/* Regular content */}\n {message.content && (\n

\n {message.content.split('\\n').map((line, i) => (\n

{line}

\n ))}\n

\n )}\n \n {/* Tool calls */}\n {message.toolCalls.map((toolCall, index) => (\n

\n 🔧 Tool Call: {toolCall.name}\n

\n \n

\n Arguments:\n

\n                    {JSON.stringify(toolCall.arguments, null, 2)}\n

\n \n {toolCall.result && (\n

\n Result:\n

\n                      {JSON.stringify(toolCall.result, null, 2)}\n

\n )}\n \n {toolCall.error && (\n

\n Error:\n

\n                      {toolCall.error}\n

\n )}\n

\n ))}\n

\n );\n }\n\n return (\n

\n {message.content.split('\\n').map((line, i) => (\n

{line}

\n ))}\n

\n {/* Messages - takes most of the available space */}\n

\n {messages.map((message) => (\n \n

\n {getMessageIcon(message.role)}\n {message.role}\n

\n \n {formatTimestamp(message.timestamp)}\n \n

\n {renderMessageContent(message)}\n

\n ))}\n \n {isLoading && (\n

\n 🤖\n Assistant\n

\n Thinking...\n

\n )}\n \n

\n\n {/* Input form - fixed at bottom */}\n

\n 💡 Example prompts {/* Add arrow for mobile */}\n ▼\n

\n {[\n \"List all available tools\",\n \"Store some data in blob storage\", \n \"Query the SQLite database\",\n \"Send a test email\",\n \"Read a project file\",\n \"Get an environment variable\"\n ].map((prompt, index) => (\n !isLoading && setInput(prompt)}\n disabled={isLoading}\n className=\"px-2 md:px-3 py-1 text-xs bg-gray-200 text-gray-700 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n >\n {prompt}\n \n ))}\n

\n );\n}",[228,235,259],{"_143":252,"_99":410,"_104":411,"_146":132,"_316":412},31,["D",1748555678178],[413],{"_102":414,"_146":132,"_143":252,"_95":251,"_154":415,"_152":172,"_99":375,"_145":236,"_104":411,"_147":410,"_156":-5,"_149":27,"_155":27,"_98":416},"84303a88-3cd7-11f0-9678-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\nimport { MCPClient } from \"./MCPClient.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n const [showApiKey, setShowApiKey] = useState(false);\n const [showTools, setShowTools] = useState(false);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n setShowApiKey(false); // Hide API key section if already set\n } else {\n setShowApiKey(true); // Show API key section if not set\n }\n\n // Initialize MCP client\n const client = new MCPClient(\"/mcp\");\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log(\"Available MCP tools:\", tools);\n }).catch(err => {\n console.error(\"Failed to load MCP tools:\", err);\n });\n\n // Add welcome message\n setMessages([{\n id: \"1\",\n role: \"system\",\n content:\n \"Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.\",\n timestamp: new Date(),\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem(\"anthropic_api_key\", key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert(\"Please enter your Anthropic API key first\");\n return;\n }\n\n if (!mcpClient) {\n alert(\"MCP client not initialized\");\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content,\n timestamp: new Date(),\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join(\"\\n\")}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n \"anthropic-beta\": \"mcp-client-2025-04-04\",\n },\n body: JSON.stringify({\n model: \"claude-3-5-sonnet-20241022\",\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content }]),\n mcp_servers: [{\n \"type\": \"url\",\n \"url\": \"https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp\",\n \"name\": \"val-town-mcp\",\n \"authorization_token\": \"YOUR_TOKEN\",\n }],\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n\n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n\n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === \"tool_use\") {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input,\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: \"assistant\",\n content: data.content\n ?.filter((block: any) => block.type === \"text\")\n ?.map((block: any) => block.text)\n ?.join(\"\\n\") || \"No response content\",\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined,\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: \"system\",\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: \"1\",\n role: \"system\",\n content: \"Chat cleared. You can start a new conversation.\",\n timestamp: new Date(),\n }]);\n };\n\n const [showApiKey, setShowApiKey] = useState(!apiKey);\n const [showTools, setShowTools] = useState(false);\n\n return (\n

\n {/* Mobile-first header - compact on mobile */}\n

\n 🏔️ Val Town MCP Demo\n

\n Chat with Claude using Val Town's MCP server\n

\n\n {/* Main content area - flex-1 to take remaining space */}\n

\n {/* Mobile navigation/controls */}\n

\n setShowApiKey(!showApiKey)}\n className={`px-3 py-1 text-sm rounded-full transition-colors ${\n apiKey \n ? 'bg-green-100 text-green-700' \n : 'bg-red-100 text-red-700'\n }`}\n >\n {apiKey ? '✅ API Key Set' : '❌ Set API Key'}\n \n setShowTools(!showTools)}\n className=\"px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full\"\n >\n 🔧 Tools ({availableTools.length})\n \n \n 🗑️ Clear\n \n

\n\n {/* Collapsible API Key section */}\n

\n \n

\n\n {/* Chat Interface - takes remaining space */}\n

\n {/* Desktop header for chat */}\n

Chat Interface

\n \n Clear Chat\n \n

\n\n {/* Chat content - flex-1 to fill remaining space */}\n

\n \n

\n\n {/* Collapsible Tools section */}\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n\n {/* Footer - only show on desktop */}\n \n

\n );\n}",[228,235,251],{"_143":252,"_99":418,"_104":419,"_146":132,"_316":420},30,["D",1748555672263],[421],{"_102":422,"_146":132,"_143":252,"_95":251,"_154":423,"_152":172,"_99":207,"_145":236,"_104":419,"_147":418,"_156":-5,"_149":27,"_155":27,"_98":424},"80a92e4c-3cd7-11f0-9825-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\nimport { MCPClient } from \"./MCPClient.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n const [showApiKey, setShowApiKey] = useState(false);\n const [showTools, setShowTools] = useState(false);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient(\"/mcp\");\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log(\"Available MCP tools:\", tools);\n }).catch(err => {\n console.error(\"Failed to load MCP tools:\", err);\n });\n\n // Add welcome message\n setMessages([{\n id: \"1\",\n role: \"system\",\n content:\n \"Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.\",\n timestamp: new Date(),\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem(\"anthropic_api_key\", key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert(\"Please enter your Anthropic API key first\");\n return;\n }\n\n if (!mcpClient) {\n alert(\"MCP client not initialized\");\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content,\n timestamp: new Date(),\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join(\"\\n\")}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n \"anthropic-beta\": \"mcp-client-2025-04-04\",\n },\n body: JSON.stringify({\n model: \"claude-3-5-sonnet-20241022\",\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content }]),\n mcp_servers: [{\n \"type\": \"url\",\n \"url\": \"https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp\",\n \"name\": \"val-town-mcp\",\n \"authorization_token\": \"YOUR_TOKEN\",\n }],\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n\n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n\n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === \"tool_use\") {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input,\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: \"assistant\",\n content: data.content\n ?.filter((block: any) => block.type === \"text\")\n ?.map((block: any) => block.text)\n ?.join(\"\\n\") || \"No response content\",\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined,\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: \"system\",\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: \"1\",\n role: \"system\",\n content: \"Chat cleared. You can start a new conversation.\",\n timestamp: new Date(),\n }]);\n };\n\n const [showApiKey, setShowApiKey] = useState(!apiKey);\n const [showTools, setShowTools] = useState(false);\n\n return (\n

\n {/* Mobile-first header - compact on mobile */}\n

\n 🏔️ Val Town MCP Demo\n

\n Chat with Claude using Val Town's MCP server\n

\n\n {/* Main content area - flex-1 to take remaining space */}\n

\n {/* Mobile navigation/controls */}\n

\n\n {/* Collapsible API Key section */}\n

\n \n

\n\n {/* Chat Interface - takes remaining space */}\n

\n {/* Desktop header for chat */}\n

Chat Interface

\n \n Clear Chat\n \n

\n\n {/* Chat content - flex-1 to fill remaining space */}\n

\n \n

\n\n {/* Collapsible Tools section */}\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n\n {/* Footer - only show on desktop */}\n \n

\n );\n}",[228,235,251],{"_143":252,"_99":426,"_104":427,"_146":132,"_316":428},29,["D",1748555666400],[429],{"_102":430,"_146":132,"_143":252,"_95":251,"_154":431,"_152":172,"_99":180,"_145":236,"_104":427,"_147":426,"_156":-5,"_149":27,"_155":27,"_98":432},"7d2ad27a-3cd7-11f0-9833-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\nimport { MCPClient } from \"./MCPClient.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient(\"/mcp\");\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log(\"Available MCP tools:\", tools);\n }).catch(err => {\n console.error(\"Failed to load MCP tools:\", err);\n });\n\n // Add welcome message\n setMessages([{\n id: \"1\",\n role: \"system\",\n content:\n \"Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.\",\n timestamp: new Date(),\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem(\"anthropic_api_key\", key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert(\"Please enter your Anthropic API key first\");\n return;\n }\n\n if (!mcpClient) {\n alert(\"MCP client not initialized\");\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content,\n timestamp: new Date(),\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join(\"\\n\")}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n \"anthropic-beta\": \"mcp-client-2025-04-04\",\n },\n body: JSON.stringify({\n model: \"claude-3-5-sonnet-20241022\",\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content }]),\n mcp_servers: [{\n \"type\": \"url\",\n \"url\": \"https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp\",\n \"name\": \"val-town-mcp\",\n \"authorization_token\": \"YOUR_TOKEN\",\n }],\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n\n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n\n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === \"tool_use\") {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input,\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: \"assistant\",\n content: data.content\n ?.filter((block: any) => block.type === \"text\")\n ?.map((block: any) => block.text)\n ?.join(\"\\n\") || \"No response content\",\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined,\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: \"system\",\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: \"1\",\n role: \"system\",\n content: \"Chat cleared. You can start a new conversation.\",\n timestamp: new Date(),\n }]);\n };\n\n const [showApiKey, setShowApiKey] = useState(!apiKey);\n const [showTools, setShowTools] = useState(false);\n\n return (\n

\n {/* Mobile-first header - compact on mobile */}\n

\n 🏔️ Val Town MCP Demo\n

\n Chat with Claude using Val Town's MCP server\n

\n\n {/* Main content area - flex-1 to take remaining space */}\n

\n {/* Mobile navigation/controls */}\n

\n\n {/* Collapsible API Key section */}\n

\n \n

\n\n {/* Chat Interface - takes remaining space */}\n

\n {/* Desktop header for chat */}\n

Chat Interface

\n \n Clear Chat\n \n

\n\n {/* Chat content - flex-1 to fill remaining space */}\n

\n \n

\n\n {/* Collapsible Tools section */}\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n\n {/* Footer - only show on desktop */}\n \n

\n );\n}",[228,235,251],{"_143":216,"_99":434,"_104":435,"_146":132,"_316":436},28,["D",1748516885187],[437],{"_102":438,"_146":132,"_143":216,"_95":215,"_154":221,"_152":220,"_99":207,"_145":144,"_104":435,"_147":434,"_156":222,"_149":27,"_155":27,"_98":439},"31c32a58-3c7d-11f0-8325-9e149126039e",[142,215],{"_143":216,"_99":441,"_104":442,"_146":132,"_316":443},27,["D",1748516874914],[444],{"_102":445,"_146":132,"_143":216,"_95":215,"_154":446,"_152":220,"_99":180,"_145":144,"_104":442,"_147":441,"_156":222,"_149":27,"_155":27,"_98":447},"2ba38a82-3c7d-11f0-b954-9e149126039e","/**\n * Val Town MCP Server - Main HTTP Entry Point\n */\n\nimport { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { getServerInfo, handleMCPRequest } from \"./mcp/server.ts\";\nimport { MCPRequest } from \"./mcp/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main MCP endpoint\napp.post(\"/mcp\", async (c) => {\n try {\n const request: MCPRequest = await c.req.json();\n const response = await handleMCPRequest(request);\n\n return c.json(response);\n } catch (error) {\n return c.json({\n jsonrpc: \"2.0\",\n error: {\n code: -32700,\n message: \"Parse error\",\n data: error.message,\n },\n }, 400);\n }\n});\n\n// Demo/Test page with MCP client\napp.get(\"/demo\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Server information endpoint\napp.get(\"/\", (c) => {\n const serverInfo = getServerInfo();\n\n const html = `\n\n\n\n \n \n Val Town MCP Server\n \n\n\n

🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

\n Demo\n

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

\n Demo\n

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

\n\n`;\n\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n server: getServerInfo().name,\n });\n});\n\n// API documentation endpoint\napp.get(\"/api/docs\", async (c) => {\n const { TOOLS } = await import(\"./mcp/tools.ts\");\n\n return c.json({\n server: getServerInfo(),\n tools: TOOLS,\n endpoints: {\n mcp: \"POST /mcp - Main MCP protocol endpoint\",\n health: \"GET /health - Health check\",\n docs: \"GET /api/docs - This documentation\",\n },\n examples: {\n initialize: {\n jsonrpc: \"2.0\",\n id: 1,\n method: \"initialize\",\n params: {},\n },\n listTools: {\n jsonrpc: \"2.0\",\n id: 2,\n method: \"tools/list\",\n },\n callTool: {\n jsonrpc: \"2.0\",\n id: 3,\n method: \"tools/call\",\n params: {\n name: \"blob_get\",\n arguments: { key: \"example-key\" },\n },\n },\n },\n });\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",5,[142,215],{"_143":252,"_99":458,"_104":459,"_146":132,"_316":460},25,["D",1748516404325],[461],{"_102":462,"_146":132,"_143":252,"_95":251,"_154":254,"_152":172,"_99":455,"_145":236,"_104":459,"_147":458,"_156":-5,"_149":27,"_155":27,"_98":463},"13260026-3c7c-11f0-bebd-9e149126039e",[228,235,251],{"_143":252,"_99":465,"_104":466,"_146":132,"_316":467},24,["D",1748516370021],[468],{"_102":469,"_146":132,"_143":252,"_95":251,"_154":470,"_152":172,"_99":189,"_145":236,"_104":466,"_147":465,"_156":-5,"_149":27,"_155":27,"_98":471},"feb2ef78-3c7b-11f0-9ea5-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\nimport { MCPClient } from \"./MCPClient.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient(\"/mcp\");\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log(\"Available MCP tools:\", tools);\n }).catch(err => {\n console.error(\"Failed to load MCP tools:\", err);\n });\n\n // Add welcome message\n setMessages([{\n id: \"1\",\n role: \"system\",\n content:\n \"Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.\",\n timestamp: new Date(),\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem(\"anthropic_api_key\", key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert(\"Please enter your Anthropic API key first\");\n return;\n }\n\n if (!mcpClient) {\n alert(\"MCP client not initialized\");\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content,\n timestamp: new Date(),\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join(\"\\n\")}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n \"anthropic-beta\": \"mcp-client-2025-04-04\",\n },\n body: JSON.stringify({\n model: \"claude-3-5-sonnet-20241022\",\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content }]),\n mcp_servers: [{\n \"type\": \"url\",\n \"url\": \"https://https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp\",\n \"name\": \"val-town-mcp\",\n \"authorization_token\": \"YOUR_TOKEN\",\n }],\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n\n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n\n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === \"tool_use\") {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input,\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: \"assistant\",\n content: data.content\n ?.filter((block: any) => block.type === \"text\")\n ?.map((block: any) => block.text)\n ?.join(\"\\n\") || \"No response content\",\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined,\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: \"system\",\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: \"1\",\n role: \"system\",\n content: \"Chat cleared. You can start a new conversation.\",\n timestamp: new Date(),\n }]);\n };\n\n return (\n

\n 🏔️ Val Town MCP Client Demo\n

\n Chat with Claude using Val Town's MCP server capabilities\n

\n\n

\n \n\n

Chat Interface

\n \n Clear Chat\n \n

\n\n \n

\n\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n

\n\n \n

\n );\n}",[228,235,251],{"_143":252,"_99":473,"_104":474,"_146":132,"_316":475},23,["D",1748516207744],[476],{"_102":477,"_146":132,"_143":252,"_95":251,"_154":478,"_152":172,"_99":148,"_145":236,"_104":474,"_147":473,"_156":-5,"_149":27,"_155":27,"_98":479},"9dfa492e-3c7b-11f0-a92f-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\nimport { MCPClient } from \"./MCPClient.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState(\"\");\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient(\"/mcp\");\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log(\"Available MCP tools:\", tools);\n }).catch(err => {\n console.error(\"Failed to load MCP tools:\", err);\n });\n\n // Add welcome message\n setMessages([{\n id: \"1\",\n role: \"system\",\n content:\n \"Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.\",\n timestamp: new Date(),\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem(\"anthropic_api_key\", key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert(\"Please enter your Anthropic API key first\");\n return;\n }\n\n if (!mcpClient) {\n alert(\"MCP client not initialized\");\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content,\n timestamp: new Date(),\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join(\"\\n\")}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n \"anthropic-beta\": \"mcp-client-2025-04-04\",\n },\n body: JSON.stringify({\n model: \"claude-3-5-sonnet-20241022\",\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content }]),\n tools: availableTools.map(tool => ({\n name: tool.name,\n description: tool.description,\n input_schema: tool.inputSchema,\n })),\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n\n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n\n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === \"tool_use\") {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input,\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: \"assistant\",\n content: data.content\n ?.filter((block: any) => block.type === \"text\")\n ?.map((block: any) => block.text)\n ?.join(\"\\n\") || \"No response content\",\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined,\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: \"system\",\n content: `Error: ${error.message}`,\n timestamp: new Date(),\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: \"1\",\n role: \"system\",\n content: \"Chat cleared. You can start a new conversation.\",\n timestamp: new Date(),\n }]);\n };\n\n return (\n

\n 🏔️ Val Town MCP Client Demo\n

\n Chat with Claude using Val Town's MCP server capabilities\n

\n\n

\n \n\n

Chat Interface

\n \n Clear Chat\n \n

\n\n \n

\n\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n

\n\n \n

\n );\n}",[228,235,251],{"_143":252,"_99":481,"_104":482,"_146":132,"_316":483},22,["D",1748516188991],[484],{"_102":485,"_146":132,"_143":252,"_95":251,"_154":478,"_152":172,"_99":245,"_145":236,"_104":482,"_147":481,"_156":-5,"_149":27,"_155":27,"_98":486},"92cbe346-3c7b-11f0-97f8-9e149126039e",[228,235,251],{"_143":252,"_99":488,"_104":489,"_146":132,"_316":490},21,["D",1748515999236],[491],{"_102":492,"_146":132,"_143":252,"_95":251,"_154":493,"_152":172,"_99":171,"_145":236,"_104":489,"_147":488,"_156":-5,"_149":27,"_155":27,"_98":494},"21b29d08-3c7b-11f0-ac76-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { MCPClient } from \"./MCPClient.tsx\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\n\nexport interface Message {\n id: string;\n role: 'user' | 'assistant' | 'system';\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState('');\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem('anthropic_api_key');\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient('/mcp');\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log('Available MCP tools:', tools);\n }).catch(err => {\n console.error('Failed to load MCP tools:', err);\n });\n\n // Add welcome message\n setMessages([{\n id: '1',\n role: 'system',\n content: 'Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.',\n timestamp: new Date()\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem('anthropic_api_key', key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert('Please enter your Anthropic API key first');\n return;\n }\n\n if (!mcpClient) {\n alert('MCP client not initialized');\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: 'user',\n content,\n timestamp: new Date()\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join('\\n')}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch('https://api.anthropic.com/v1/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'x-api-key': apiKey,\n 'anthropic-version': '2023-06-01',\n 'anthropic-dangerous-direct-browser-access': 'true',\n },\n body: JSON.stringify({\n model: 'claude-3-5-sonnet-20241022',\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== 'system')\n .map(m => ({\n role: m.role,\n content: m.content\n }))\n .concat([{ role: 'user', content }]),\n tools: availableTools.map(tool => ({\n name: tool.name,\n description: tool.description,\n input_schema: tool.inputSchema\n }))\n })\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n \n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n \n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === 'tool_use') {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: 'assistant',\n content: data.content\n ?.filter((block: any) => block.type === 'text')\n ?.map((block: any) => block.text)\n ?.join('\\n') || 'No response content',\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n\n } catch (error) {\n console.error('Error sending message:', error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: 'system',\n content: `Error: ${error.message}`,\n timestamp: new Date()\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: '1',\n role: 'system',\n content: 'Chat cleared. You can start a new conversation.',\n timestamp: new Date()\n }]);\n };\n\n return (\n

\n 🏔️ Val Town MCP Client Demo\n

\n Chat with Claude using Val Town's MCP server capabilities\n

\n\n

\n \n \n

Chat Interface

\n \n Clear Chat\n \n

\n \n \n

\n\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n

\n\n \n

\n );\n}",[228,235,251],{"_143":216,"_99":496,"_104":497,"_146":132,"_316":498},20,["D",1748468193842],[499],{"_102":500,"_146":132,"_143":216,"_95":215,"_154":501,"_152":220,"_99":189,"_145":144,"_104":497,"_147":496,"_156":222,"_149":27,"_155":27,"_98":502},"d375620c-3c0b-11f0-ae1e-9e149126039e","/**\n * Val Town MCP Server - Main HTTP Entry Point\n */\n\nimport { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { handleMCPRequest, getServerInfo } from \"./mcp/server.ts\";\nimport { MCPRequest } from \"./mcp/types.ts\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main MCP endpoint\napp.post(\"/mcp\", async (c) => {\n try {\n const request: MCPRequest = await c.req.json();\n const response = await handleMCPRequest(request);\n \n return c.json(response);\n } catch (error) {\n return c.json({\n jsonrpc: \"2.0\",\n error: {\n code: -32700,\n message: \"Parse error\",\n data: error.message\n }\n }, 400);\n }\n});\n\n// Demo/Test page with MCP client\napp.get(\"/demo\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Server information endpoint\napp.get(\"/\", (c) => {\n const serverInfo = getServerInfo();\n \n const html = `\n\n\n\n \n \n Val Town MCP Server\n \n\n\n

🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

🏔️ Val Town MCP Server

Model Context Protocol server exposing Val Town's native tools and resources

\n\n

📋 Server Info

Name:: ${serverInfo.name}
Version:: ${serverInfo.version}
Protocol Version:: ${serverInfo.protocolVersion}

\n\n

🔧 Capabilities

\n \n Tools (10 available)\n
\n \n Resources (Dynamic discovery)\n
\n \n Logging\n

\n\n

🛠️ Available Tools

💾 Blob Storage

• blob_get
• blob_set
• blob_list
• blob_delete

🗄️ SQLite Database

• sqlite_execute

📧 Email

• email_send

🤖 OpenAI

• openai_chat

📁 File Operations

• file_read
• file_list

🌍 Environment

• env_get

\n\n

🔗 Usage

MCP Endpoint

\n POST /mcp\n

Send JSON-RPC 2.0 requests to interact with the MCP server

\n \n

Example Request

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"tools/list\"\n}

\n\n

Health Check

{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 1,\n  \"method\": \"ping\"\n}

\n\n \n

\n\n`;\n\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", (c) => {\n return c.json({ \n status: \"healthy\", \n timestamp: new Date().toISOString(),\n server: getServerInfo().name\n });\n});\n\n// API documentation endpoint\napp.get(\"/api/docs\", async (c) => {\n const { TOOLS } = await import(\"./mcp/tools.ts\");\n \n return c.json({\n server: getServerInfo(),\n tools: TOOLS,\n endpoints: {\n mcp: \"POST /mcp - Main MCP protocol endpoint\",\n health: \"GET /health - Health check\",\n docs: \"GET /api/docs - This documentation\"\n },\n examples: {\n initialize: {\n jsonrpc: \"2.0\",\n id: 1,\n method: \"initialize\",\n params: {}\n },\n listTools: {\n jsonrpc: \"2.0\",\n id: 2,\n method: \"tools/list\"\n },\n callTool: {\n jsonrpc: \"2.0\",\n id: 3,\n method: \"tools/call\",\n params: {\n name: \"blob_get\",\n arguments: { key: \"example-key\" }\n }\n }\n }\n });\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[142,215],{"_143":268,"_99":269,"_104":520,"_146":132,"_316":521},["D",1748468176700],[522],{"_102":266,"_146":132,"_143":268,"_95":267,"_154":271,"_152":172,"_99":31,"_145":236,"_104":520,"_147":269,"_156":-5,"_149":150,"_155":27,"_98":523},[228,235,267],{"_143":260,"_99":525,"_104":526,"_146":132,"_316":527},16,["D",1748468165586],[528],{"_102":529,"_146":132,"_143":260,"_95":259,"_154":262,"_152":172,"_99":31,"_145":236,"_104":526,"_147":525,"_156":-5,"_149":27,"_155":27,"_98":530},"c29daf16-3c0b-11f0-99d2-9e149126039e",[228,235,259],{"_143":243,"_99":532,"_104":533,"_146":132,"_316":534},15,["D",1748468135775],[535],{"_102":536,"_146":132,"_143":243,"_95":242,"_154":246,"_152":172,"_99":31,"_145":236,"_104":533,"_147":532,"_156":-5,"_149":27,"_155":27,"_98":537},"b0d8f98e-3c0b-11f0-af64-9e149126039e",[228,235,242],{"_143":236,"_99":237,"_104":539,"_146":132,"_316":540},["D",1748468121047],[541,543],{"_102":234,"_146":132,"_143":236,"_95":235,"_154":-5,"_152":153,"_99":31,"_145":229,"_104":539,"_147":237,"_156":-5,"_149":150,"_155":27,"_98":542},[228,235],{"_102":544,"_146":132,"_143":252,"_95":251,"_154":545,"_152":172,"_99":31,"_145":236,"_104":546,"_147":237,"_156":-5,"_149":27,"_155":27,"_98":547},"a811cfd8-3c0b-11f0-a66f-9e149126039e","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { MCPClient } from \"./MCPClient.tsx\";\nimport { ApiKeyInput } from \"./ApiKeyInput.tsx\";\nimport { ChatInterface } from \"./ChatInterface.tsx\";\n\nexport interface Message {\n id: string;\n role: 'user' | 'assistant' | 'system';\n content: string;\n timestamp: Date;\n toolCalls?: ToolCall[];\n mcpResponses?: any[];\n}\n\nexport interface ToolCall {\n id: string;\n name: string;\n arguments: any;\n result?: any;\n error?: string;\n}\n\nexport function App() {\n const [apiKey, setApiKey] = useState('');\n const [messages, setMessages] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [mcpClient, setMcpClient] = useState(null);\n const [availableTools, setAvailableTools] = useState([]);\n\n // Initialize MCP client and load API key from localStorage\n useEffect(() => {\n const savedApiKey = localStorage.getItem('anthropic_api_key');\n if (savedApiKey) {\n setApiKey(savedApiKey);\n }\n\n // Initialize MCP client\n const client = new MCPClient('/mcp');\n setMcpClient(client);\n\n // Load available tools\n client.listTools().then(tools => {\n setAvailableTools(tools);\n console.log('Available MCP tools:', tools);\n }).catch(err => {\n console.error('Failed to load MCP tools:', err);\n });\n\n // Add welcome message\n setMessages([{\n id: '1',\n role: 'system',\n content: 'Welcome to the Val Town MCP Client Demo! This chat interface connects to Claude via the Anthropic API and uses the Val Town MCP server to execute tools. Enter your Anthropic API key to get started.',\n timestamp: new Date()\n }]);\n }, []);\n\n const handleApiKeyChange = (key: string) => {\n setApiKey(key);\n localStorage.setItem('anthropic_api_key', key);\n };\n\n const sendMessage = async (content: string) => {\n if (!apiKey.trim()) {\n alert('Please enter your Anthropic API key first');\n return;\n }\n\n if (!mcpClient) {\n alert('MCP client not initialized');\n return;\n }\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: 'user',\n content,\n timestamp: new Date()\n };\n\n setMessages(prev => [...prev, userMessage]);\n setIsLoading(true);\n\n try {\n // Prepare system message with MCP tools\n const systemMessage = `You are an AI assistant with access to Val Town's capabilities through MCP tools. \n\nAvailable tools:\n${availableTools.map(tool => `- ${tool.name}: ${tool.description}`).join('\\n')}\n\nWhen you need to use these tools, I will execute them for you and provide the results. Be helpful and use the tools when appropriate to assist the user.`;\n\n // Call Anthropic API\n const response = await fetch('https://api.anthropic.com/v1/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'x-api-key': apiKey,\n 'anthropic-version': '2023-06-01'\n },\n body: JSON.stringify({\n model: 'claude-3-5-sonnet-20241022',\n max_tokens: 1024,\n system: systemMessage,\n messages: messages\n .filter(m => m.role !== 'system')\n .map(m => ({\n role: m.role,\n content: m.content\n }))\n .concat([{ role: 'user', content }]),\n tools: availableTools.map(tool => ({\n name: tool.name,\n description: tool.description,\n input_schema: tool.inputSchema\n }))\n })\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(`Anthropic API error: ${errorData.error?.message || response.statusText}`);\n }\n\n const data = await response.json();\n \n // Handle tool calls\n let toolCalls: ToolCall[] = [];\n let mcpResponses: any[] = [];\n \n if (data.content) {\n for (const contentBlock of data.content) {\n if (contentBlock.type === 'tool_use') {\n const toolCall: ToolCall = {\n id: contentBlock.id,\n name: contentBlock.name,\n arguments: contentBlock.input\n };\n\n try {\n // Execute tool via MCP\n const result = await mcpClient.callTool(contentBlock.name, contentBlock.input);\n toolCall.result = result;\n mcpResponses.push(result);\n } catch (error) {\n toolCall.error = error.message;\n mcpResponses.push({ error: error.message });\n }\n\n toolCalls.push(toolCall);\n }\n }\n }\n\n // Create assistant message\n const assistantMessage: Message = {\n id: (Date.now() + 1).toString(),\n role: 'assistant',\n content: data.content\n ?.filter((block: any) => block.type === 'text')\n ?.map((block: any) => block.text)\n ?.join('\\n') || 'No response content',\n timestamp: new Date(),\n toolCalls: toolCalls.length > 0 ? toolCalls : undefined,\n mcpResponses: mcpResponses.length > 0 ? mcpResponses : undefined\n };\n\n setMessages(prev => [...prev, assistantMessage]);\n\n } catch (error) {\n console.error('Error sending message:', error);\n const errorMessage: Message = {\n id: (Date.now() + 2).toString(),\n role: 'system',\n content: `Error: ${error.message}`,\n timestamp: new Date()\n };\n setMessages(prev => [...prev, errorMessage]);\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearChat = () => {\n setMessages([{\n id: '1',\n role: 'system',\n content: 'Chat cleared. You can start a new conversation.',\n timestamp: new Date()\n }]);\n };\n\n return (\n

\n 🏔️ Val Town MCP Client Demo\n

\n Chat with Claude using Val Town's MCP server capabilities\n

\n\n

\n \n \n

Chat Interface

\n \n Clear Chat\n \n

\n \n \n

\n\n {availableTools.length > 0 && (\n

\n Available MCP Tools ({availableTools.length})\n

\n {availableTools.map((tool, index) => (\n

{tool.name}

{tool.description}

\n ))}\n

\n )}\n

\n\n \n

\n );\n}",["D",1748468121047],[228,235,251],{"_143":286,"_99":287,"_104":549,"_146":132,"_316":550},["D",1748468085338],[551],{"_102":284,"_146":132,"_143":286,"_95":285,"_154":289,"_152":172,"_99":31,"_145":229,"_104":549,"_147":287,"_156":-5,"_149":150,"_155":27,"_98":552},[228,285],{"_143":278,"_99":230,"_104":554,"_146":132,"_316":555},["D",1748468080979],[556,559],{"_102":557,"_146":132,"_143":278,"_95":277,"_154":280,"_152":209,"_99":31,"_145":229,"_104":554,"_147":230,"_156":-5,"_149":27,"_155":27,"_98":558},"902fcfc8-3c0b-11f0-8e65-9e149126039e",[228,277],{"_102":227,"_146":132,"_143":229,"_95":228,"_154":-5,"_152":153,"_99":31,"_145":-5,"_104":560,"_147":230,"_156":-5,"_149":150,"_155":27,"_98":561},["D",1748468080979],[228],"page","hasNext","routes/_app","actionData","errors"]

History