Skip to main content
The Waniwani SDK skill ships with guided commands (playbooks) that walk your AI agent through common tasks step by step. After installing the skill, invoke them as slash commands in Claude Code, Cursor, or any compatible agent.

​
initialize

Scaffold a new MCP distribution project from the Waniwani template. The agent interactively gathers your brand, use case, and data source, then generates a production-ready flow with widgets.
What it does:
  1. Gathers context — asks for your website URL, use case (quote flow, booking, lead qualification, etc.), data source (real API or mock), and customer profile.
  2. Extracts branding — visits your website in the background to pull colors, logo, fonts, and tone.
  3. Presents a plan — shows the proposed flow structure, widgets, and data approach for your approval.
  4. Scaffolds the project — updates package.json, sets up .env, installs dependencies.
  5. Removes demo content — clears the reference implementation (Alpine ski lessons) so you start clean.
  6. Generates flow + widgets — creates the flow file with state, nodes, edges, and widget components styled to your brand.
  7. Wires everything up — registers tools, widgets, and tracking in the server entry point.
  8. Tests — builds and starts the dev server so you can walk through the flow immediately.
Best for: Starting a brand-new MCP project from scratch.

​
create-flow

Build a multi-step conversational flow from scratch in an existing project. The agent designs the state schema, node graph, and edges based on your description.
What it does:
  1. Checks prerequisites — verifies @waniwani/sdk is installed, WANIWANI_API_KEY is set, and a client singleton exists. Fixes anything missing.
  2. Understands your goal — asks you to describe the flow in one sentence (lead qualification, onboarding, quote/pricing, support triage, survey, etc.).
  3. Designs the state — creates a Zod schema with .describe() on every field so the AI knows what each piece of data is for.
  4. Designs the nodes — maps each step to an interrupt node (asks questions), action node (silent computation), or widget node (shows UI).
  5. Designs the edges — connects nodes sequentially and adds conditional edges for branching logic.
  6. Generates the flow file — writes the complete flow with createFlow, START/END edges, and .compile().
  7. Registers the flow — wires it into your MCP server route with registerTools.
  8. Tests — starts the dev server and walks you through triggering and completing the flow.
Best for: Adding a new flow to an existing MCP project.

​
tunnel

Start your local MCP dev server and expose it via a public tunnel so remote clients (ChatGPT, Claude, etc.) can reach it.
What it does:
  1. Finds the dev command — reads your package.json for the dev script.
  2. Starts the server — runs the dev command in the background and detects the port.
  3. Picks a tunnel provider — checks for cloudflared (preferred, no account needed) or ngrok. If neither is installed, provides installation instructions.
  4. Opens the tunnel — starts the tunnel and prints both the local and public URLs.
Output example:
Best for: Testing your local MCP server with remote AI clients without deploying.