create-skybridge 0.0.0-dev.108e77f → 0.0.0-dev.109c5eb

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alpic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -3,8 +3,8 @@ 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 minimumPnpmVersion = 10;
 const defaultProjectName = "skybridge-project";
 // prettier-ignore
 const helpMessage = `\
@@ -14,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"],
+        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;
@@ -52,8 +61,9 @@ export async function init(args = process.argv.slice(2)) {
                         : "Invalid project name";
                 },
             });
-            if (prompts.isCancel(projectName))
+            if (prompts.isCancel(projectName)) {
                 return cancel();
+            }
             targetDir = sanitizeTargetDir(projectName);
         }
         else {
@@ -81,8 +91,9 @@ export async function init(args = process.argv.slice(2)) {
                         },
                     ],
                 });
-                if (prompts.isCancel(res))
+                if (prompts.isCancel(res)) {
                     return cancel();
+                }
                 overwrite = res;
             }
             else {
@@ -99,38 +110,55 @@ export async function init(args = process.argv.slice(2)) {
         }
     }
     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) => !src.endsWith(".npmrc"),
-        });
-        // 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);
-        for (const dir of ["", "server", "web"]) {
-            const pkgPath = path.join(root, dir, "package.json");
-            const pkg = fs.readFileSync(pkgPath, "utf-8");
-            const fixed = pkg.replace(/apps-sdk-template/g, name);
-            fs.writeFileSync(pkgPath, fixed);
+        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}`);
         }
-        prompts.log.success(`Project created in ${root}`);
     }
     catch (error) {
-        prompts.log.error("Failed to copy repository");
+        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 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
     let immediate = argImmediate;
     if (immediate === undefined) {
         if (interactive) {
             const immediateResult = await prompts.confirm({
-                message: `Install with pnpm and start now?`,
+                message: `Install with ${pkgManager} and start now?`,
             });
             if (prompts.isCancel(immediateResult)) {
                 return cancel();
@@ -141,30 +169,29 @@ export async function init(args = process.argv.slice(2)) {
             immediate = false;
         }
     }
-    const installCmd = ["pnpm", "install"];
-    const runCmd = ["pnpm", "dev"];
+    const installCmd = [pkgManager, "install"];
+    const runCmd = [pkgManager];
+    switch (pkgManager) {
+        case "yarn":
+        case "pnpm":
+        case "bun":
+            break;
+        case "deno":
+            runCmd.push("task");
+            break;
+        default:
+            runCmd.push("run");
+    }
+    runCmd.push("dev");
     if (!immediate) {
         prompts.outro(`Done! Next steps:
   cd ${targetDir}
   ${installCmd.join(" ")}
   ${runCmd.join(" ")}
 `);
-        return cancel();
-    }
-    // check if pnpm is installed
-    const result = spawnSync("pnpm", ["--version"], { encoding: "utf-8" });
-    if (result.error || result.status !== 0) {
-        console.error("Error: pnpm is not installed. Please install pnpm first.");
-        process.exit(1);
-    }
-    // check if pnpm major is greater or equal to the one set in package.json packageManager, which should do the trick
-    const version = result.stdout.trim();
-    const major = Number(version.split(".")[0]);
-    if (Number.isNaN(major) || major < minimumPnpmVersion) {
-        console.error(`Error: pnpm version ${version} is too old. Minimum required version is ${minimumPnpmVersion}.`);
-        process.exit(1);
+        return;
     }
-    prompts.log.step(`Installing dependencies with pnpm...`);
+    prompts.log.step(`Installing dependencies with ${pkgManager}...`);
     run(installCmd, {
         stdio: "inherit",
         cwd: root,

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.108e77f",
+  "version": "0.0.0-dev.109c5eb",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
@@ -16,21 +16,20 @@
     "dist",
     "template"
   ],
-  "scripts": {
-    "build": "tsc",
-    "test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
-    "test:unit": "vitest run",
-    "test:type": "tsc --noEmit",
-    "test:format": "biome ci",
-    "prepublishOnly": "pnpm run build"
-  },
   "dependencies": {
     "@clack/prompts": "^0.11.0",
+    "giget": "^2.0.0",
     "mri": "^1.2.0"
   },
   "devDependencies": {
-    "@types/node": "^25.0.3",
     "typescript": "^5.9.3",
-    "vitest": "^2.1.9"
+    "vitest": "^4.0.17"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
+    "test:unit": "vitest run",
+    "test:type": "tsc --noEmit",
+    "test:format": "biome ci"
   }
-}
+}

package/template/README.md

@@ -1,13 +1,12 @@
-# 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 ChatGPT and MCP Apps with widget rendering.
 
 ## Getting Started
 
 ### Prerequisites
 
-- Node.js 22+
-- pnpm (install with `npm install -g pnpm`)
+- Node.js 24+
 - HTTP tunnel such as [ngrok](https://ngrok.com/download)
 
 ### Local Development
@@ -15,7 +14,13 @@ A minimal TypeScript template for building OpenAI Apps SDK compatible MCP server
 #### 1. Install
 
 ```bash
+npm install
+# or
+yarn install
+# or
 pnpm install
+# or
+bun install
 ```
 
 #### 2. Start your local server
@@ -23,13 +28,19 @@ pnpm install
 Run the development server from the root directory:
 
 ```bash
+npm run dev
+# or
+yarn dev
+# or
 pnpm dev
+# or
+bun dev
 ```
 
 This command starts an Express server on port 3000. This server packages:
 
 - an MCP endpoint on `/mcp` (the app backend)
-- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
+- a React application on Vite HMR dev server (the UI elements to be displayed in the host)
 
 #### 3. Connect to ChatGPT
 
@@ -48,7 +59,7 @@ ngrok http 3000
 
 #### 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 appear instantly in the host
 
 #### 3. Edit server code
 

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/mcp-inspector

@@ -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/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/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@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_4be4554909ca0a790f3ece65616617d1/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/nodemon

@@ -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/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../nodemon/bin/nodemon.js" "$@"
+else
+  exec node  "$basedir/../nodemon/bin/nodemon.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.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/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.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/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.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/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.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.26.1_@modelcontextprotocol+sdk@1.25.2_hono@4.11.3_zod@4.3.5__@types+node@25_735eb51dc660b44c8f8bd4f7ce48a0d2/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/tsc

@@ -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/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/template/node_modules/.bin/tsserver

@@ -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/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/template/node_modules/.bin/tsx

@@ -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/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.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/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.21.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/../tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../tsx/dist/cli.mjs" "$@"
+fi

package/template/node_modules/.bin/vite

@@ -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/vite@7.3.1_@types+node@25.0.3_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.0.3_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.0.3_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.1_@types+node@25.0.3_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.0.3_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.0.3_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" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/template/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "watch": ["server/src"],
+  "ext": "ts,json",
+  "exec": "tsx server/src/index.ts"
+}

package/template/package.json

@@ -4,18 +4,35 @@
   "private": true,
   "description": "Alpic MCP Server Template",
   "type": "module",
-  "packageManager": "pnpm@10.18.3",
   "scripts": {
-    "dev": "pnpm --filter @apps-sdk-template/server dev",
-    "build": "pnpm web:build && rm -rf server/dist && pnpm --filter=@apps-sdk-template/server --prod deploy server/dist && cp -r web/dist server/dist/assets && pnpm --filter=@apps-sdk-template/server build",
-    "start": "pnpm server:start",
-    "inspector": "pnpm --filter @apps-sdk-template/server inspector",
-    "server:build": "pnpm --filter @apps-sdk-template/server build",
-    "server:start": "pnpm --filter @apps-sdk-template/server start",
-    "web:build": "pnpm --filter @apps-sdk-template/web build",
-    "web:preview": "pnpm --filter @apps-sdk-template/web preview"
+    "dev": "skybridge dev",
+    "build": "skybridge build",
+    "start": "skybridge start",
+    "inspector": "mcp-inspector http://localhost:3000/mcp"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "cors": "^2.8.5",
+    "express": "^5.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "skybridge": ">=0.26.1 <1.0.0",
+    "vite": "^7.3.1",
+    "zod": "^4.3.5"
   },
   "devDependencies": {
-    "tsx": "^4.19.4"
+    "@modelcontextprotocol/inspector": "^0.18.0",
+    "@skybridge/devtools": ">=0.26.1 <1.0.0",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "nodemon": "^3.1.11",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=24.13.0"
   }
 }

package/template/server/src/index.ts

@@ -1,5 +1,7 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import cors from "cors";
 import express, { type Express } from "express";
-
 import { widgetsDevServer } from "skybridge/server";
 import type { ViteDevServer } from "vite";
 import { mcp } from "./middleware.js";
@@ -14,19 +16,24 @@ app.use(mcp(server));
 const env = process.env.NODE_ENV || "development";
 
 if (env !== "production") {
+  const { devtoolsStaticServer } = await import("@skybridge/devtools");
+  app.use(await devtoolsStaticServer());
   app.use(await widgetsDevServer());
 }
 
+if (env === "production") {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = path.dirname(__filename);
+
+  app.use("/assets", cors());
+  app.use("/assets", express.static(path.join(__dirname, "assets")));
+}
+
 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",
-  );
 });
 
 process.on("SIGINT", async () => {

package/template/server/src/server.ts

@@ -3,10 +3,6 @@ import { z } from "zod";
 
 const Answers = [
   "As I see it, yes",
-  "Ask again later",
-  "Better not tell you now",
-  "Cannot predict now",
-  "Concentrate and ask again",
   "Don't count on it",
   "It is certain",
   "It is decidedly so",
@@ -15,7 +11,6 @@ const Answers = [
   "My sources say no",
   "Outlook good",
   "Outlook not so good",
-  "Reply hazy, try again",
   "Signs point to yes",
   "Very doubtful",
   "Without a doubt",

package/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "verbatimModuleSyntax": true,
+
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "noEmit": true
+  },
+  "include": ["server/src", "web/src", "web/vite.config.ts"],
+  "exclude": ["dist", "node_modules"]
+}

package/template/tsconfig.server.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "sourceMap": true,
+    "declaration": true
+  },
+  "include": ["server/src"],
+  "exclude": ["dist", "node_modules"]
+}

package/template/web/src/index.css

@@ -1,12 +1,20 @@
+@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%;
+  padding: 1rem;
 }
 
 .ball {
-  background-color: black;
+  background: radial-gradient(
+    circle at 30% 30%,
+    #454565 0%,
+    #1c1c30 40%,
+    #0a0a10 100%
+  );
   border-radius: 50%;
   width: 12rem;
   height: 12rem;
@@ -15,16 +23,129 @@
   align-items: center;
   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,7 +5,9 @@ import { useToolInfo } from "../helpers";
 
 function Magic8Ball() {
   const { input, output } = useToolInfo<"magic-8-ball">();
-  if (!output) return <div>Shaking...</div>;
+  if (!output) {
+    return <div>Shaking...</div>;
+  }
 
   return (
     <div className="container">

package/template/web/vite.config.ts

@@ -1,12 +1,12 @@
 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: {
       "@": path.resolve(__dirname, "./src"),

package/template/pnpm-workspace.yaml

@@ -1,7 +0,0 @@
-packages:
-  - "web"
-  - "server"
-sharedWorkspaceLockfile: false
-
-catalog:
-  skybridge: ^0.13.1

package/template/server/nodemon.json

@@ -1,5 +0,0 @@
-{
-  "watch": ["src/**/*"],
-  "ext": "ts,js,json",
-  "exec": "tsx src/index.ts"
-}

package/template/server/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@apps-sdk-template/server",
-  "version": "0.0.1",
-  "private": true,
-  "main": "dist/index.js",
-  "description": "Alpic MCP Server Template",
-  "files": [
-    "dist"
-  ],
-  "type": "module",
-  "scripts": {
-    "dev": "nodemon",
-    "build": "tsc",
-    "start": "node dist/index.js",
-    "inspector": "mcp-inspector http://localhost:3000/mcp"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.24.3",
-    "express": "^5.1.0",
-    "skybridge": "catalog:",
-    "vite": "^7.1.11",
-    "zod": "^4.1.13"
-  },
-  "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.17.5",
-    "@types/express": "^5.0.3",
-    "@types/node": "^22.15.30",
-    "nodemon": "^3.1.10",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
-  }
-}

package/template/server/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "jsx": "react",
-    "inlineSources": true
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["dist", "node_modules"]
-}

package/template/web/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@apps-sdk-template/web",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "echo 'Not implemented",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "skybridge": "catalog:",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
-  },
-  "devDependencies": {
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "typescript": "~5.9.3",
-    "vite": "^7.1.11"
-  }
-}

package/template/web/tsconfig.app.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    /* Shadcn Config */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/template/web/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/template/web/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}