---
title: Quickstart
description: "Get started with a fully working App in 5 minutes thanks to our starter template."
icon: "bolt"
iconType: "regular"
---

The easiest way to bootstrap a project is using our [🧠 Skill](/devtools/skills). To get a running codebase right away, you can use our starter template — it comes pre-configured with an MCP server, a basic UI view, and a full dev server with a local emulator and HMR.

<Tip>
**New to ChatGPT or MCP Apps**? Read [Fundamentals](/fundamentals) first to understand the concepts.
</Tip>

<Tip>
**Don't know if you should start with a ChatGPT or MCP App?** It doesn't matter! With Skybridge, you build your App once, and it runs seamlessly with both runtimes.
</Tip>

## Scaffold your project

Set up your app with a single command:


<CodeGroup>
```bash npm
npm create skybridge@latest my-app
```
```bash pnpm
pnpm create skybridge my-app
```
```bash yarn
yarn create skybridge my-app
```
```bash bun
bun create skybridge my-app
```
```bash deno
deno init --npm skybridge my-app
```
</CodeGroup>


<Info>
**Prerequisites**

Make sure you have:
- **Node.js 24+**
- Basic knowledge of **React** and **TypeScript**
- Familiarity with **Zod** for schema validation (we'll use it for type-safe tool definitions)
</Info>

<Warning>
**View Naming Convention**

The view file name must match `view.component` in `registerTool`. See [registerTool](/api-reference/register-tool).
</Warning>

## Start the development server

Run the development server from the root directory:

<CodeGroup>
```bash npm
npm run dev
```
```bash pnpm
pnpm dev
```
```bash yarn
yarn dev
```
```bash bun
bun dev
```
```bash deno
deno task dev
```
</CodeGroup>

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 App Backend
  - A React application on Vite HMR dev server - the 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 Views components - changes appear instantly in the host without reconnecting

### Exposing a public URL

When you need to connect a remote client like ChatGPT or Claude, pass the `--tunnel` flag:

<CodeGroup>
```bash npm
npm run dev -- --tunnel
```
```bash pnpm
pnpm dev --tunnel
```
```bash yarn
yarn dev --tunnel
```
```bash bun
bun dev --tunnel
```
```bash deno
deno task dev --tunnel
```
</CodeGroup>

Skybridge downloads and runs [Alpic tunnel](https://docs.alpic.ai/cli/tunnel) automatically, then prints a public `/mcp` URL and an LLM Playground `/try` URL. Add `--verbose` to stream tunnel logs.

## Next steps

<Card title="Test Your App" icon="flask-vial" href="/quickstart/test-your-app">
  Learn how to test your app locally, in ChatGPT and compatible MCP Clients.
</Card>
