MCP App with Hono

What it does

MCP App with Hono is a minimal reference implementation that demonstrates how to build interactive MCP Apps using Hono deployed on Cloudflare Workers. It registers a get-time tool and a UI resource that renders a small frontend app, letting any MCP client display live tool results inside an embedded interface. The official MCP App examples use Express; this project shows the Hono-on-Workers alternative.

Key features

• Hono HTTP layer — lightweight, edge-native router replacing Express for MCP App hosting
• Cloudflare Workers deployment — global edge deploy with wrangler deploy in one command
• Streamable HTTP transport — /mcp endpoint with full MCP 2.0 streaming support
• Vite-bundled UI — frontend app compiled to a single file and served as an MCP ui:// resource
• get-time tool — live clock demo showing real-time tool → UI data flow

Installation

Self-hosted (Cloudflare Workers)

git clone https://github.com/yusukebe/mcp-app-with-hono
cd mcp-app-with-hono
npm install
npm run build
npm run deploy  # Deploys to your Cloudflare account

Claude Desktop (after deploying)

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "mcp-app-with-hono": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-worker.workers.dev/mcp"]
    }
  }
}

Local development

npm run build && npm run dev

Wrangler starts a local dev server at http://localhost:8787.

Supported hosts

No specific MCP client is explicitly confirmed in the README — works with any MCP client that supports Streamable HTTP transport.