• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
dcm31

dcm31

mcpChat

ChatGPT-style chat with MCP tools
Public
Like
mcpChat
Home
Code
4
README.md
db.ts
H
main.ts
ui.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
README.md

MCP Chat

A ChatGPT-style chat interface that connects to MCP (Model Context Protocol) servers, giving your AI access to external tools.

Features

  • 💬 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

Quick Start

  1. Add your OpenAI API key in Environment Variables:

    • Key: OPENAI_API_KEY
    • Value: Your OpenAI API key
  2. Open the app and click "New Chat"

  3. Add MCP servers via the settings (gear icon)

Adding MCP Servers

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

Example Servers

NameURLAuthDescription
dicehttps://dicemcp.val.run-Roll dice, flip coins
fatebookhttps://fatebookmcp.val.runFATEBOOK_API_KEYTrack predictions

To use the fatebook server:

  1. Get an API key from fatebook.io/api-setup
  2. Add FATEBOOK_API_KEY to your environment variables
  3. Add the server with auth env key FATEBOOK_API_KEY

Authentication

For MCP servers that require authentication:

  1. Add the API key as an environment variable (e.g., MY_SERVICE_KEY)
  2. When adding the server, enter MY_SERVICE_KEY in the "Auth env key" field
  3. The app will automatically add Authorization: Bearer <value> to requests

Building Your Own MCP Server

See dcm31/mcp-dice for a minimal example of building MCP servers that work with this chat client.

Files

  • main.ts - HTTP handler and API routes
  • db.ts - SQLite database operations
  • ui.tsx - React-style UI components
Code
README.mddb.ts
H
main.ts
ui.tsx
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.