Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,21 @@ The MCP servers in this demo highlight how each tool can light up widgets by com
- `pizzaz_server_node/` – MCP server implemented with the official TypeScript SDK.
- `pizzaz_server_python/` – Python MCP server that returns the Pizzaz widgets.
- `solar-system_server_python/` – Python MCP server for the 3D solar system widget.
- `kitchen_sink_server_node/` – Node MCP server for the kitchen-sink-lite widget.
- `kitchen_sink_server_python/` – Python MCP server for the kitchen-sink-lite widget.
- `build-all.mts` – Vite build orchestrator that produces hashed bundles for every widget entrypoint.

### Kitchen sink lite overview

The kitchen sink lite sample shows the full `window.openai` surface working together:

- Reads host state (`toolInput`, `toolOutput`, `displayMode`, `theme`, `widgetState`).
- Writes host state with `setWidgetState`.
- Calls another MCP tool from the widget with `callTool`.
- Uses host helpers like `requestDisplayMode`, `openExternal`, and `sendFollowUpMessage`.

Use it as a reference for how to wire UI to MCP tool responses and host APIs with the Apps SDK UI components.

## Prerequisites

- Node.js 18+
Expand Down Expand Up @@ -90,6 +103,7 @@ The repository ships several demo MCP servers that highlight different widget bu

- **Pizzaz (Node & Python)** – pizza-inspired collection of tools and components
- **Solar system (Python)** – 3D solar system viewer
- **Kitchen sink lite (Node & Python)** – minimal widget + server pairing that demonstrates tool output, widget state, `callTool`, and host helpers

### Pizzaz Node server

Expand All @@ -116,6 +130,21 @@ pip install -r solar-system_server_python/requirements.txt
uvicorn solar-system_server_python.main:app --port 8000
```

### Kitchen sink lite Node server

```bash
pnpm --filter kitchen-sink-mcp-node start
```

### Kitchen sink lite Python server

```bash
python -m venv .venv
source .venv/bin/activate
pip install -r kitchen_sink_server_python/requirements.txt
uvicorn kitchen_sink_server_python.main:app --port 8000
```

You can reuse the same virtual environment for all Python servers—install the dependencies once and run whichever entry point you need.

## Testing in ChatGPT
Expand Down
1 change: 1 addition & 0 deletions build-all.mts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const targets: string[] = [
"pizzaz-list",
"pizzaz-albums",
"pizzaz-shop",
"kitchen-sink-lite",
];
const builtNames: string[] = [];

Expand Down
26 changes: 26 additions & 0 deletions kitchen_sink_server_node/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
# Kitchen Sink Lite MCP server (Node)

TypeScript implementation of the minimal kitchen-sink widget server using the official Model Context Protocol SDK.

It exposes two tools:

- `kitchen-sink-show`: returns the widget template plus structured content for the initial render.
- `kitchen-sink-refresh`: lightweight echo tool so the widget can call back via `window.openai.callTool`.

Both tools return `_meta.openai/outputTemplate` pointing to `ui://widget/kitchen-sink-lite.html`.

## Prereqs

- Node 18+
- Static assets built (run `pnpm run build` from the repo root). The server loads `assets/kitchen-sink-lite*.html`.

## Install & run

```bash
pnpm install
pnpm --filter kitchen-sink-mcp-node start
# or, from this folder:
pnpm start
```

The server listens on `http://localhost:8000/mcp` (SSE) and `POST /mcp/messages` for messages. You can change the port with `PORT=9000 pnpm start`.
Loading