dino-mcp
๐ Table of Contents
๐ฆ What โ and Why
dino-mcp is a reference implementation of the Model Context Protocol (MCP) in Go that demonstrates every layer of the modern MCP stack:
Layer | Implementation | Why it matters |
Transport |
| Works in Claude Desktop AND web browsers |
MCP Apps |
| Interactive HTML UIs in Claude Desktop iframes |
Tools |
| Typed Go handlers, structured JSON results |
Resources |
| Self-contained ~11MB binary, zero deps at runtime |
Whether you're building an MCP server from scratch, learning the MCP Apps protocol, or need a Go โ Gin โ ext-apps SDK integration blueprint, this project has you covered.
โก Quick Start
# Clone & enter
git clone https://github.com/shennawardana23/mcp-dino.git && cd mcp-dino
# Build & run in one shot (โ2 seconds)
make build-fast && make dev-http
# Open the standalone dashboard
open http://localhost:9010/dashboard=== dino-mcp server ===
Transport: http
Listening on :9010
[GIN] 2026/06/21 - 12:30:00 | 200 | 4.2ms | ::1 | GET "/dashboard"
[GIN] 2026/06/21 - 12:30:01 | 200 | 2.1ms | ::1 | GET "/api/dinosaurs"๐ Architecture at a Glance
flowchart TB
subgraph CLI["CLI Layer"]
STDIO["stdio subcommand"]
HTTP["http subcommand"]
end
subgraph SERVER["Server (internal/server/)"]
GIN["Gin Router :9010"]
MCPH["MCP StreamableHTTPHandler"]
CORS["CORS Middleware"]
TOOLS["Tools: think ยท ask ยท dashboard"]
RES["Resources: //go:embed HTML"]
end
subgraph UI["View (ui/src/)"]
APP["ext-apps App class"]
POST["postMessage protocol"]
end
subgraph FALLBACK["Standalone Fallback"]
DASH["/dashboard (HTML)"]
API["/api/dinosaurs (JSON)"]
end
CLI --> GIN
GIN --> CORS
CORS --> MCPH
MCPH --> TOOLS
TOOLS --> RES
RES --> APP
APP --> POST
MCPH -.->|"MCP Apps"| APP
GIN -.->|"direct route"| DASH
GIN -.->|"direct route"| API
style CLI fill:#1a1a2e,color:#e0e0e0,stroke:#2d2a44
style SERVER fill:#1a1a2e,color:#e0e0e0,stroke:#2d2a44
style UI fill:#1a1a2e,color:#e0e0e0,stroke:#2d2a44
style FALLBACK fill:#1a1a2e,color:#e0e0e0,stroke:#2d2a44
style STDIO fill:#2d2a44,color:#a78bfa
style HTTP fill:#2d2a44,color:#a78bfa
style GIN fill:#0099e5,color:#fff
style MCPH fill:#a78bfa,color:#fff
style TOOLS fill:#22c55e,color:#fff
style RES fill:#22c55e,color:#fff
style APP fill:#facc15,color:#000
style POST fill:#facc15,color:#000
style DASH fill:#f87171,color:#fff
style API fill:#f87171,color:#fffData flows through three pipes:
Pipe | Protocol | Client | Use case |
MCP Tools | JSON-RPC over stdio | Claude Desktop | Text tools ( |
MCP Apps | JSON-RPC over stdio + postMessage | Claude Desktop iframe | Interactive UI ( |
Standalone | HTTP GET | Browser | Direct access ( |
โจ Features
Feature | Status | Notes |
Tools ( | โ Complete | 3 typed tools with structured JSON responses |
Resources ( | โ Complete |
|
MCP Apps protocol | โ Complete |
|
stdio transport | โ | Claude Desktop, Cursor, Copilot |
Streamable HTTP | โ | MCP Inspector, curl, browser, tunnel |
SSE transport | โ Removed | Deprecated in MCP spec v2025-11-25 |
3-second build cycle โ
make build-fast && make dev-http7 integration tests โ
make testexercises every protocol methodInteractive debugging โ
make test-inspectorlaunches MCP InspectorRemote testing โ
make run-tunnelcreates a publictrycloudflare.comURLNo API keys โ all dinosaur data is built into the binary
Zero runtime deps โ single static binary with embedded HTML
The dino_dashboard tool renders an HTML card grid inside Claude Desktop's iframe:
Filter by diet โ Carnivore, Herbivore, or show All
Filter by period โ Triassic, Jurassic, Cretaceous
12 dinosaur species โ from T-Rex to Velociraptor
Fallback mode โ open directly at
http://localhost:9010/dashboard
Note: the filter is applied server-side at the time the tool is called. Once opened with a specific filter, the in-app filter buttons can only narrow further within that same result set โ they can't widen back out to species the initial call excluded.
The HTML view is built with the official @modelcontextprotocol/ext-apps SDK and communicates via JSON-RPC over postMessage.
๐ฎ Try It
In Claude Desktop
Show me the dinosaur dashboard with carnivoresโ Claude detects the MCP App โ renders an iframe โ you see filterable dinosaur cards
In your browser
open http://localhost:9010/dashboardโ Standalone HTML with all dinosaur data fetched from the built-in REST API
With MCP Inspector
make test-inspectorโ Opens http://localhost:5173 โ connects to http://localhost:9010/mcp
Via curl
# Initialize
curl -s -X POST http://localhost:9010/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-06-18","capabilities":{},"clientInfo":{"name":"curl","version":"1.0"}}}' \
| python3 -m json.tool
# List tools
SID="<session-id-from-above>"
curl -s -X POST http://localhost:9010/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-H "Mcp-Session-Id: $SID" \
-d '{"jsonrpc":"2.0","id":2,"method":"tools/list"}' \
| python3 -m json.tool
# Call dino_think
curl -s -X POST http://localhost:9010/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-H "Mcp-Session-Id: $SID" \
-d '{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"dino_think","arguments":{}}}' \
| python3 -m json.tool๐ง Tool Reference
Tool | Type | Input | Output | Example Prompt |
| Text |
| Random fact + species JSON | "Tell me a dinosaur fact" |
| Text |
| Answer + question JSON | "What did T-Rex eat?" |
| MCP App |
| HTML iframe + JSON data | "Show me carnivore dinosaurs" |
dino_askcurrently returns the same general dinosaur-era overview regardless of the question asked โ it doesn't yet branch on the question text. Tracked as a known limitation.
Example dino_think response:
{
"content": [
{ "type": "text", "text": "๐ฆ Did you know? The Velociraptor was only about the size of a turkey!" }
],
"structuredContent": {
"fact": "The Velociraptor was only about the size of a turkey",
"species": "Velociraptor"
}
}Example dino_dashboard response:
{
"content": [
{ "type": "text", "text": "Displaying dinosaur dashboard with 4 dinosaurs (filter: Carnivore)" }
],
"structuredContent": {
"filter": "Carnivore",
"dinosaurs": [
{
"name": "Tyrannosaurus Rex",
"period": "Cretaceous",
"diet": "Carnivore",
"length": "40 ft (12 m)",
"weight": "9 tons (8,000 kg)",
"funFact": "T-Rex had the strongest bite of any land animal ever",
"imageStyle": "bg-red-900"
}
],
"timestamp": "2026-06-21T12:00:00Z"
}
}๐ฌ Claude Desktop Integration
CLI Mode (stdin/stdout)
Locate the binary and add to your claude_desktop_config.json:
{
"mcpServers": {
"dino-mcp": {
"command": "/absolute/path/to/mcp-dino/bin/dino-mcp",
"args": ["stdio"]
}
}
}After saving, restart Claude Desktop. You'll see hammer icons (๐จ) on tools when chatting โ click to invoke directly, or let Claude decide.
HTTP Mode (for debugging)
make dev-http
# Server starts on :9010๐ Development
Prerequisites
Tool | Version | Purpose |
โฅ 1.25 | Server binary | |
โฅ 18 | UI build (Vite) | |
any | Tunnel for remote testing |
Commands
# Build โ three options
make build # Full: Vite UI + Go binary
make build-fast # Quick: Go binary only (reuses existing UI)
make build-ui # Vite UI only
# Run
make dev-http # HTTP mode with verbose logging
make run-stdio # stdio mode for Claude Desktop
make run-tunnel # HTTP + Cloudflare Tunnel
# Test & verify
make test # 7 integration tests โ all must pass
make test-inspector # Launch MCP Inspector in browser
make lint # go vet + go fmt
# Utility
make help # All targets with descriptions
make clean # Remove all build artifactsProject Structure
mcp-dino/
โโโ bin/ # Go build output (~11MB static binary)
โโโ cmd/dino-mcp/main.go # CLI entry point (stdio | http | help)
โโโ internal/
โ โโโ server/
โ โ โโโ server.go # Composition root: mcp.Server + Gin + CORS
โ โโโ tools/
โ โ โโโ tools.go # Shared types, constants, helpers
โ โ โโโ think.go # RegisterThink (dino_think tool)
โ โ โโโ ask.go # RegisterAsk (dino_ask tool)
โ โ โโโ dashboard.go # RegisterDashboardTool + 12 dino species + REST API
โ โโโ resources/
โ โโโ dashboard.go # RegisterDashboardResource + //go:embed HTML
โ โโโ dashboard_ui.html # Vite-built HTML (354KB)
โโโ ui/
โ โโโ src/
โ โโโ mcp-app.ts # ext-apps App class + postMessage
โโโ docs/ # Diรกtaxis documentation (see below)
โโโ test_mcp.sh # 7 integration tests
โโโ AGENTS.md # AI agent instructions (canonical)
โโโ ARCHITECTURE.md # C4 diagrams + sequence flows
โโโ TECH_DESIGN.md # Interface contracts + data model
โโโ Makefile # All targets
โโโ go.mod + go.sum # Go dependencies
โโโ README.md # โ you are here๐บ Documentation Map
dino-mcp uses the Diรกtaxis framework โ four documentation modes, each serving a different need.
For this audience | Start here | Audience |
๐ New to the project | Everyone | |
๐งโ๐ป Adding a tool | Developers | |
๐ฆ Adding a dinosaur | Content editors | |
๐งช Testing with Inspector | QA / Developers | |
๐ Reference needed | Operators | |
๐ Understanding design | Architects | |
๐ค Implementing via AI | AI coding agents | |
๐ Deep architecture | Senior engineers | |
๐ Technical specs | Implementation teams | |
โณ Development history | All contributors | |
๐ Roadmap | Stakeholders | |
โ๏ธ Design trade-offs | Architects | |
๐ฏ Skills reference | Developers / AI agents | |
๐ค How to contribute | Contributors | |
๐ Code of conduct | Community | |
๐ ADRs | Decision historians | |
๐ค LLM full context | AI agents (RAG) |
๐ Project Status
MVP โโ Production โโ Enhanced UI โโ Ecosystem โโ Advanced
โ โ โ โPhase | Status | Highlights |
MVP | โ Complete | 3 tools, MCP Apps UI, 7 tests, docs |
Production | ๐ In progress | Go unit tests, CI, rate limiting, Docker |
Enhanced UI | ๐ Planned | Real-time data, comparison, timeline |
Ecosystem | ๐ Planned | Homebrew, GitHub releases, MCP Registry |
Advanced | ๐ญ Future | Streaming tool inputs, WebSocket sync |
Build Metrics
Metric | Value |
Binary size | ~11 MB (compressed) |
Binary type | Mach-O 64-bit arm64 |
Go version | 1.25 |
MCP SDK version | v1.7.0 |
Dependencies | 30+ Go modules (all indirect) |
UI bundle | 354 KB embedded HTML (single-file Vite) |
Test coverage | 7/7 integration tests passing (shell-based; no Go unit tests yet) |
๐ Further Reading
Resource | Link |
MCP Specification | |
MCP Go SDK | |
MCP Apps Protocol | |
ext-apps SDK | |
Gin Web Framework | |
Go Programming Language |