🍕 MCP Workshop – Build a Pizza Ordering AI Agent

A hands-on 2-hour workshop for intermediate developers: build a real MCP server from scratch and order pizza via an LLM assistant.

🧠 What You'll Learn

• What MCP (Model Context Protocol) is and why it matters
• How to build an MCP server with the official TypeScript SDK
• How to expose tools to Claude Desktop via stdio transport
• How to serve an MCP server over HTTP with ngrok
• How to add interactive UI with the MCP Apps extension (ext-apps)

🗂️ Repo Structure

mcp-workshop/
├── sdk-pizza/        # Step 1 – MCP server using @modelcontextprotocol/sdk (stdio)
├── fastmcp-pizza/    # Bonus – same server built with FastMCP (less boilerplate)
└── apps-pizza/       # Step 2 – HTTP server with interactive pizza order UI (MCP Apps)

✅ Prerequisites

Make sure you have these installed before the workshop:

Verify your setup:

node --version
ngrok --version

🚀 Workshop Steps

Step 1 – stdio MCP Server (plain text)

The simplest MCP server: runs as a local process, communicates via stdin/stdout.

cd sdk-pizza
npm install

Test with MCP Inspector:

npx @modelcontextprotocol/inspector npx tsx index.ts

Connect to Claude Desktop – add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "sdk-pizza": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/sdk-pizza/index.ts"]
    }
  }
}

Available tools:

• get_menu – returns the Domino's pizza menu
• place_order – places an order (pizza_id, customer_name, address)

Try it in Claude:

"Show me the pizza menu and order a Margherita for John Doe at 123 Main St"

Bonus – FastMCP variant

Same functionality, less boilerplate using FastMCP:

cd fastmcp-pizza
npm install
npx @modelcontextprotocol/inspector npx tsx index.ts

Step 2 – HTTP + MCP Apps (interactive UI)

Serves the MCP server over HTTP and renders an interactive order form inside Claude using the ext-apps extension.

cd apps-pizza
npm install
npm run build        # builds the mcp-app.html UI
npx tsx index.ts     # starts server on http://localhost:3001

Expose via ngrok:

ngrok http 3001

⚠️ Important: Claude Desktop does not support remote MCP servers via claude_desktop_config.json. Add the ngrok URL through the Claude UI (Settings → Integrations).

Available tools:

• order_pizza – opens the interactive order form UI
• place_order – submits the order programmatically

🔧 Claude Desktop Config Reference

{
  "mcpServers": {
    "sdk-pizza": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/sdk-pizza/index.ts"]
    },
    "fastmcp-pizza": {
      "command": "npx",
      "args": ["tsx", "/absolute/path/to/fastmcp-pizza/index.ts"]
    }
  }
}

Remote HTTP servers (apps-pizza) must be added via the Claude Desktop UI, not the config file.

🧩 Tech Stack

• @modelcontextprotocol/sdk – official MCP TypeScript SDK
• @modelcontextprotocol/ext-apps – MCP Apps extension for interactive UI
• fastmcp – high-level MCP server framework
• zod – schema validation for tool inputs
• express + ngrok – HTTP transport layer

📚 Resources

• MCP Specification
• MCP SDK on GitHub
• MCP Inspector
• FastMCP
• Building with MCP + LLMs

👨‍💻 Author

Stepan Suvorov – Google Developer Expert in Angular, conference speaker, MCP enthusiast
🐦 @stevermeister · 💼 LinkedIn · 🐙 GitHub