diff --git a/docs/build/auth.mdx b/docs/build/auth.mdx index e36c567f..b766e2ab 100644 --- a/docs/build/auth.mdx +++ b/docs/build/auth.mdx @@ -77,7 +77,7 @@ const server = new McpServer({ name: "personal-shopper", version: "0.0.1" }, {}) .registerTool(/* create-checkout … */); ``` -The endpoint values come from your OAuth provider's documentation. `resourceServerUrl` is this server's public URL: localhost in development, the tunnel URL when testing in a host, your domain in production. +The endpoint values come from your OAuth provider's documentation. `resourceServerUrl` is this server's public URL: localhost in development, the [tunnel](/test/tunnel) URL when testing in a host, your domain in production. ## Verify Tokens with a Middleware diff --git a/docs/docs.json b/docs/docs.json index b44a38a5..da14cb5b 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -22,7 +22,7 @@ "tabs": [ { "tab": "Documentation", - "groups": [ + "pages": [ { "group": "Get Started", "icon": "rocket", @@ -56,6 +56,7 @@ ], "expanded": true }, + "ship", { "group": "Get Started (legacy)", "icon": "rocket", @@ -110,12 +111,18 @@ { "group": "DevTools (legacy)", "icon": "wrench", - "pages": ["devtools/skills", "devtools/devtools"] + "pages": [ + "devtools/skills", + "devtools/devtools" + ] }, { "group": "Resources (legacy)", "icon": "circle-question", - "pages": ["faq", "telemetry"] + "pages": [ + "faq", + "telemetry" + ] } ] }, @@ -125,17 +132,24 @@ { "group": "Overview", "icon": "house", - "pages": ["api-reference"] + "pages": [ + "api-reference" + ] }, { "group": "CLI", "icon": "terminal", - "pages": ["api-reference/cli"] + "pages": [ + "api-reference/cli" + ] }, { "group": "Server", "icon": "server", - "pages": ["api-reference/mcp-server", "api-reference/register-tool"] + "pages": [ + "api-reference/mcp-server", + "api-reference/register-tool" + ] }, { "group": "Hooks", @@ -191,7 +205,10 @@ "examples", { "group": "Basic", - "pages": ["examples/starter", "examples/everything"] + "pages": [ + "examples/starter", + "examples/everything" + ] }, { "group": "Use cases", @@ -215,7 +232,10 @@ }, { "group": "UI and Component libraries", - "pages": ["examples/manifest-ui", "examples/generative-ui"] + "pages": [ + "examples/manifest-ui", + "examples/generative-ui" + ] } ] } diff --git a/docs/get-started/architecture.mdx b/docs/get-started/architecture.mdx index 8af9a88d..cd32158a 100644 --- a/docs/get-started/architecture.mdx +++ b/docs/get-started/architecture.mdx @@ -188,4 +188,17 @@ Install it now: ```bash npx skills add alpic-ai/skybridge -s skybridge -``` \ No newline at end of file +``` + +## Go Further + + + Learn everything that makes great MCP Apps + + + Validate your app at every step + + + Deploy your app to a stable, public URL + + diff --git a/docs/get-started/introduction.mdx b/docs/get-started/introduction.mdx index fc9be347..fe0faeaa 100644 --- a/docs/get-started/introduction.mdx +++ b/docs/get-started/introduction.mdx @@ -62,7 +62,7 @@ MCP Apps introduce a fundamental shift: unlike bidirectional web apps, they are -Skybridge is built around all three; it's the fastest, most complete way to build full-fledged MCP Apps. Protocol, authentication, and host support are baked in. It comes with a dead-simple architecture and a complete tooling suite, including HMR, emulator, tunneling, playground, and deployment. Your sole focus: what makes your app great. +Skybridge is built around all three; it's the fastest, most complete way to build full-fledged MCP Apps. Protocol, authentication, and host support are baked in. It comes with a dead-simple architecture and a complete tooling suite, including HMR, [emulator](/test/devtools), [tunneling](/test/tunnel), [playground](/test/playground), and [deployment](/ship). Your sole focus: what makes your app great. ## The AI Sidekick of Your AI Sidekick @@ -72,4 +72,17 @@ Install it now: ```bash npx skills add alpic-ai/skybridge -s skybridge -``` \ No newline at end of file +``` + +## Go Further + + + Build, test, and deploy your first MCP App + + + Design conversational experiences leveraging model intelligence + + + Learn everything that makes great MCP Apps + + diff --git a/docs/get-started/quickstart.mdx b/docs/get-started/quickstart.mdx index fc2e4625..0c5d0b67 100644 --- a/docs/get-started/quickstart.mdx +++ b/docs/get-started/quickstart.mdx @@ -27,9 +27,9 @@ The default `demo` template comes with two tools: Tools are defined in `server.ts`, UI components in the `views` directory. Tools are bound to views in the tool definition. - + To scaffold a bare-bones project without tools or view placeholders, select the `blank` template. - + ## Run Locally @@ -55,15 +55,15 @@ deno task dev This spins up two routes: - `http://localhost:3000/mcp`: the MCP server your app is running on -- `http://localhost:3000/`: the DevTools for testing and debugging your app +- `http://localhost:3000/`: the [DevTools](/test/devtools) for testing and debugging your app - + **Updates to your codebase are reflected right away:** server and UI components are reloaded on file save. - + ## Connect to ChatGPT and Claude -You can plug your locally running server directly into AI hosts by exposing your app on the internet. To do so, start the dev server with an Alpic tunnel: +You can plug your locally running server directly into AI hosts by exposing your app on the internet. To do so, start the dev server with a [tunnel](/test/tunnel): ```bash npm @@ -85,11 +85,9 @@ deno task dev --tunnel You'll be provided a public URL (e.g., `https://superb-marmot-fondue-420.alpic.dev/mcp`) to register your server as a ChatGPT app or a Claude connector. - -[Alpic tunnel](https://docs.alpic.ai/cli/tunnel) comes with a free LLM Playground on `/try`. No config needed: it's already wired to your local server. - - -{/* @todo: link test page */} + +[Alpic tunnel](https://docs.alpic.ai/cli/tunnel) comes with a free [LLM Playground](/test/playground) on `/try`. No config needed: it's already wired to your local server. + ## Ship @@ -115,4 +113,15 @@ deno task deploy After deployment succeeds, the CLI prints the app's public URL. You're now live! -{/* @todo: link deploy page */} \ No newline at end of file +## Go Further + + + Design conversational experiences leveraging model intelligence + + + Learn everything that makes great MCP Apps + + + Validate your app at every step + + diff --git a/docs/images/deploy.png b/docs/images/deploy.png new file mode 100644 index 00000000..161ca16e Binary files /dev/null and b/docs/images/deploy.png differ diff --git a/docs/ship.mdx b/docs/ship.mdx new file mode 100644 index 00000000..cf371581 --- /dev/null +++ b/docs/ship.mdx @@ -0,0 +1,135 @@ +--- +title: "Ship" +description: "Deploy your app to a stable, public URL" +icon: "cloud-upload" +--- +Deploy Illustration + +A deployed MCP App is a server on a public URL: hosts connect to `https://your-domain.com/mcp` and the built views are served from the same origin. + +Two commands take it there: + +- `skybridge build` compiles the views and the server into `dist/` +- `skybridge start` runs the result with `NODE_ENV=production`: pre-built assets on `/assets`, the MCP server on `/mcp`, dev tooling excluded + +Run them on any Node.js-compatible infrastructure, or pick a platform that automates them: + +## Alpic + +[Alpic](https://alpic.ai) is the preferred deployment target: a cloud platform built for MCP Apps, by the company behind Skybridge. Deployed apps get MCP analytics, logs, insights, and a public playground. + +Deploying is free, and one command away from any Skybridge project: + + +```bash npm +npm run deploy +``` +```bash pnpm +pnpm run deploy +``` +```bash yarn +yarn deploy +``` +```bash bun +bun run deploy +``` +```bash deno +deno task deploy +``` + + +For continuous deployment, push your app to GitHub and connect the repository from [app.alpic.ai](https://app.alpic.ai): every commit then ships automatically. + + +Alpic also ships its own [MCP App](https://docs.alpic.ai/features/mcp-server) to manage your deployments from any MCP client: connect to `https://mcp.alpic.ai/mcp`. + + +## Cloudflare Workers + +Skybridge runs on Cloudflare Workers via [Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/) and the `nodejs_compat` runtime. Static assets (your built views) are served by Cloudflare's edge directly; the worker handles `/mcp` traffic and any other dynamic routes. + +Add a `wrangler.jsonc` at your project root: + +```jsonc wrangler.jsonc +{ + "name": "your-skybridge-app", + "main": "dist/__entry.js", + "compatibility_date": "2025-09-01", + "compatibility_flags": ["nodejs_compat"], + "assets": { "directory": "dist/assets" }, + "define": { + "process.env.NODE_ENV": "\"production\"" + } +} +``` + +Each setting is load-bearing: + +- `compatibility_date >= 2025-09-01` and `nodejs_compat`: enable `cloudflare:node`'s `httpServerHandler`, which Skybridge uses to bridge the Express app to the Workers fetch event. +- `assets.directory`: points at the views built by `skybridge build`. Cloudflare serves these at the edge before requests reach your worker. +- `define.process.env.NODE_ENV`: forces production mode even under `wrangler dev`. Without it, wrangler defaults to `development` locally and Skybridge's dev tooling (Vite, the DevTools server) gets pulled into the worker bundle, where neither runs. + +Then build and deploy: + + +```bash npm +npm run build +npx wrangler deploy +``` +```bash pnpm +pnpm build +pnpm dlx wrangler deploy +``` +```bash yarn +yarn build +yarn dlx wrangler deploy +``` +```bash bun +bun run build +bunx wrangler deploy +``` + + + +`wrangler dev` runs your worker in workerd on your machine, the same runtime as production, not a Node.js fallback. Use `skybridge dev` for fast iteration with HMR; use `wrangler dev` to validate the production worker bundle before shipping. + + +## Docker + +Projects created with `npx skybridge create` include a multi-stage `Dockerfile`, so you can self-host on any container platform: + +```bash +docker build -t my-app . +docker run -p 3000:3000 my-app +``` + + +The package manager is detected from the lockfile (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`). Bun and Deno are not supported yet: adapt the build stage inside the Dockerfile. + + +## Vercel + +`skybridge build` emits a [Build Output API](https://vercel.com/docs/build-output-api) tree under `.vercel/output/`: a bundled serverless function, the static asset tree, and the routing config. No `vercel.json` required. + + +```bash npm +npm run build +npx vercel deploy --prebuilt +``` +```bash pnpm +pnpm build +pnpm dlx vercel deploy --prebuilt +``` +```bash yarn +yarn build +yarn dlx vercel deploy --prebuilt +``` +```bash bun +bun run build +bunx vercel deploy --prebuilt +``` + + + +`.vercel/` is gitignored by Vercel CLI convention, so the build artifacts stay out of your tracked working tree. + \ No newline at end of file