Skybridge Starter

A minimal TypeScript template for building MCP and ChatGPT Apps with the Skybridge framework.

Getting Started

Prerequisites

• Node.js 24+
• HTTP tunnel such as Alpic tunnel if you want to test with remote MCP hosts like ChatGPT or Claude.ai.

Local Development

1. Install

npm install
# or
yarn install
# or
pnpm install
# or
bun install

2. Start your local server

Run the development server from the root directory:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

This command starts:

• Your MCP server at http://localhost:3000/mcp.
• Skybridge DevTools UI at http://localhost:3000/.

3. Project structure

├── src/
│   ├── server.ts         # Server entry point (tool + view registration)
│   ├── helpers.ts        # Type-safe hooks (generateHelpers)
│   ├── index.css         # Global styles
│   └── views/            # React components (one file per view)
│       └── canvas.tsx
├── vite.config.ts        # Vite config (skybridge/vite plugin)
├── alpic.json            # Deployment config
└── package.json

Create your first view

1. Add a new view

• Register a tool in src/server.ts with a unique name (e.g., my-tool) using registerTool, and attach a UI via the view: { component: "my-view" } field.
• Create a matching React component at src/views/my-view.tsx with a default export. The Skybridge Vite plugin auto-mounts it — the file name must match the view.component name exactly.

2. Edit views with Hot Module Replacement (HMR)

Edit and save components in src/views/ — changes will appear instantly inside your App.

3. Edit server code

Modify src/server.ts and refresh the connection with your testing MCP Client to see the changes.

Testing your App

You can test your App locally by using our DevTools UI on localhost:3000 while running the pnpm dev command.

To test your app with other MCP Clients like ChatGPT, Claude or VSCode, see Testing Your App.

Deploy to Production

Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.

The simplest way to deploy your App in minutes is Alpic.

1. Create an account on Alpic platform.
2. Connect your GitHub repository to automatically deploy at each commit.
3. Use your remote App URL to connect it to MCP Clients, or use the Alpic Playground to easily test your App.

Resources

• Skybridge Documentation
• Apps SDK Documentation
• MCP Apps Documentation
• Model Context Protocol Documentation
• Alpic Documentation