mcp-client

A lightweight chat UI for talking to OpenAI models with MCP tool use. Point it at any MCP server URL, ask a question, and the model discovers and calls tools on its own via the Responses API.

Built on Val Town with Hono. No build step, no framework — just server-rendered HTML and vanilla JS.

Features

  • Plug in any MCP server — add/remove server URLs in the sidebar. Ships with a dice roller as a starter.
  • Tool call inspector — click any tool call to expand arguments and output.
  • Multiple threads — conversations persist in localStorage.
  • Model picker — gpt-5.2, gpt-5-mini, gpt-5-nano, gpt-4.1, gpt-4.1-mini, gpt-4.1-nano, o4-mini.

Setup

  1. Fork this val
  2. Set OPENAI_API_KEY in your val's environment variables
  3. Open the endpoint URL

Project structure

index.tsx          Hono HTTP entrypoint — serves HTML + routes
api/
  chat.ts          POST /api/chat — sends messages + MCP tools to OpenAI
ui/
  Layout.tsx       HTML shell
  Sidebar.tsx      Thread list, MCP server manager, model picker
  ChatArea.tsx     Message area + input bar
  client.ts        Client-side JS (threads, MCP config, send loop)
  styles.ts        CSS

Environment variables

KeyRequiredDescription
OPENAI_API_KEYYour OpenAI API key. Server-side only — never sent to the browser.