Anthropic Chat with MCP

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",50,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","2f3fa440-3cdd-11f0-acd6-9e149126039e","name","index.html","fileType","content","\n\n\n \n \n Anthropic Chat with MCP\n \n \n \n \n\n\n

\n \n\n","\n\n \n \n \n Anthropic Chat with MCP\n \n \n \n \n \n \n

\n \n \n","createdAt",["D",1748592941198],"branchVersion","branchId","7e246fe2-3cdc-11f0-aa89-9e149126039e","id","7e24160a-3cdc-11f0-aa89-9e149126039e","Chat",["D",1748557815516],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","7471cb24-3cdd-11f0-8caa-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0630d977-f678-453e-926c-52043293f59f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",1417,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","c15r","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":256,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":257,"_80":258,"_82":259,"_84":25},"tree",[165,167,176],"files",[165,166,167,168,169,170,171,172,173,174,175,176],"counts",{"_154":62,"_155":156,"_157":156,"_158":159,"_160":161},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_56":126},"chat.parc.land",{"_43":148,"_32":149,"_30":150,"_133":-5,"_41":42,"_40":151,"_135":58,"_38":152,"_13":62,"_34":146,"_35":-5,"_24":25,"_139":-5,"_27":153},{"_43":141,"_32":142,"_30":143,"_133":-5,"_41":42,"_40":144,"_135":58,"_38":145,"_13":62,"_34":146,"_35":-5,"_24":25,"_139":-5,"_27":147},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":25,"_38":136,"_13":137,"_34":20,"_35":138,"_24":25,"_139":-5,"_27":140},"f2d49a56-3ce6-11f0-9d8a-9e149126039e","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e","parentId",43,"latest",["D",1748562306256],11,"# Anthropic Chat with MCP\n\nA mobile-optimized single page chat application that uses the Anthropic Messages API with MCP (Model Context Protocol) server support.\n\n## Features\n\n- Full-screen mobile-optimized chat interface\n- Direct client-side Anthropic API integration\n- **Model selection** - Choose between different Claude models (3.5 Sonnet, 3.5 Haiku, 3 Opus, etc.) without clearing chat history\n- Configurable MCP servers with localStorage persistence\n- **Clean footer layout** with text-based settings and clear chat links positioned alongside status text\n- **Enhanced MCP response handling** with collapsible sections for complex tool use and results\n- **Persistent chat history** - messages are saved to localStorage and restored on page load\n- Real-time chat with Claude models\n- **Structured display of MCP tool calls and results** to prevent truncation\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server for static file serving\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── Chat.tsx # Chat interface\n│ │ ├── Settings.tsx # Settings flyout\n│ │ └── Message.tsx # Individual message component\n│ └── style.css # Custom styles\n└── README.md\n```\n\n## Configuration\n\nThe app stores configuration and chat history in localStorage:\n- `anthropic_api_key`: Your Anthropic API key\n- `selected_model`: The chosen Claude model (defaults to claude-3-5-sonnet-20241022)\n- `mcp_servers`: Array of configured MCP servers\n- `chat_messages`: Complete chat history (persists between page loads)\n\n## Usage\n\n1. Open the app at the provided URL\n2. Click \"Settings\" in the footer to configure your Anthropic API key and select your preferred Claude model\n3. Add/remove/toggle MCP servers as needed\n4. Start chatting with Claude!\n5. Switch models anytime in settings without losing your chat history\n6. Your chat history and settings will be automatically saved and restored when you return\n\n## Default MCP Server\n\nThe app comes pre-configured with the Val Town MCP server:\n- **Name**: Val Town MCP\n- **URL**: `https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp`\n- **Status**: Enabled by default (you'll need to add your authorization token)\n\n## Features in Detail\n\n- **Mobile-First Design**: Optimized for mobile devices with touch-friendly controls\n- **Real-time Chat**: Direct integration with Anthropic's Claude 3.5 Sonnet\n- **MCP Integration**: Support for multiple Model Context Protocol servers\n- **Enhanced MCP Display**: Collapsible sections for tool calls and results with proper JSON formatting\n- **Unobtrusive Footer Controls**: Settings (⚙️) and clear chat (🗑️) buttons positioned in the footer alongside the input\n- **Persistent Chat History**: All messages automatically saved to localStorage and restored on page load\n- **Persistent Settings**: All configuration stored in browser localStorage\n- **Auto-scroll**: Messages automatically scroll to bottom\n- **Auto-resize**: Input field grows with content\n- **Error Handling**: Clear error messages for API issues\n- **Loading States**: Visual feedback during API calls\n- **Structured Responses**: MCP tool use and results are displayed in organized, collapsible sections\n- **Clean Interface**: Maximized chat area with no header, footer contains all controls","label",[131],"2f3fab3e-3cdd-11f0-acd6-9e149126039e","frontend","43895adc-f88f-4b64-90b5-2b707f50c067",2,["D",1748558112658],"directory",[142],"7471d038-3cdd-11f0-8caa-9e149126039e","backend","b0b9068e-33c0-4fad-8bcf-5a3136836657",9,["D",1748558228747],[149],"pulls","branches",1,"forks","envVars",{"_162":62,"_164":62},"connections",{"_162":62,"_163":62},"count","unfilledCount","emptyCount",{"_43":148,"_32":149,"_30":150,"_133":-5,"_41":42,"_40":151,"_135":58,"_38":253,"_13":62,"_34":146,"_35":-5,"_24":25,"_139":-5,"_178":254,"_27":255},{"_43":246,"_32":247,"_30":56,"_133":150,"_41":42,"_40":186,"_135":25,"_38":248,"_13":156,"_34":249,"_35":250,"_24":25,"_139":-5,"_178":251,"_27":252},{"_43":141,"_32":142,"_30":143,"_133":-5,"_41":42,"_40":144,"_135":58,"_38":243,"_13":62,"_34":146,"_35":-5,"_24":25,"_139":-5,"_178":244,"_27":245},{"_43":239,"_32":213,"_30":206,"_133":143,"_41":42,"_40":227,"_135":58,"_38":240,"_13":62,"_34":146,"_35":-5,"_24":25,"_139":-5,"_178":241,"_27":242},{"_43":231,"_32":232,"_30":233,"_133":206,"_41":42,"_40":234,"_135":25,"_38":235,"_13":227,"_34":195,"_35":236,"_24":25,"_139":-5,"_178":237,"_27":238},{"_43":222,"_32":223,"_30":224,"_133":206,"_41":42,"_40":225,"_135":25,"_38":226,"_13":227,"_34":195,"_35":228,"_24":25,"_139":-5,"_178":229,"_27":230},{"_43":214,"_32":215,"_30":216,"_133":206,"_41":42,"_40":217,"_135":25,"_38":218,"_13":144,"_34":195,"_35":219,"_24":25,"_139":-5,"_178":220,"_27":221},{"_43":203,"_32":204,"_30":205,"_133":206,"_41":42,"_40":207,"_135":25,"_38":208,"_13":209,"_34":195,"_35":210,"_24":25,"_139":-5,"_178":211,"_27":212},{"_43":199,"_32":33,"_30":31,"_133":143,"_41":42,"_40":14,"_135":25,"_38":200,"_13":156,"_34":20,"_35":37,"_24":25,"_139":-5,"_178":201,"_27":202},{"_43":190,"_32":191,"_30":192,"_133":143,"_41":42,"_40":193,"_135":25,"_38":194,"_13":62,"_34":195,"_35":196,"_24":25,"_139":-5,"_178":197,"_27":198},{"_43":181,"_32":182,"_30":183,"_133":143,"_41":42,"_40":184,"_135":25,"_38":185,"_13":186,"_34":20,"_35":187,"_24":25,"_139":-5,"_178":188,"_27":189},{"_43":130,"_32":131,"_30":132,"_133":-5,"_41":42,"_40":134,"_135":25,"_38":177,"_13":137,"_34":20,"_35":138,"_24":25,"_139":-5,"_178":179,"_27":180},["D",1748562306256],"children",[],[131],"34889fb4-3d2e-11f0-8171-76b3cceeab13","style.css","42e137de-3cdd-11f0-898f-9e149126039e",49,["D",1748592910753],10,"/* Custom styles for mobile optimization */\n\n.chat-container {\n height: 100svh;\n position: fixed;\n top: 0;\n display: flex;\n flex-direction: column;\n background: #f8fafc;\n}\n\n.chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n}\n\n.message {\n margin-bottom: 1rem;\n max-width: 85%;\n word-wrap: break-word;\n}\n\n.message.user {\n margin-left: auto;\n background: #3b82f6;\n color: white;\n padding: 0.75rem 1rem;\n border-radius: 1rem 1rem 0.25rem 1rem;\n}\n\n.message.assistant {\n background: white;\n border: 1px solid #e2e8f0;\n padding: 0.75rem 1rem;\n border-radius: 1rem 1rem 1rem 0.25rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.message.system {\n background: #fef3c7;\n border: 1px solid #f59e0b;\n padding: 0.5rem 0.75rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n margin: 0 auto;\n max-width: 90%;\n text-align: center;\n}\n\n.chat-footer {\n background: white;\n border-top: 1px solid #e2e8f0;\n box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.chat-input-container {\n padding: 1rem;\n display: flex;\n gap: 0.5rem;\n align-items: flex-end;\n}\n\n.chat-input {\n flex: 1;\n min-height: 2.5rem;\n max-height: 6rem;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 1.5rem;\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s;\n}\n\n.footer-controls {\n display: flex;\n gap: 0.25rem;\n align-items: flex-end;\n}\n\n.footer-button {\n background: none;\n border: none;\n color: #6b7280;\n cursor: pointer;\n padding: 0.5rem;\n border-radius: 0.5rem;\n transition: all 0.2s;\n font-size: 1rem;\n width: 2.5rem;\n height: 2.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.footer-button:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.chat-status {\n padding: 0.5rem 1rem;\n background: #f8fafc;\n border-top: 1px solid #f1f5f9;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.status-text {\n font-size: 0.75rem;\n color: #6b7280;\n flex: 1;\n text-align: center;\n}\n\n.status-link-button {\n background: none;\n border: none;\n color: #3b82f6;\n cursor: pointer;\n font-size: 0.75rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n transition: all 0.2s;\n text-decoration: underline;\n}\n\n.status-link-button:hover {\n background: #f3f4f6;\n color: #2563eb;\n}\n\n.chat-input:focus {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.send-button {\n background: #3b82f6;\n color: white;\n border: none;\n border-radius: 50%;\n width: 2.5rem;\n height: 2.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n flex-shrink: 0;\n font-size: 1rem;\n}\n\n.send-button:hover:not(:disabled) {\n background: #2563eb;\n}\n\n.send-button:disabled {\n background: #9ca3af;\n cursor: not-allowed;\n}\n\n.settings-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n}\n\n.settings-panel {\n background: white;\n border-radius: 1rem;\n padding: 1.5rem;\n width: 100%;\n max-width: 28rem;\n max-height: 80vh;\n overflow-y: auto;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n\n.settings-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n padding-bottom: 1rem;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: #6b7280;\n padding: 0.25rem;\n border-radius: 0.25rem;\n}\n\n.close-button:hover {\n background: #f3f4f6;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: #374151;\n}\n\n.form-input {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.2s;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.mcp-server {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5rem;\n padding: 1rem;\n margin-bottom: 1rem;\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75rem;\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: #374151;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n height: 1.5rem;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.4s;\n border-radius: 1.5rem;\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.125rem;\n width: 1.125rem;\n left: 0.1875rem;\n bottom: 0.1875rem;\n background-color: white;\n transition: 0.4s;\n border-radius: 50%;\n}\n\ninput:checked + .toggle-slider {\n background-color: #3b82f6;\n}\n\ninput:checked + .toggle-slider:before {\n transform: translateX(1.5rem);\n}\n\n.button {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.875rem;\n}\n\n.button-primary {\n background: #3b82f6;\n color: white;\n}\n\n.button-primary:hover {\n background: #2563eb;\n}\n\n.button-secondary {\n background: #f3f4f6;\n color: #374151;\n border: 1px solid #d1d5db;\n}\n\n.button-secondary:hover {\n background: #e5e7eb;\n}\n\n.button-danger {\n background: #ef4444;\n color: white;\n}\n\n.button-danger:hover {\n background: #dc2626;\n}\n\n.loading-indicator {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: #6b7280;\n font-size: 0.875rem;\n padding: 0.5rem 1rem;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.25rem;\n}\n\n.loading-dot {\n width: 0.375rem;\n height: 0.375rem;\n background: #6b7280;\n border-radius: 50%;\n animation: loading-bounce 1.4s ease-in-out infinite both;\n}\n\n.loading-dot:nth-child(1) {\n animation-delay: -0.32s;\n}\n.loading-dot:nth-child(2) {\n animation-delay: -0.16s;\n}\n\n@keyframes loading-bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .chat-input-container {\n padding: 0.75rem;\n }\n\n .chat-status {\n padding: 0.375rem 0.75rem;\n }\n\n .status-text {\n font-size: 0.6875rem;\n }\n\n .status-link-button {\n font-size: 0.6875rem;\n padding: 0.125rem 0.25rem;\n }\n\n .settings-overlay {\n padding: 0.5rem;\n }\n\n .settings-panel {\n padding: 1rem;\n border-radius: 0.75rem;\n }\n\n .message {\n max-width: 90%;\n }\n}\n\n/* Prevent zoom on input focus on iOS */\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n .chat-input,\n .form-input {\n font-size: 16px;\n }\n}\n\n/* MCP Message Styling */\n.mcp-message {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.mcp-structured-response {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mcp-text-content {\n margin-bottom: 0.5rem;\n}\n\n.mcp-regular-content {\n margin-bottom: 0.75rem;\n}\n\n.mcp-section {\n border: 1px solid #e2e8f0;\n border-radius: 0.5rem;\n overflow: hidden;\n background: #f8fafc;\n}\n\n.mcp-section-header {\n width: 100%;\n background: #f1f5f9;\n border: none;\n padding: 0.75rem 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.2s;\n text-align: left;\n font-weight: 500;\n color: #374151;\n}\n\n.mcp-section-header:hover {\n background: #e2e8f0;\n}\n\n.mcp-section-icon {\n color: #6b7280;\n font-size: 0.875rem;\n width: 1rem;\n display: inline-block;\n}\n\n.mcp-section-title {\n flex: 1;\n font-size: 0.875rem;\n}\n\n.mcp-section-content {\n padding: 1rem;\n background: white;\n border-top: 1px solid #e2e8f0;\n}\n\n.mcp-json {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.375rem;\n padding: 0.75rem;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75rem;\n line-height: 1.4;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n color: #374151;\n margin: 0;\n}\n\n.mcp-tool-result.success .mcp-section-header {\n background: #f0fdf4;\n border-bottom: 1px solid #bbf7d0;\n}\n\n.mcp-tool-result.success .mcp-section-header:hover {\n background: #dcfce7;\n}\n\n.mcp-tool-result.error .mcp-section-header {\n background: #fef2f2;\n border-bottom: 1px solid #fecaca;\n}\n\n.mcp-tool-result.error .mcp-section-header:hover {\n background: #fee2e2;\n}\n\n.mcp-tool-result.success {\n border-color: #bbf7d0;\n}\n\n.mcp-tool-result.error {\n border-color: #fecaca;\n}",[],[142,182],"456d654a-3cdd-11f0-b47a-9e149126039e","index.tsx","456d6626-3cdd-11f0-b47a-9e149126039e",4,["D",1748558149866],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[142,191],"46ae02f6-3d2e-11f0-a916-76b3cceeab13",["D",1748592941198],[],[142,33],"51f392a0-3d26-11f0-85e7-76b3cceeab13","Settings.tsx","7048e212-3cdd-11f0-8db8-9e149126039e","35b7d323-5acc-4715-a23c-1ca451a40764",47,["D",1748589524133],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { AppConfig, MCPServer } from \"./App.tsx\";\n\ninterface SettingsProps {\n config: AppConfig;\n onUpdateConfig: (config: Partial) => void;\n onClose: () => void;\n}\n\nexport default function Settings({ config, onUpdateConfig, onClose }: SettingsProps) {\n const [apiKey, setApiKey] = useState(config.anthropicApiKey);\n const [mcpServers, setMcpServers] = useState(config.mcpServers);\n const [selectedModel, setSelectedModel] = useState(config.selectedModel);\n\n const availableModels = [\n { id: \"claude-opus-4-20250514\", name: \"Claude Opus 4\" },\n { id: \"claude-sonnet-4-20250514\", name: \"Claude Sonnet 4\" },\n { id: \"claude-3-7-sonnet-20250219\", name: \"Claude 3.7 Sonnet\" },\n { id: \"claude-3-5-opus-20241022\", name: \"Claude 3.5 Opus\" },\n { id: \"claude-3-5-sonnet-20241022\", name: \"Claude 3.5 Sonnet\" },\n { id: \"claude-3-5-haiku-20241022\", name: \"Claude 3.5 Haiku\" },\n { id: \"claude-3-opus-20240229\", name: \"Claude 3 Opus\" },\n { id: \"claude-3-sonnet-20240229\", name: \"Claude 3 Sonnet\" },\n { id: \"claude-3-haiku-20240307\", name: \"Claude 3 Haiku\" },\n ];\n\n const handleSave = () => {\n onUpdateConfig({\n anthropicApiKey: apiKey,\n mcpServers: mcpServers,\n selectedModel: selectedModel,\n });\n onClose();\n };\n\n const addMcpServer = () => {\n const newServer: MCPServer = {\n id: `mcp-${Date.now()}`,\n name: \"New MCP Server\",\n url: \"\",\n authorization_token: \"\",\n enabled: true,\n };\n setMcpServers([...mcpServers, newServer]);\n };\n\n const updateMcpServer = (id: string, updates: Partial) => {\n setMcpServers(servers => servers.map(server => server.id === id ? { ...server, ...updates } : server));\n };\n\n const removeMcpServer = (id: string) => {\n setMcpServers(servers => servers.filter(server => server.id !== id));\n };\n\n const toggleMcpServer = (id: string) => {\n updateMcpServer(id, { enabled: !mcpServers.find(s => s.id === id)?.enabled });\n };\n\n return (\n

e.target === e.currentTarget && onClose()}>\n

Settings

\n \n

\n\n {/* API Key Section */}\n

\n Anthropic API Key\n setApiKey(e.target.value)}\n placeholder=\"sk-ant-...\"\n className=\"form-input\"\n />\n

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

\n\n {/* Model Selection */}\n

\n Model\n setSelectedModel(e.target.value)}\n className=\"form-input\"\n >\n {availableModels.map((model) => (\n \n ))}\n \n

\n Choose the Claude model to use for conversations. Changes apply to new messages without clearing chat\n history.\n

\n\n {/* MCP Servers Section */}\n

\n MCP Servers\n \n

\n\n {mcpServers.map((server) => (\n

\n updateMcpServer(server.id, { name: e.target.value })}\n className=\"mcp-server-name bg-transparent border-none outline-none flex-1\"\n placeholder=\"Server name\"\n />\n

\n \n toggleMcpServer(server.id)}\n />\n \n \n removeMcpServer(server.id)}\n className=\"text-red-600 hover:text-red-800 p-1\"\n title=\"Remove server\"\n >\n 🗑️\n \n

\n\n

\n updateMcpServer(server.id, { url: e.target.value })}\n placeholder=\"https://example.com/mcp\"\n className=\"form-input text-sm\"\n />\n updateMcpServer(server.id, { authorization_token: e.target.value })}\n placeholder=\"Authorization token\"\n className=\"form-input text-sm\"\n />\n

\n ))}\n\n {mcpServers.length === 0 && (\n

\n No MCP servers configured. Add one to get started.\n

\n )}\n

\n\n {/* Action Buttons */}\n

\n \n \n

\n );\n}",[],[142,213,204],"components","245d95be-3ce2-11f0-807a-9e149126039e","Message.tsx","629c8178-3cdd-11f0-8042-9e149126039e",14,["D",1748560241878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface MessageProps {\n message: Message;\n}\n\ninterface MCPContent {\n type: string;\n text?: string;\n id?: string;\n name?: string;\n input?: any;\n server_name?: string;\n tool_use_id?: string;\n is_error?: boolean;\n content?: any[];\n}\n\nexport default function MessageComponent({ message }: MessageProps) {\n const [expandedSections, setExpandedSections] = useState>(new Set());\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n if (newExpanded.has(sectionId)) {\n newExpanded.delete(sectionId);\n } else {\n newExpanded.add(sectionId);\n }\n setExpandedSections(newExpanded);\n };\n\n const renderCollapsibleSection = (title: string, content: any, sectionId: string) => {\n const isExpanded = expandedSections.has(sectionId);\n \n return (\n

\n toggleSection(sectionId)}\n >\n \n {isExpanded ? '▼' : '▶'}\n \n {title}\n \n {isExpanded && (\n

\n              {typeof content === 'string' ? content : JSON.stringify(content, null, 2)}\n

\n )}\n

\n );\n };\n\n const renderStructuredMCPResponse = (response: any) => {\n const sections: JSX.Element[] = [];\n\n response.content.forEach((contentItem: MCPContent, index: number) => {\n const sectionId = `structured-${index}`;\n\n switch (contentItem.type) {\n case 'text':\n sections.push(\n

\n {formatRegularContent(contentItem.text || \"\")}\n

\n );\n break;\n\n case 'mcp_tool_use':\n sections.push(\n renderCollapsibleSection(\n `🔧 ${contentItem.name} (${contentItem.server_name})`,\n {\n id: contentItem.id,\n input: contentItem.input\n },\n sectionId\n )\n );\n break;\n\n case 'mcp_tool_result':\n const isError = contentItem.is_error;\n const resultContent = contentItem.content?.[0]?.text;\n let parsedResult = resultContent;\n \n try {\n if (resultContent) {\n parsedResult = JSON.parse(resultContent);\n }\n } catch (e) {\n // Keep as string if not JSON\n }\n\n sections.push(\n

\n {renderCollapsibleSection(\n `${isError ? '❌' : '✅'} Tool Result ${isError ? '(Error)' : '(Success)'}`,\n {\n tool_use_id: contentItem.tool_use_id,\n result: parsedResult\n },\n sectionId\n )}\n

\n );\n break;\n\n default:\n sections.push(\n renderCollapsibleSection(\n `📄 ${contentItem.type || 'Unknown Content'}`,\n contentItem,\n sectionId\n )\n );\n }\n });\n\n return (\n

\n {sections}\n

\n );\n };\n\n const detectAndFormatMCPContent = (content: string) => {\n // First, try to parse the entire content as a structured MCP response\n try {\n const parsed = JSON.parse(content);\n if (parsed.content && Array.isArray(parsed.content)) {\n return renderStructuredMCPResponse(parsed);\n }\n } catch (e) {\n // Not a structured response, continue with line-by-line detection\n }\n\n // Try to detect MCP-related content patterns\n const lines = content.split('\\n');\n const sections: JSX.Element[] = [];\n let currentSection = '';\n let sectionCounter = 0;\n\n // Look for tool calls, results, and other MCP structures\n for (let i = 0; i < lines.length; i++) {\n const line = lines[i];\n \n // Detect tool calls\n if (line.includes('tool_use') || line.includes('function_call')) {\n try {\n // Try to parse as JSON\n const toolData = JSON.parse(line);\n sections.push(\n renderCollapsibleSection(\n `🔧 Tool Call: ${toolData.name || 'Unknown'}`,\n toolData,\n `tool-${sectionCounter++}`\n )\n );\n continue;\n } catch (e) {\n // Not JSON, continue with regular formatting\n }\n }\n \n // Detect tool results\n if (line.includes('tool_result') || line.includes('function_result')) {\n try {\n const resultData = JSON.parse(line);\n sections.push(\n renderCollapsibleSection(\n `📊 Tool Result${resultData.isError ? ' (Error)' : ''}`,\n resultData,\n `result-${sectionCounter++}`\n )\n );\n continue;\n } catch (e) {\n // Not JSON, continue with regular formatting\n }\n }\n\n // Detect JSON blocks that might be MCP responses\n if (line.trim().startsWith('{') && line.includes('mcp')) {\n try {\n const mcpData = JSON.parse(line);\n sections.push(\n renderCollapsibleSection(\n '🔗 MCP Response',\n mcpData,\n `mcp-${sectionCounter++}`\n )\n );\n continue;\n } catch (e) {\n // Not JSON, continue with regular formatting\n }\n }\n\n // Regular content\n currentSection += line + '\\n';\n }\n\n // If we found MCP sections, render them with any remaining content\n if (sections.length > 0) {\n return (\n

\n {currentSection.trim() && (\n

\n {formatRegularContent(currentSection.trim())}\n

\n )}\n {sections}\n

\n );\n }\n\n // No MCP content detected, use regular formatting\n return formatRegularContent(content);\n };\n\n const formatRegularContent = (content: string) => {\n // Enhanced markdown-like formatting\n return content.split('\\n').map((line, index) => (\n \n {line.startsWith('```') ? (\n \n {line.replace(/```/g, '')}\n \n ) : line.startsWith('`') && line.endsWith('`') ? (\n \n {line.slice(1, -1)}\n \n ) : line.startsWith('**') && line.endsWith('**') ? (\n {line.slice(2, -2)}\n ) : line.startsWith('*') && line.endsWith('*') ? (\n {line.slice(1, -1)}\n ) : (\n line\n )}\n {index < content.split('\\n').length - 1 &&
}\n \n ));\n };\n\n return (\n

\n {detectAndFormatMCPContent(message.content)}\n

\n );\n}",[],[142,213,215],"eaa771b6-3ce9-11f0-96fe-9e149126039e","Chat.tsx","5cefad40-3cdd-11f0-8c9f-9e149126039e",44,["D",1748563581030],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AppConfig, Message } from \"./App.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\ninterface ChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (message: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function Chat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: ChatProps) {\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const messagesEndRef = useRef(null);\n const textareaRef = useRef(null);\n\n // Auto-scroll to bottom when new messages are added\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n // Auto-resize textarea\n useEffect(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n }, [input]);\n\n const sendMessage = async () => {\n if (!input.trim() || isLoading || !config.anthropicApiKey) return;\n\n const userMessage = input.trim();\n setInput(\"\");\n setIsLoading(true);\n\n // Add user message\n onAddMessage({ role: \"user\", content: userMessage });\n\n try {\n // Prepare MCP servers (only enabled ones)\n const enabledMcpServers = config.mcpServers\n .filter(server => server.enabled && server.url)\n .map(server => ({\n type: \"url\",\n url: server.url,\n name: server.name,\n authorization_token: server.authorization_token,\n }));\n\n // Prepare messages for API (exclude system messages and add current user message)\n const apiMessages = messages\n .filter(m => m.role !== \"system\")\n .map(m => ({\n role: m.role,\n content: m.content,\n }))\n .concat([{ role: \"user\", content: userMessage }]);\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\": config.anthropicApiKey,\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: config.selectedModel,\n max_tokens: 1024,\n messages: apiMessages,\n ...(enabledMcpServers.length > 0 && { mcp_servers: enabledMcpServers }),\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({}));\n throw new Error(\n errorData.error?.message\n || `API request failed: ${response.status} ${response.statusText}`,\n );\n }\n\n const data = await response.json();\n\n // Handle structured MCP responses\n if (data.content && Array.isArray(data.content)) {\n // Store the entire structured response for proper MCP handling\n onAddMessage({ role: \"assistant\", content: JSON.stringify(data) });\n } else if (data.content && data.content[0]?.text) {\n // Fallback for simple text responses\n onAddMessage({ role: \"assistant\", content: data.content[0].text });\n } else {\n throw new Error(\"Unexpected response format from API\");\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n onAddMessage({\n role: \"system\",\n content: `Error: ${error instanceof Error ? error.message : \"Failed to send message\"}`,\n });\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n sendMessage();\n }\n };\n\n const canSend = input.trim() && !isLoading && config.anthropicApiKey;\n\n return (\n <>\n {/* Messages */}\n

\n {!config.anthropicApiKey && (\n

\n Please configure your Anthropic API key in settings to start chatting\n

\n )}\n\n {messages.map((message, index) => )}\n\n {isLoading && (\n

\n Claude is thinking\n

\n )}\n\n

\n\n {/* Footer with Input and Controls */}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder={config.anthropicApiKey\n ? \"Type your message...\"\n : \"Configure API key in settings first\"}\n className=\"chat-input\"\n disabled={!config.anthropicApiKey || isLoading}\n rows={1}\n />\n \n ➤\n \n

\n \n Clear\n \n \n Claude Chat • {config.mcpServers.filter(s => s.enabled).length} MCP servers enabled\n \n \n Settings\n \n

\n \n );\n}",[],[142,213,223],"bc73b956-3ce6-11f0-b7b1-9e149126039e","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",33,["D",1748562215024],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport Chat from \"./Chat.tsx\";\nimport Settings from \"./Settings.tsx\";\n\nexport interface MCPServer {\n id: string;\n name: string;\n url: string;\n authorization_token: string;\n enabled: boolean;\n}\n\nexport interface Message {\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\n}\n\nexport interface AppConfig {\n anthropicApiKey: string;\n mcpServers: MCPServer[];\n selectedModel: string;\n}\n\nconst DEFAULT_MCP_SERVERS: MCPServer[] = [\n {\n id: \"val-town-mcp\",\n name: \"Val Town MCP\",\n url: \"https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp\",\n authorization_token: \"\",\n enabled: true,\n },\n];\n\nexport default function App() {\n const [config, setConfig] = useState({\n anthropicApiKey: \"\",\n mcpServers: DEFAULT_MCP_SERVERS,\n selectedModel: \"claude-3-5-sonnet-20241022\",\n });\n const [showSettings, setShowSettings] = useState(false);\n const [messages, setMessages] = useState([]);\n\n // Load config from localStorage on mount\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n const savedMcpServers = localStorage.getItem(\"mcp_servers\");\n const savedMessages = localStorage.getItem(\"chat_messages\");\n const savedModel = localStorage.getItem(\"selected_model\");\n\n setConfig({\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\n });\n\n // Load saved messages\n if (savedMessages) {\n try {\n const parsedMessages = JSON.parse(savedMessages);\n setMessages(parsedMessages);\n } catch (error) {\n console.error(\"Failed to load saved messages:\", error);\n }\n }\n\n // Show settings if no API key is configured\n if (!savedApiKey) {\n setShowSettings(true);\n }\n }, []);\n\n // Save config to localStorage when it changes\n useEffect(() => {\n if (config.anthropicApiKey) {\n localStorage.setItem(\"anthropic_api_key\", config.anthropicApiKey);\n }\n localStorage.setItem(\"mcp_servers\", JSON.stringify(config.mcpServers));\n localStorage.setItem(\"selected_model\", config.selectedModel);\n }, [config]);\n\n // Save messages to localStorage when they change\n useEffect(() => {\n localStorage.setItem(\"chat_messages\", JSON.stringify(messages));\n }, [messages]);\n\n const updateConfig = (newConfig: Partial) => {\n setConfig(prev => ({ ...prev, ...newConfig }));\n };\n\n const addMessage = (message: Omit) => {\n setMessages(prev => [...prev, { ...message, timestamp: Date.now() }]);\n };\n\n const clearMessages = () => {\n setMessages([]);\n };\n\n return (\n

\n setShowSettings(true)}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n

\n );\n}",[],[142,213,232],"4d427e7c-3cdd-11f0-832c-9e149126039e",["D",1748558163004],[169,170,171,172],[142,213],["D",1748558112658],[168,173,174,175],[142],"76aac4ae-3cdd-11f0-af5d-9e149126039e","index.ts",["D",1748558232476],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\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 static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main app\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[149,247],["D",1748558228747],[166],[149],["D",1748557815516],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":293,"_294":295,"_296":297,"_298":25,"_299":25,"_300":25,"_301":58,"_302":-5,"_303":-7,"_304":-7,"_305":62,"_306":25,"_307":25,"_308":-5,"_309":25,"_310":25,"_311":25,"_312":-5},"ENV",{"_264":265,"_266":267,"_268":86,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v50