[Template] ChatGPT Apps starter kit (Vite + React + HMR)

GitHub: https://github.com/alpic-ai/apps-sdk-template

OpenAI's ChatGPT Apps SDK lets you build interactive widgets that render inside ChatGPT using MCP. The initial template released a few weeks ago worked more or less, but the dev experience was rough. Every widget change required rebuilding the entire pipeline to get fresh assets.

That’s why built a starter template with HMR and a Skybridge framework to simplify the entire workflow:

What it includes:

• Vite dev server with HMR running alongside your MCP Express server (one process, instant widget reload in ChatGPT)
• Skybridge framework with file-based conventions that automatically map MCP widget endpoints to React components (name your endpoint pokemon-card, create web/src/widgets/pokemon-card.tsx, done)
• One-click deploy to Alpic with bundling, hosting, and MCP analytics included, or to the platform of your choice No lock-in - built on the official @modelcontextprotocol/sdk

Quick start:

bash
git clone https://github.com/alpic-ai/apps-sdk-template
cd apps-sdk-template
pnpm install && pnpm dev
ngrok http 3000

Add https://your-url.ngrok-free.app/mcp to ChatGPT Settings → Connectors

Edit React components in web/src/widgets/ and see changes instantly in ChatGPT. No reconnecting, no rebuilding as the naming convention handles all the wiring automatically.

A few more details:

• Skybridge's file-based convention: endpoint name must match widget filename (pokemon-card endpoint → pokemon-card.tsx component)
• HMR updates widgets in real-time while MCP server keeps running
• Production build compiles everything and deploys to Alpic in ~30 seconds

Plus, the sample app is Pokemon for a little nostalgia while you’re developing (you can thank us for that by starring in the repo!)

Happy to answer questions about the implementation or MCP integration patterns! And stay tuned for our next article that will offer insight on how we built the framework ;)

And a quick demo for the road: