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: v5View 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)
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 | Auth | Description |
|---|---|---|---|
| dice | https://dcm31--6990ba5cd2e311f0adc442dde27851f2.web.val.run | - | Roll dice, flip coins |
| fatebook | https://dcm31--316d933cd31711f0ac8c42dde27851f2.web.val.run | FATEBOOK_API_KEY | Prediction tracking (get key) |
For MCP servers that require authentication:
- Add the API key as an environment variable (e.g.,
FATEBOOK_API_KEY) - When adding the server, enter
FATEBOOK_API_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