MCP server with an interactive dinosaur dashboard (MCP Apps UI). No API keys required.
io.github.shennawardana23/mcp-dino MCP Server
This MCP server (io.github.shennawardana23/mcp-dino) provides an interactive dinosaur dashboard using an MCP Apps UI. The setup is described as requiring no API keys. It is implemented in Go and includes an HTML dashboard UI.
๐ ๏ธ Key Features
MCP server for a dinosaur dashboard
Interactive HTML dashboard UI (MCP Apps UI)
Written in Go
No API keys required
๐ Use Cases
Viewing and interacting with a dinosaur dashboard through MCP Apps UI
Testing MCP client/server interactions with an example UI-based server
โก Developer Benefits
Includes an HTML dashboard interface for interactive development workflows
Uses Go implementation for server-side customization
โ ๏ธ Limitations
Limited information provided beyond the dashboard UI, Go implementation, and โno API keys requiredโ claim
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
stdio + Streamable HTTP
Works in Claude Desktop AND web browsers
MCP Apps
@modelcontextprotocol/ext-appsApp class
Interactive HTML UIs in Claude Desktop iframes
Tools
dino_think, dino_ask, dino_dashboard
Typed Go handlers, structured JSON results
Resources
//go:embed HTML โ text/html;profile=mcp-app
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
bash
# 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
Expected output โ click to expand
code
=== 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:#fff
Data flows through three pipes:
Pipe
Protocol
Client
Use case
MCP Tools
JSON-RPC over stdio
Claude Desktop
Text tools (dino_think, dino_ask)
MCP Apps
JSON-RPC over stdio + postMessage
Claude Desktop iframe
Interactive UI (dino_dashboard)
Standalone
HTTP GET
Browser
Direct access (/dashboard, /api/dinosaurs)
โจ Features
MCP Standards Compliance
Feature
Status
Notes
Tools (tools/list, tools/call)
โ Complete
3 typed tools with structured JSON responses
Resources (resources/list, resources/read)
โ Complete
//go:embed HTML served at ui:// URIs
MCP Apps protocol
โ Complete
_meta.ui.resourceUri + ui/initialize handshake
stdio transport
โ
Claude Desktop, Cursor, Copilot
Streamable HTTP
โ
MCP Inspector, curl, browser, tunnel
SSE transport
โ Removed
Deprecated in MCP spec v2025-11-25
Developer Experience
3-second build cycle โ make build-fast && make dev-http
7 integration tests โ make test exercises every protocol method
Interactive debugging โ make test-inspector launches MCP Inspector
Remote testing โ make run-tunnel creates a public trycloudflare.com URL
No API keys โ all dinosaur data is built into the binary
Zero runtime deps โ single static binary with embedded HTML
Interactive Dashboard
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
code
Show me the dinosaur dashboard with carnivores
โ Claude detects the MCP App โ renders an iframe โ you see filterable dinosaur cards
In your browser
bash
open http://localhost:9010/dashboard
โ Standalone HTML with all dinosaur data fetched from the built-in REST API
With MCP Inspector
bash
make test-inspector
โ Opens http://localhost:5173 โ connects to http://localhost:9010/mcp
dino_ask currently 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:
json
{"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:
json
{"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:
# 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 artifacts
Project Structure
code
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.