Pizzaz
A pizza shop finder that shows off the Widget SDK
The Pizzaz template is a pizza shop finder built to demonstrate widgets: an interactive map, a filterable list, and a shop detail view that adapt to theme, display mode, and available height. There's no authentication, so you can focus on the UI.
What's included
Map widget
show_pizza_map shows every shop on a Mapbox map.
List widget
show_pizza_list shows a grid or list with sorting and filters.
Shop widget
show_pizza_shop shows one shop's details and actions.
Create the project
Scaffold the template in your language:
npx @nitrostack/cli init my-pizzaz --template typescript-pizzaz
cd my-pizzaz
npm run devTo use your own Mapbox account, set NEXT_PUBLIC_MAPBOX_TOKEN in .env.
nitrostack-py init pizzaz --template python-pizzazPizza shop finder with list/map/shop widgets under widgets/out/. For open shops only, call show_pizza_list with {"openNow": true} or show_pizza_map with {"filter": "open_now"}; omitting those fields returns every shop, including closed ones.
To test in MCP Inspector, use HTTP + stateless with auth off and NITROSTACK_APP_MODE=universal.
Widget SDK features it uses
Theme and layout
useTheme, useMaxHeight, and useDisplayMode adapt the UI to the client.
State and links
useWidgetState keeps favorites across reloads; openExternal opens links.
Project structure
The files that matter:
src/
├── modules/pizzaz/
│ ├── pizzaz.tools.ts # show_pizza_map, show_pizza_list, show_pizza_shop
│ ├── pizzaz.service.ts # Filtering and lookup
│ └── pizzaz.data.ts # Shop data: edit to add shops
└── widgets/app/
├── pizza-map/
├── pizza-list/
└── pizza-shop/Try it
Ask your AI client things like these:
| Ask | What happens |
|---|---|
| "Show me pizza shops on a map" | show_pizza_map opens the map widget. |
| "List all pizza shops" | show_pizza_list opens the list with sorting and filters. |
| "Show me details for Tony's Pizza" | show_pizza_shop opens the shop widget. |
Widgets build to HTML files in src/widgets/out/ and work the same in ChatGPT.