mcpChat
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Viewing readonly version of main branch: v4View latest version
A ChatGPT-style chat interface that connects to MCP (Model Context Protocol) servers, giving your AI access to external tools.
- 💬 Multiple chat conversations with auto-generated titles
- 🔧 Add/remove MCP servers via the settings UI
- 📱 Mobile-optimized responsive design
- 🔐 Support for authenticated MCP servers via environment variables
-
Add your OpenAI API key in Environment Variables:
- Key:
OPENAI_API_KEY - Value: Your OpenAI API key
- Key:
-
Open the app and click "New Chat"
-
Add MCP servers via the settings (gear icon):
- Example: Add the dice server at
https://dcm31--6990ba5cd2e311f0adc442dde27851f2.web.val.run
- Example: Add the dice server at
Click the settings button at the bottom of the sidebar to manage MCP servers.
Each server needs:
- Name: A label for the server (e.g., "dice")
- URL: The server's HTTP endpoint
- Auth env key (optional): Name of an environment variable containing the auth token
| Name | URL | Description |
|---|---|---|
| dice | https://dcm31--6990ba5cd2e311f0adc442dde27851f2.web.val.run | Roll dice, flip coins |
| valtown | https://mcp.val.town/mcp | Val Town operations (needs VALTOWN_API_KEY) |
For MCP servers that require authentication:
- Add the API key as an environment variable (e.g.,
MY_SERVICE_KEY) - When adding the server, enter
MY_SERVICE_KEYin the "Auth env key" field - The app will automatically add
Authorization: Bearer <value>to requests
See dcm31/diceMcp for a minimal example of building MCP servers that work with this chat client.
main.ts- HTTP handler and API routesdb.ts- SQLite database operationsui.tsx- React-style UI components