FoodDash

A food ordering MCP App that demonstrates key MCP Apps SDK patterns. Browse restaurants, view menus, add items to cart, and place orders — all within an MCP host.

Getting Started

bun install
bun run dev

The server starts at http://localhost:3001/mcp.

Scripts

Command	Description
`bun run dev`	Start dev server with hot reload (web + server watch)
`bun run build`	Production build (typecheck → web → server bundle)
`bun run start`	Run the built server in production mode
`bun run typecheck`	Type-check only
`bun run build:web`	Build web assets only
`bun run build:server`	Bundle server entry only
`bun run dev:server`	Watch and restart server

MCP Apps Concepts Demonstrated

This app is designed as a learning reference. Each concept is documented with inline comments in the source code.

Tool Visibility

Two kinds of tools share one UI:

Tool	Visibility	Purpose
`order-food`	Model + App	Model calls this when user says "order food". Opens the UI.
`get-order-summary`	Model + App	Model calls this when user asks "where's my food?". Same UI.
`get-menu`	App only	UI calls this when user taps a restaurant. Model never sees it.
`place-order`	App only	UI calls this when user clicks "Place Order".
`get-order-status`	App only	UI polls this every 10s for live order tracking.
`apply-promo`	App only	UI calls this when user applies a promo code.

Why it matters: Model-visible tools give the LLM a clean, high-level interface ("order food", "check order status"). App-only tools handle granular CRUD that shouldn't clutter the model's tool list.

Lifecycle Hooks (mcp-app.tsx)

Hook	When it fires	What FoodDash does
`ontoolinput`	Tool invoked, BEFORE server responds	Pre-sets cuisine filter from model's `cuisine` argument
`ontoolresult`	AFTER server returns	Loads restaurant list or order data into state
`ontoolcancelled`	Host cancels a tool call	Resets loading spinners
`onteardown`	Host is closing the app	Returns order summary or abandoned cart info to the model
`onhostcontextchanged`	Host theme/viewport changes	Updates safe area insets

Structured Content

Every tool result carries two payloads:

content[] — text the model reads in its conversation
structuredContent — JSON the app UI parses to render

They can carry different levels of detail. See server.ts for examples.

Shared Resource URI

Both order-food and get-order-summary point to the same resourceUri. The host renders one UI instance and routes different tool results to it. The app distinguishes them by the shape of structuredContent.

App → Server Communication

The app calls server tools via app.callServerTool(). This is the reverse of the model calling tools — the app initiates calls for app-only operations like fetching menus and placing orders.

Features

Browse 5 restaurants with ratings, hours, delivery info, and feature tags
Search, filter by cuisine, and sort by rating/delivery time/fee
Menu items with dietary labels, calorie counts, and popularity badges
Dietary filter pills on the menu view
Cart with quantity controls, special instructions, and promo codes
Promo codes: WELCOME10 (10% off), FREEDEL (free delivery), SAVE5 ($5 off)
Live order tracking with auto-advancing status (confirmed → preparing → on the way → delivered)
Light and dark mode support

Project Structure

server.ts                  MCP server, tools, and mock data
main.ts                    Express entry point (HTTP + stdio)
src/
  mcp-app.tsx              React entry point + lifecycle hooks
  types.ts                 Shared TypeScript interfaces
  constants.ts             Dietary labels, order steps, sort options
  global.css               Design tokens and animations
  hooks/
    useAppState.ts         Central state management + server tool calls
  components/
    Header.tsx             Sticky header with back button and cart badge
    DeliveryAddressBar.tsx Address input
    RestaurantsView.tsx    Restaurant list with search/filter/sort
    RestaurantCard.tsx     Restaurant card
    SortDropdown.tsx       Sort selector
    RestaurantBanner.tsx   Restaurant detail header in menu view
    MenuView.tsx           Menu with dietary filters and categorized items
    MenuItemCard.tsx       Menu item with dietary badges and calories
    DietaryBadge.tsx       Dietary label pill
    CartView.tsx           Cart, promo code, special instructions, summary
    QuantityControl.tsx    +/- quantity buttons
    OrderTrackingView.tsx  Live order tracking with progress stepper
    ProgressStepper.tsx    4-step horizontal progress indicator
    EmptyState.tsx         Empty state placeholder

FoodDash

FoodDash

Getting Started

Scripts

MCP Apps Concepts Demonstrated

Tool Visibility

Lifecycle Hooks (mcp-app.tsx)

Structured Content

Shared Resource URI

App → Server Communication

Features

Project Structure

Reviews