skybridge CLI for development and production workflows, and create-skybridge for bootstrapping new projects.
Skybridge CLI
The main CLI is available as bothskybridge and sb commands after installing skybridge in your project.
skybridge dev
Start the development server with hot module reloading and DevTools.- Starts a development server at
http://localhost:3000/ - Opens DevTools for local testing at
http://localhost:3000/ - Exposes MCP server at
http://localhost:3000/mcp - Enables file watching with automatic server restart
- Enables Hot Module Reloading (HMR) for widgets
Flags
| Flag | Description |
|---|---|
-p, --port <number> | Port to run the server on. Defaults to 3000, or the next available port if 3000 is in use. |
--use-forwarded-host | Uses the forwarded host header to construct widget URLs instead of localhost. Useful when accessing the dev server through a tunnel (e.g., ngrok). |
PORT environment variable:
--use-forwarded-host allows your widgets to work on any device connected to the internet, not just on your local machine. Useful when developing on multiple devices or when you need to test your app from different devices.
Important limitation: Hot Module Reloading (HMR) is not available when using --use-forwarded-host because HMR uses a different port than the dev server and requires the WebSocket Secure (WSS) protocol, which most tunnel solutions don’t support. To see your changes during development, simply reopen the conversation in ChatGPT to refresh the widget.
Example with ngrok:
--use-forwarded-host when you need to develop or test on multiple devices. For local-only development, the standard skybridge dev command is sufficient.
When using --use-forwarded-host, Skybridge will use the ngrok URL (e.g., https://abc123.ngrok-free.app) for widget URLs instead of localhost:3000.
skybridge build
Build your widgets and MCP server for production deployment.- Building widgets - Compiles your React widgets using Vite
- Compiling server - Transpiles TypeScript server code
- Copying static assets - Moves built assets to the
dist/directory
dist/ directory, ready for production deployment.
skybridge start
Start the production server.- Must run
skybridge buildfirst - Requires
dist/index.jsto exist
- Runs the compiled server from
dist/index.js - Sets
NODE_ENV=production - Serves the MCP endpoint at
http://localhost:3000/mcp - Serves pre-built widget assets from
/assets
create-skybridge
A standalone CLI for bootstrapping new Skybridge projects.Arguments
| Argument | Description |
|---|---|
[directory] | Target directory for the new project. If not specified, you’ll be prompted to enter a project name. Use . to create in the current directory. |
Options
| Option | Description |
|---|---|
-h, --help | Show help message |
--overwrite | Remove existing files in target directory without prompting |
--immediate | Install dependencies and start the development server automatically after scaffolding |
Examples
Create a new project interactively:What it creates
The scaffolder copies a starter template that includes:server/index.ts- MCP server with example toolsweb/- React widgets with example componentspackage.json- Pre-configured with all dependenciestsconfig.jsonfiles - TypeScript configurationvite.config.ts- Vite configuration for widget bundlingnodemon.json- File watching configuration for development
Package Manager Scripts
When you create a new Skybridge project, thepackage.json includes these scripts:
| Script | Command | Description |
|---|---|---|
dev | skybridge dev | Start development server |
build | skybridge build | Build for production |
start | skybridge start | Start production server |