A starter TypeScript template for building MCP and ChatGPT Apps with the Skybridge framework.
- Node.js 24+
npm install
# or
pnpm install
# or
bun install
# or
deno install
# or
yarn installRun the development server from the root directory:
npm run dev
# or
pnpm dev
# or
bun dev
# or
deno task dev
# or
yarn devThis command starts:
- Your MCP server at
http://localhost:3000/mcp. - Skybridge DevTools UI at
http://localhost:3000.
├── src/
│ ├── server.ts # Server entry point
│ ├── views/ # React components (one per view)
│ ├── components/ # Shared UI components
│ ├── helpers.ts # Shared utilities
│ └── index.css # Global styles
├── vite.config.ts
├── alpic.json # Deployment config
└── package.json
- Register a tool in
src/server.tswith a unique name (e.g.,my-view) usingregisterTooland aviewconfig. - Create a matching React component at
src/views/my-view.tsx. The file name must match the view name exactly.
Edit and save components in src/views/ — changes will appear instantly inside your App.
Modify files in src/ and refresh the tool list with your MCP Client to see the changes.
You can test your app locally by using our DevTools UI on http://localhost:3000 while running the dev command.
To connect your app with web clients like ChatGPT or Claude, expose your server on the internet by adding the --tunnel flag.
By enabling the tunnel, you'll also be able to access a playground to chat with your app and a real LLM. Learn more by reading the test guide.
Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
The simplest way to deploy your app is by running the deploy command, which will push your MCP server to the Alpic cloud for free.