MCP Server Live Demo
The Model Context Protocol made visible — every JSON-RPC message in real time
5 real tools with JSON Schema
Real-time protocol trace
Multi-step tool chaining
JSON-RPC 2.0 compliant
01The Problem
The Model Context Protocol is increasingly central to enterprise AI (Clio's job description explicitly mentions MCP server configuration). But most MCP demonstrations are black boxes — you see the AI use tools, but you don't see the protocol messages that make it work. I wanted to build a demo that makes the full protocol transparent: the initialize handshake, the tool discovery, every tool call and response, the token cost of each round.
02The Approach
Built a Next.js app with a two-panel layout: chat on the left, live protocol trace on the right. The backend implements the MCP protocol flow (initialize → tools/list → tools/call loop) and streams JSON-encoded events to the frontend as they happen. Every protocol message — with full request/response bodies — appears in the trace panel in real time, with expandable details and execution timing.
03Architecture Decisions
Streaming event protocol
The chat API route streams a custom line-delimited JSON event format: trace events (MCP protocol messages) and text chunks (assistant response) are multiplexed on the same stream. The client parses each line and routes to either the chat display or the protocol trace panel. This lets the protocol trace update in real time while the assistant's response is still generating.
5 real, typed tools
Five purpose-built tools: get_current_datetime (real UTC time), search_knowledge_base (searches a curated knowledge base about Harrison's background), calculate (safe expression evaluator), analyze_text (heuristic sentiment analysis), get_protocol_info (MCP reference documentation). Each has a precise JSON Schema definition — the description quality directly determines when Claude uses the tool correctly.
Multi-step tool chaining
The agentic loop handles arbitrary tool call chains: Claude decides whether to call another tool or produce a final answer after each tool result. A question like 'What is today's date and what's the midpoint salary between 149K and 202K?' triggers two sequential tool calls — the loop handles this naturally without pre-programming the chain.
Protocol fidelity
The demo implements the actual MCP JSON-RPC 2.0 message structure: initialize with protocolVersion 2024-11-05, tools/list with full JSON Schema tool definitions, tools/call with typed arguments and isError response. The trace panel shows the complete request/response bodies at the initialize and tools/list phases, making the protocol learnable.
04Key Insight
Tool description quality is the primary determinant of agentic behavior quality. A tool called 'calculator' with description 'does math' gets called for anything vaguely numeric. A tool called 'calculate' with description 'evaluates mathematical expressions; use when exact arithmetic is needed rather than approximate reasoning' gets called precisely and appropriately. Writing good tool descriptions is a prompt engineering skill that most teams learn the hard way.
05Why It Matters
The most technically transparent demo in the portfolio. Shows the complete MCP tool use loop in a way that's educational, directly relevant to Clio's stated requirements, and visually compelling. The two-panel layout is the right metaphor: what you see in chat and what's happening in the protocol are always visible together.