Apps SDK Template
A minimal TypeScript template for building ChatGPT and MCP Apps with widget rendering.
This template has been generated and is powered by Skybridge.
Getting Started
Prerequisites
- Node.js 24+
- pnpm (install with npm install -g pnpm)
- HTTP tunnel such as ngrok
Local Development
1. Install
git clone git@github.com:alpic-ai/apps-sdk-template.git
cd apps-sdk-template
pnpm install2. Start your local server
Run the development server from the root directory:
Open DevTools to test your app locally: http://localhost:3000/ MCP server running at: http://localhost:3000/mcp
3. Connect to ChatGPT
- ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
- In ChatGPT, navigate to Settings → Connectors → Create and add the forwarding URL provided by ngrok suffixed with
/mcp(e.g.https://3785c5ddc4b6.ngrok-free.app/mcp)
Create your first widget
1. Add a new widget
- Register a widget in
server/server.tswith a unique name (e.g.,my-widget) - Create a matching React component at
web/src/widgets/my-widget.tsx. The file name must match the widget name exactly
2. Edit widgets with Hot Module Replacement (HMR)
Edit and save components in web/src/widgets/ — changes appear instantly in the host
3. Edit server code
Modify files in server/ and reload your ChatGPT connector in Settings → Connectors → [Your connector] → Reload
Deploy to Production
Use Alpic to deploy your OpenAI App to production
- In ChatGPT, navigate to Settings → Connectors → Create and add your MCP server URL (e.g.,
https://your-app-name.alpic.live)