create-skybridge 0.0.0-dev.bfca583 → 0.0.0-dev.bfeddf1

package/dist/index.js

@@ -3,6 +3,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import * as prompts from "@clack/prompts";
+import { downloadTemplate } from "giget";
 import mri from "mri";
 const defaultProjectName = "skybridge-project";
 // prettier-ignore
@@ -13,21 +14,30 @@ Create a new Skybridge project by copying the starter template.
 
 Options:
   -h, --help              show this help message
+  --repo <uri>            use a git repository instead of the built-in template
   --overwrite             remove existing files in target directory
   --immediate             install dependencies and start development server
 
+Repository URI formats:
+  github:user/repo
+  gitlab:user/repo/subdirectory
+  bitbucket:user/repo#branch
+
 Examples:
   create-skybridge my-app
+  create-skybridge my-app --repo github:alpic-ai/skybridge/examples/ecom-carousel
   create-skybridge . --overwrite --immediate
 `;
 export async function init(args = process.argv.slice(2)) {
     const argv = mri(args, {
         boolean: ["help", "overwrite", "immediate"],
+        string: ["repo"],
         alias: { h: "help" },
     });
     const argTargetDir = argv._[0]
         ? sanitizeTargetDir(String(argv._[0]))
         : undefined;
+    const argRepo = argv.repo;
     const argOverwrite = argv.overwrite;
     const argImmediate = argv.immediate;
     const help = argv.help;
@@ -95,38 +105,77 @@ export async function init(args = process.argv.slice(2)) {
                 emptyDir(targetDir);
                 break;
             case "no":
-                cancel();
-                return;
+                prompts.log.error("Target directory is not empty.");
+                process.exit(1);
         }
     }
     const root = path.join(process.cwd(), targetDir);
-    // 3. Copy the repository
-    prompts.log.step(`Copying template...`);
+    // 3. Download from repo or copy template
     try {
-        const templateDir = fileURLToPath(new URL("../template", import.meta.url));
-        // Copy template to target directory
-        fs.cpSync(templateDir, root, {
-            recursive: true,
-            filter: (src) => [".npmrc"].every((file) => !src.endsWith(file)),
-        });
-        // Rename _gitignore to .gitignore
-        fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
-        // Update project name in package.json
-        const name = path.basename(root);
-        const pkgPath = path.join(root, "package.json");
-        const pkg = fs.readFileSync(pkgPath, "utf-8");
-        const fixed = pkg.replace(/apps-sdk-template/g, name);
-        fs.writeFileSync(pkgPath, fixed);
-        prompts.log.success(`Project created in ${root}`);
+        if (argRepo) {
+            prompts.log.step(`Downloading ${argRepo}...`);
+            await downloadTemplate(argRepo, { dir: root });
+            prompts.log.success(`Project created in ${root}`);
+        }
+        else {
+            prompts.log.step(`Copying template...`);
+            const templateDir = fileURLToPath(new URL("../template", import.meta.url));
+            // Copy template to target directory
+            fs.cpSync(templateDir, root, {
+                recursive: true,
+                filter: (src) => [".npmrc"].every((file) => !src.endsWith(file)),
+            });
+            // Rename _gitignore to .gitignore
+            fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
+            prompts.log.success(`Project created in ${root}`);
+        }
+    }
+    catch (error) {
+        prompts.log.error("Failed to create project from template");
+        console.error(error);
+        process.exit(1);
+    }
+    // Update project name in package.json
+    const pkgPath = path.join(root, "package.json");
+    if (!fs.existsSync(pkgPath)) {
+        prompts.log.error("No package.json found in project");
+        process.exit(1);
+    }
+    try {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+        pkg.name = path.basename(root);
+        fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
     }
     catch (error) {
-        prompts.log.error("Failed to copy repository");
+        prompts.log.error("Failed to update project name in package.json");
         console.error(error);
         process.exit(1);
     }
     const userAgent = process.env.npm_config_user_agent;
     const pkgManager = userAgent?.split(" ")[0]?.split("/")[0] || "npm";
-    // 4. Ask about immediate installation
+    // 4. Ask about skills installation
+    if (interactive) {
+        const skillsResult = await prompts.confirm({
+            message: "Install the coding agents skills? (recommended)",
+            initialValue: true,
+        });
+        if (prompts.isCancel(skillsResult)) {
+            return cancel();
+        }
+        if (skillsResult) {
+            run([
+                ...getPkgExecCmd(pkgManager, "skills"),
+                "add",
+                "alpic-ai/skybridge",
+                "-s",
+                "chatgpt-app-builder",
+            ], {
+                stdio: "inherit",
+                cwd: targetDir,
+            });
+        }
+    }
+    // 5. Ask about immediate installation
     let immediate = argImmediate;
     if (immediate === undefined) {
         if (interactive) {
@@ -198,18 +247,37 @@ function sanitizeTargetDir(targetDir) {
         // Remove leading/trailing slashes
         .replace(/^\/+|\/+$/g, ""));
 }
-function isEmpty(path) {
-    const files = fs.readdirSync(path);
-    return files.length === 0 || (files.length === 1 && files[0] === ".git");
+// Skip user's SPEC.md and IDE/agent preferences (.idea, .claude, etc.)
+function isSkippedEntry(entry) {
+    return ((entry.name.startsWith(".") && entry.isDirectory()) ||
+        entry.name === "SPEC.md");
+}
+function isEmpty(dirPath) {
+    const entries = fs.readdirSync(dirPath, { withFileTypes: true });
+    return entries.every(isSkippedEntry);
 }
 function emptyDir(dir) {
     if (!fs.existsSync(dir)) {
         return;
     }
-    for (const file of fs.readdirSync(dir)) {
-        if (file === ".git") {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+        if (isSkippedEntry(entry)) {
             continue;
         }
-        fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
+        fs.rmSync(path.join(dir, entry.name), { recursive: true, force: true });
+    }
+}
+function getPkgExecCmd(pkgManager, cmd) {
+    switch (pkgManager) {
+        case "yarn":
+            return ["yarn", "dlx", cmd];
+        case "pnpm":
+            return ["pnpm", "dlx", cmd];
+        case "bun":
+            return ["bunx", cmd];
+        case "deno":
+            return ["deno", "run", "-A", `npm:${cmd}`];
+        default:
+            return ["npx", cmd];
     }
 }

package/dist/index.test.js

@@ -14,10 +14,20 @@ describe("create-skybridge", () => {
             force: true,
         });
     });
-    it("should scaffold a new project", async () => {
+    it("should copy the template", async () => {
         const name = `../../${tempDirName}//project$`;
         await init([name]);
         await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
         expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
     });
+    it("should download template from repo", async () => {
+        const name = `../../${tempDirName}//project$`;
+        await init([
+            name,
+            "--repo",
+            "github:alpic-ai/skybridge/examples/ecom-carousel",
+        ]);
+        await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
+        expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.bfca583",
+  "version": "0.0.0-dev.bfeddf1",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
@@ -18,11 +18,12 @@
   ],
   "dependencies": {
     "@clack/prompts": "^0.11.0",
+    "giget": "^3.1.2",
     "mri": "^1.2.0"
   },
   "devDependencies": {
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.18"
   },
   "scripts": {
     "build": "tsc",

package/template/AGENTS.md

@@ -0,0 +1 @@
+Before writing code, first explore the project structure, then invoke the chatgpt-app-builder skill for documentation.

package/template/README.md

@@ -1,13 +1,13 @@
-# ChatGPT Apps SDK Alpic Starter
+# Skybridge Starter
 
-A minimal TypeScript template for building OpenAI Apps SDK compatible MCP servers with widget rendering in ChatGPT.
+A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech/home) framework.
 
 ## Getting Started
 
 ### Prerequisites
 
 - Node.js 24+
-- HTTP tunnel such as [ngrok](https://ngrok.com/download)
+- HTTP tunnel such as [ngrok](https://ngrok.com/download) if you want to test with remote MCP hosts like ChatGPT or Claude.ai.
 
 ### Local Development
 
@@ -37,41 +37,63 @@ pnpm dev
 bun dev
 ```
 
-This command starts an Express server on port 3000. This server packages:
+This command starts:
+- Your MCP server at `http://localhost:3000/mcp`.
+- Skybridge DevTools UI at `http://localhost:3000/`.
 
-- an MCP endpoint on `/mcp` (the app backend)
-- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
+#### 3. Project structure
 
-#### 3. Connect to ChatGPT
-
-- ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
-```bash
-ngrok http 3000
 ```
-- In ChatGPT, navigate to **Settings → Connectors → Create** and add the forwarding URL provided by ngrok suffixed with `/mcp` (e.g. `https://3785c5ddc4b6.ngrok-free.app/mcp`)
+├── server/
+│   └── src/
+│       ├── index.ts      # Entry point
+│       ├── middleware.ts # MCP middleware
+│       └── server.ts     # Widget registry & routes
+├── web/
+│   ├── src/
+│   │   ├── widgets/      # React components (one per widget)
+│   │   ├── helpers.ts    # Shared utilities
+│   │   └── index.css     # Global styles
+│   └── vite.config.ts
+├── alpic.json            # Deployment config
+├── nodemon.json          # Dev server config
+└── package.json
+```
 
 ### Create your first widget
 
 #### 1. Add a new widget
 
-- Register a widget in `server/server.ts` with a unique name (e.g., `my-widget`)
-- Create a matching React component at `web/src/widgets/my-widget.tsx`. The file name must match the widget name exactly
+- Register a widget in `server/src/server.ts` with a unique name (e.g., `my-widget`) using [`registerWidget`](https://docs.skybridge.tech/api-reference/register-widget)
+- Create a matching React component at `web/src/widgets/my-widget.tsx`. **The file name must match the widget name exactly**.
 
 #### 2. Edit widgets with Hot Module Replacement (HMR)
 
-Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
+Edit and save components in `web/src/widgets/` — changes will appear instantly inside your App.
 
 #### 3. Edit server code
 
-Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
+Modify files in `server/` 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](https://docs.skybridge.tech/quickstart/test-your-app).
+
 
 ## Deploy to Production
 
-- Use [Alpic](https://alpic.ai/) to deploy your OpenAI App to production
-- In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
+Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
 
-## Resources
+Deploy your app in minutes with [Alpic](https://alpic.ai/).
+1. Create an account on [Alpic platform](https://app.alpic.ai/). 
+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](https://docs.skybridge.tech/)
 - [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
+- [MCP Apps Documentation](https://github.com/modelcontextprotocol/ext-apps/tree/main)
 - [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
 - [Alpic Documentation](https://docs.alpic.ai/)

package/template/_gitignore

@@ -1,4 +1,5 @@
 node_modules/
 dist/
 .env*
-.DS_store
+.DS_store
+*.tsbuildinfo

package/template/alpic.json

@@ -1,4 +1,3 @@
 {
-  "$schema": "https://assets.alpic.ai/alpic.json",
-  "buildOutputDir": "server/dist"
+  "$schema": "https://assets.alpic.ai/alpic.json"
 }

package/template/node_modules/.bin/alpic

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.85.0_@opentelemetry+api@1.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../alpic/bin/run.js" "$@"
+else
+  exec node  "$basedir/../alpic/bin/run.js" "$@"
+fi

package/template/node_modules/.bin/sb

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../skybridge/bin/run.js" "$@"
+else
+  exec node  "$basedir/../skybridge/bin/run.js" "$@"
+fi

package/template/node_modules/.bin/skybridge

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.30.0_@modelcontextprotocol+sdk@1.25.2_hono@4.11.9_zod@4.3.6__@types+node@25_2e887ddf104b73d26dd86a2d15f8fcf5/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../skybridge/bin/run.js" "$@"
+else
+  exec node  "$basedir/../skybridge/bin/run.js" "$@"
+fi

package/template/node_modules/.bin/vite

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@25.2.2_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"

package/template/package.json

@@ -5,38 +5,34 @@
   "description": "Alpic MCP Server Template",
   "type": "module",
   "scripts": {
-    "dev": "nodemon",
-    "build": "vite build -c web/vite.config.ts && shx rm -rf server/dist && tsc -p tsconfig.server.json && shx cp -r web/dist server/dist/assets",
-    "start": "node server/dist/index.js",
-    "inspector": "mcp-inspector http://localhost:3000/mcp",
-    "server:build": "tsc -p tsconfig.server.json",
-    "server:start": "node server/dist/index.js",
-    "web:build": "tsc -b web && vite build -c web/vite.config.ts",
-    "web:preview": "vite preview -c web/vite.config.ts"
+    "dev": "skybridge dev",
+    "build": "skybridge build",
+    "start": "skybridge start",
+    "deploy": "alpic deploy"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.1",
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "cors": "^2.8.6",
     "express": "^5.2.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "skybridge": ">=0.16.2 <1.0.0",
-    "vite": "^7.3.0",
-    "zod": "^4.3.5"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "skybridge": ">=0.29.1 <1.0.0",
+    "vite": "^7.3.1",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.18.0",
-    "@skybridge/devtools": ">=0.16.2 <1.0.0",
+    "@skybridge/devtools": ">=0.26.1 <1.0.0",
+    "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^5.1.4",
+    "alpic": "^1.84.3",
     "nodemon": "^3.1.11",
-    "shx": "^0.4.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   },
-  "workspaces": [],
   "engines": {
-    "node": ">=24.0.0"
+    "node": ">=24.13.0"
   }
 }

package/template/server/src/index.ts

@@ -1,39 +1,62 @@
-import express, { type Express } from "express";
-import { devtoolsStaticServer, widgetsDevServer } from "skybridge/server";
-import type { ViteDevServer } from "vite";
-import { mcp } from "./middleware.js";
-import server from "./server.js";
-
-const app = express() as Express & { vite: ViteDevServer };
-
-app.use(express.json());
-
-app.use(mcp(server));
-
-const env = process.env.NODE_ENV || "development";
-
-if (env !== "production") {
-  app.use(await devtoolsStaticServer());
-  app.use(await widgetsDevServer());
-}
-
-app.listen(3000, (error) => {
-  if (error) {
-    console.error("Failed to start server:", error);
-    process.exit(1);
-  }
-
-  console.log(`Server listening on port 3000 - ${env}`);
-  console.log(
-    "Make your local server accessible with 'ngrok http 3000' and connect to ChatGPT with URL https://xxxxxx.ngrok-free.app/mcp",
-  );
-
-  if (env !== "production") {
-    console.log("Devtools available at http://localhost:3000");
-  }
-});
-
-process.on("SIGINT", async () => {
-  console.log("Server shutdown complete");
-  process.exit(0);
-});
+import { McpServer } from "skybridge/server";
+import { z } from "zod";
+
+const Answers = [
+  "As I see it, yes",
+  "Don't count on it",
+  "It is certain",
+  "It is decidedly so",
+  "Most likely",
+  "My reply is no",
+  "My sources say no",
+  "Outlook good",
+  "Outlook not so good",
+  "Signs point to yes",
+  "Very doubtful",
+  "Without a doubt",
+  "Yes definitely",
+  "Yes",
+  "You may rely on it",
+];
+
+const server = new McpServer(
+  {
+    name: "alpic-openai-app",
+    version: "0.0.1",
+  },
+  { capabilities: {} },
+).registerWidget(
+  "magic-8-ball",
+  {
+    description: "Magic 8 Ball",
+  },
+  {
+    description: "For fortune-telling or seeking advice.",
+    inputSchema: {
+      question: z.string().describe("The user question."),
+    },
+  },
+  async ({ question }) => {
+    try {
+      // deterministic answer
+      const hash = question
+        .split("")
+        .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+      const answer = Answers[hash % Answers.length];
+      return {
+        structuredContent: { answer },
+        content: [],
+        isError: false,
+      };
+    } catch (error) {
+      return {
+        content: [{ type: "text", text: `Error: ${error}` }],
+        isError: true,
+      };
+    }
+  },
+);
+
+server.run();
+
+export type AppType = typeof server;

package/template/tsconfig.server.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "server/dist",
+    "outDir": "dist",
     "sourceMap": true,
     "declaration": true
   },

package/template/web/src/helpers.ts

@@ -1,4 +1,4 @@
 import { generateHelpers } from "skybridge/web";
-import type { AppType } from "../../server/src/server";
+import type { AppType } from "../../server/src/index.js";
 
 export const { useToolInfo } = generateHelpers<AppType>();

package/template/web/src/index.css

@@ -1,12 +1,23 @@
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap");
+
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  padding: 1rem;
+  box-sizing: border-box;
 }
 
 .ball {
-  background-color: black;
+  background: radial-gradient(
+    circle at 30% 30%,
+    #454565 0%,
+    #1c1c30 40%,
+    #0a0a10 100%
+  );
   border-radius: 50%;
   width: 12rem;
   height: 12rem;
@@ -16,16 +27,128 @@
   justify-content: center;
   font-family: monospace;
   text-align: center;
+  position: relative;
+  box-shadow:
+    0 10px 30px rgba(0, 0, 0, 0.5),
+    0 5px 15px rgba(0, 0, 0, 0.3),
+    inset 0 -20px 40px rgba(0, 0, 0, 0.6);
+  animation:
+    float 3s ease-in-out infinite,
+    colorShift 15s ease-in-out infinite;
+  transition: transform 0.3s ease;
+  cursor: pointer;
+  border: 1px solid rgba(30, 30, 50, 0.6);
+}
+
+.ball:hover {
+  transform: scale(1.05) translateY(-8px);
+  animation: colorShift 15s ease-in-out infinite;
+  box-shadow:
+    0 20px 50px rgba(0, 0, 0, 0.6),
+    0 10px 25px rgba(0, 0, 0, 0.4),
+    inset 0 -20px 40px rgba(0, 0, 0, 0.6);
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes colorShift {
+  0%,
+  100% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #454565 0%,
+      #1c1c30 40%,
+      #0a0a10 100%
+    );
+  }
+  25% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #3f4a65 0%,
+      #181e30 40%,
+      #090a10 100%
+    );
+  }
+  50% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #3a5065 0%,
+      #152230 40%,
+      #080a10 100%
+    );
+  }
+  75% {
+    background: radial-gradient(
+      circle at 30% 30%,
+      #3f4a65 0%,
+      #181e30 40%,
+      #090a10 100%
+    );
+  }
+}
+
+.ball::before {
+  content: "";
+  position: absolute;
+  top: 8%;
+  left: 20%;
+  width: 30%;
+  height: 20%;
+  background: radial-gradient(
+    ellipse,
+    rgba(255, 255, 255, 0.3) 0%,
+    transparent 70%
+  );
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.ball::after {
+  content: "";
+  position: absolute;
+  bottom: 8%;
+  right: 25%;
+  width: 25%;
+  height: 10%;
+  background: radial-gradient(
+    ellipse,
+    rgba(255, 255, 255, 0.1) 0%,
+    transparent 70%
+  );
+  border-radius: 50%;
+  pointer-events: none;
 }
 
 .question {
-  font-size: 0.75rem;
+  font-size: clamp(0.5rem, 2vw, 0.75rem);
   color: lightgrey;
+  max-width: 90%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-align: center;
+  line-height: 1.3;
+  font-style: italic;
 }
 
 .answer {
-  font-size: 1.125rem;
-  font-weight: bold;
+  font-family: "Playfair Display", serif;
+  font-style: italic;
+  font-size: 1.25rem;
+  font-weight: 600;
   margin-top: 0.5rem;
-  color: aqua;
+  color: #7dd3fc;
+  text-shadow: 0 0 10px rgba(125, 211, 252, 0.5);
+  max-width: 90%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  text-align: center;
+  line-height: 1.3;
 }

package/template/web/src/widgets/magic-8-ball.tsx

@@ -5,15 +5,18 @@ import { useToolInfo } from "../helpers";
 
 function Magic8Ball() {
   const { input, output } = useToolInfo<"magic-8-ball">();
-  if (!output) {
-    return <div>Shaking...</div>;
-  }
 
   return (
     <div className="container">
       <div className="ball">
-        <div className="question">{input.question}</div>
-        <div className="answer">{output.answer}</div>
+        {output ? (
+          <>
+            <div className="question">{input.question}</div>
+            <div className="answer">{output.answer}</div>
+          </>
+        ) : (
+          <div className="question">Shaking...</div>
+        )}
       </div>
     </div>
   );

package/template/web/vite.config.ts

@@ -1,11 +1,11 @@
 import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { skybridge } from "skybridge/web";
-import { defineConfig } from "vite";
+import { defineConfig, type PluginOption } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [skybridge(), react()],
+  plugins: [skybridge() as PluginOption, react()],
   root: __dirname,
   resolve: {
     alias: {

package/template/node_modules/.bin/mcp-inspector

@@ -1,21 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
-else
-  exec node  "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
-fi

package/template/node_modules/.bin/shx

@@ -1,21 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*)
-        if command -v cygpath > /dev/null 2>&1; then
-            basedir=`cygpath -w "$basedir"`
-        fi
-    ;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../shx/lib/cli.js" "$@"
-else
-  exec node  "$basedir/../shx/lib/cli.js" "$@"
-fi

package/template/server/src/middleware.ts

@@ -1,54 +0,0 @@
-import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import type { NextFunction, Request, Response } from "express";
-
-import type { McpServer } from "skybridge/server";
-
-export const mcp =
-  (server: McpServer) =>
-  async (req: Request, res: Response, next: NextFunction) => {
-    // Only handle requests to the /mcp path
-    if (req.path !== "/mcp") {
-      return next();
-    }
-
-    if (req.method === "POST") {
-      try {
-        const transport = new StreamableHTTPServerTransport({
-          sessionIdGenerator: undefined,
-        });
-
-        res.on("close", () => {
-          transport.close();
-        });
-
-        await server.connect(transport);
-
-        await transport.handleRequest(req, res, req.body);
-      } catch (error) {
-        console.error("Error handling MCP request:", error);
-        if (!res.headersSent) {
-          res.status(500).json({
-            jsonrpc: "2.0",
-            error: {
-              code: -32603,
-              message: "Internal server error",
-            },
-            id: null,
-          });
-        }
-      }
-    } else if (req.method === "GET" || req.method === "DELETE") {
-      res.writeHead(405).end(
-        JSON.stringify({
-          jsonrpc: "2.0",
-          error: {
-            code: -32000,
-            message: "Method not allowed.",
-          },
-          id: null,
-        }),
-      );
-    } else {
-      next();
-    }
-  };

package/template/server/src/server.ts

@@ -1,61 +0,0 @@
-import { McpServer } from "skybridge/server";
-import { z } from "zod";
-
-const Answers = [
-  "As I see it, yes",
-  "Don't count on it",
-  "It is certain",
-  "It is decidedly so",
-  "Most likely",
-  "My reply is no",
-  "My sources say no",
-  "Outlook good",
-  "Outlook not so good",
-  "Signs point to yes",
-  "Very doubtful",
-  "Without a doubt",
-  "Yes definitely",
-  "Yes",
-  "You may rely on it",
-];
-
-const server = new McpServer(
-  {
-    name: "alpic-openai-app",
-    version: "0.0.1",
-  },
-  { capabilities: {} },
-).registerWidget(
-  "magic-8-ball",
-  {
-    description: "Magic 8 Ball",
-  },
-  {
-    description: "For fortune-telling or seeking advice.",
-    inputSchema: {
-      question: z.string().describe("The user question."),
-    },
-  },
-  async ({ question }) => {
-    try {
-      // deterministic answer
-      const hash = question
-        .split("")
-        .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-      const answer = Answers[hash % Answers.length];
-      return {
-        structuredContent: { answer },
-        content: [],
-        isError: false,
-      };
-    } catch (error) {
-      return {
-        content: [{ type: "text", text: `Error: ${error}` }],
-        isError: true,
-      };
-    }
-  },
-);
-
-export default server;
-export type AppType = typeof server;