Skip to main content
The fastest way to start building is using our starter template. It comes pre-configured with an MCP server, UI widgets, and a full dev server with Hot Module Reload.
Before You StartNew to ChatGPT Apps or MCP? Read MCP and ChatGPT Apps Fundamentals first to understand the concepts.

​
Bootstrap your project

Set up your app with a single command: 
npm create skybridge@latest my-chatgpt-app
PrerequisitesMake sure you have:
  • Node.js 24+
  • Ngrok for exposing your local server
  • Basic knowledge of React and TypeScript
  • Familiarity with Zod for schema validation (we’ll use it for type-safe tool definitions)
Widget Naming ConventionWidget file name must match the registration name (e.g., "my-widget" → my-widget.tsx). See registerWidget.

​
Start the development server

Run the development server from the root directory: 
npm run dev
This runs the skybridge command, which starts a development server with the following features:

​
What it does

The skybridge command:
  • Starts an Express server on port 3000 that packages:
    • An MCP endpoint on /mcp - the ChatGPT App Backend
    • A React application on Vite HMR dev server - the ChatGPT App Frontend
  • Watches for file changes using nodemon, automatically restarting the server when you modify server-side code

​
Development workflow

When you run skybridge:
  1. The server starts and displays the welcome screen in your terminal
  2. You can access DevTools at http://localhost:3000/ to test your app locally
  3. The MCP server is available at http://localhost:3000/mcp
  4. File watching is enabled - changes to server code will automatically restart the server
  5. Hot Module Reload (HMR) is active for Widgets components - changes appear instantly in ChatGPT without reconnecting

​
Next step

Your dev server is running. Now learn how to test your app locally and in ChatGPT:

Test Your App

Learn how to test locally with DevTools and in ChatGPT