Local Development

Test your widgets in real AI hosts as you build. PancakeJS gives you a local development server with hot reload that works directly with ChatGPT, Claude, and other platforms.

Start the Dev Server

pnpm dev

This starts a local server (default: http://localhost:3000) with hot module reloading.

Get a Public URL

To test in ChatGPT or other external AI hosts, you need a public URL. Use a tunnel service:

Using ngrok

# Install ngrok if you haven't
brew install ngrok

# Start a tunnel to your local server
ngrok http 3000

This gives you a public URL like https://abc123.ngrok.io.

Using Cloudflare Tunnel

# Install cloudflared if you haven't
brew install cloudflared

# Start a tunnel
cloudflared tunnel --url http://localhost:3000

Connect to ChatGPT

1. Go to ChatGPT
2. Open a Custom GPT or use the API
3. Add your tunnel URL as the action endpoint
4. Your widget will now render live in ChatGPT

Connect to Claude

For Claude Desktop with MCP:

1. Open your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json)
2. Add your local server:

{
  "mcpServers": {
    "my-app": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:3000/mcp"]
    }
  }
}

3. Restart Claude Desktop
4. Your tools and widgets are now available

Use the Inspector

PancakeJS includes a built-in inspector for testing without external hosts:

http://localhost:3000/_inspector

The inspector lets you:

• Test all your tools
• Preview widget rendering
• See request/response payloads
• Debug issues quickly

Hot Reload in Action

The dev server watches for file changes and:

1. Recompiles your widgets instantly
2. Notifies connected clients
3. Updates the UI without a full refresh

This means you can edit your React components and see them update live in ChatGPT or Claude within milliseconds.

Troubleshooting

Port already in use

# Find what's using port 3000
lsof -i :3000

# Or use a different port
PORT=3001 pnpm dev

Tunnel not working

Make sure your firewall allows the connection. If using ngrok, check your dashboard for any blocked requests.

Widget not updating

1. Check the terminal for compilation errors
2. Hard refresh the AI host (Cmd+Shift+R)
3. Check the browser console for errors

Next Steps

• Building Widgets: Create interactive components
• Deploy to Production: Ship your app
• Troubleshooting: Common issues and fixes