dcm31
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