create-skybridge 0.0.0-dev.0 → 0.0.0-dev.0005b31

package/dist/index.d.ts

@@ -1 +1 @@
-export {};
+export declare function init(args?: string[]): Promise<void>;

package/dist/index.js

@@ -1,49 +1,45 @@
-#!/usr/bin/env node
-import * as prompts from "@clack/prompts";
-import mri from "mri";
+import { spawnSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
-import { spawnSync } from "node:child_process";
-const argv = mri(process.argv.slice(2), {
-    boolean: ["help", "overwrite"],
-    alias: { h: "help" },
-});
-const cwd = process.cwd();
-const TEMPLATE_REPO = "https://github.com/alpic-ai/apps-sdk-template";
-const defaultTargetDir = "skybridge-project";
+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
 const helpMessage = `\
 Usage: create-skybridge [OPTION]... [DIRECTORY]
 
-Create a new Skybridge project by cloning the starter template.
+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 . --overwrite
+  create-skybridge my-app --repo github:alpic-ai/skybridge/examples/ecom-carousel
+  create-skybridge . --overwrite --immediate
 `;
-function run([command, ...args], options) {
-    if (!command) {
-        throw new Error("Command is required");
-    }
-    const { status, error } = spawnSync(command, args, options);
-    if (status != null && status > 0) {
-        process.exit(status);
-    }
-    if (error) {
-        console.error(`\n${command} ${args.join(" ")} error!`);
-        console.error(error);
-        process.exit(1);
-    }
-}
-async function init() {
+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]
-        ? formatTargetDir(String(argv._[0]))
+        ? sanitizeTargetDir(String(argv._[0]))
         : undefined;
+    const argRepo = argv.repo;
     const argOverwrite = argv.overwrite;
+    const argImmediate = argv.immediate;
     const help = argv.help;
     if (help) {
         console.log(helpMessage);
@@ -57,20 +53,21 @@ async function init() {
         if (interactive) {
             const projectName = await prompts.text({
                 message: "Project name:",
-                defaultValue: defaultTargetDir,
-                placeholder: defaultTargetDir,
+                defaultValue: defaultProjectName,
+                placeholder: defaultProjectName,
                 validate: (value) => {
-                    return value.length === 0 || formatTargetDir(value).length > 0
+                    return value.length === 0 || sanitizeTargetDir(value).length > 0
                         ? undefined
                         : "Invalid project name";
                 },
             });
-            if (prompts.isCancel(projectName))
+            if (prompts.isCancel(projectName)) {
                 return cancel();
-            targetDir = formatTargetDir(projectName);
+            }
+            targetDir = sanitizeTargetDir(projectName);
         }
         else {
-            targetDir = defaultTargetDir;
+            targetDir = defaultProjectName;
         }
     }
     // 2. Handle directory if exist and not empty
@@ -94,8 +91,9 @@ async function init() {
                         },
                     ],
                 });
-                if (prompts.isCancel(res))
+                if (prompts.isCancel(res)) {
                     return cancel();
+                }
                 overwrite = res;
             }
             else {
@@ -111,30 +109,121 @@ async function init() {
                 return;
         }
     }
-    const root = path.join(cwd, targetDir);
-    // 3. Clone the repository
-    prompts.log.step(`Cloning template from ${TEMPLATE_REPO}...`);
+    const root = path.join(process.cwd(), targetDir);
+    // 3. Download from repo or copy template
     try {
-        // Clone directly to target directory
-        run(["git", "clone", "--depth", "1", TEMPLATE_REPO, root], {
-            stdio: "inherit",
-        });
-        // Remove .git directory to start fresh
-        const gitDir = path.join(root, ".git");
-        if (fs.existsSync(gitDir)) {
-            fs.rmSync(gitDir, { recursive: true, force: true });
+        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}`);
-        prompts.outro(`Done! Next steps:\n\n  cd ${targetDir}\n  pnpm install\n  pnpm dev`);
     }
     catch (error) {
-        prompts.log.error("Failed to clone 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 ${pkgManager} and start now?`,
+            });
+            if (prompts.isCancel(immediateResult)) {
+                return cancel();
+            }
+            immediate = immediateResult;
+        }
+        else {
+            immediate = false;
+        }
+    }
+    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;
+    }
+    prompts.log.step(`Installing dependencies with ${pkgManager}...`);
+    run(installCmd, {
+        stdio: "inherit",
+        cwd: root,
+    });
+    prompts.log.step("Starting dev server...");
+    run(runCmd, {
+        stdio: "inherit",
+        cwd: root,
+    });
+}
+function run([command, ...args], options) {
+    const { status, error } = spawnSync(command, args, options);
+    if (status != null && status > 0) {
+        process.exit(status);
+    }
+    if (error) {
+        console.error(`\n${command} ${args.join(" ")} error!`);
         console.error(error);
         process.exit(1);
     }
 }
-function formatTargetDir(targetDir) {
-    return targetDir.trim().replace(/\/+$/g, "");
+function sanitizeTargetDir(targetDir) {
+    return (targetDir
+        .trim()
+        // Only keep alphanumeric, dash, underscore, dot, @, /
+        .replace(/[^a-zA-Z0-9\-_.@/]/g, "")
+        // Prevent path traversal
+        .replace(/\.\./g, "")
+        // Collapse multiple slashes
+        .replace(/\/+/g, "/")
+        // Remove leading/trailing slashes
+        .replace(/^\/+|\/+$/g, ""));
 }
 function isEmpty(path) {
     const files = fs.readdirSync(path);
@@ -151,7 +240,3 @@ function emptyDir(dir) {
         fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
     }
 }
-init().catch((e) => {
-    console.error(e);
-    process.exit(1);
-});

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,33 @@
+import { randomBytes } from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { init } from "./index.js";
+describe("create-skybridge", () => {
+    let tempDirName;
+    beforeEach(() => {
+        tempDirName = `test-${randomBytes(2).toString("hex")}`;
+    });
+    afterEach(async () => {
+        await fs.rm(path.join(process.cwd(), tempDirName), {
+            recursive: true,
+            force: true,
+        });
+    });
+    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/index.js

@@ -1,3 +1,8 @@
 #!/usr/bin/env node
 
-import "./dist/index.js";
+import { init } from "./dist/index.js";
+
+init().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/package.json

@@ -1,27 +1,34 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.0",
+  "version": "0.0.0-dev.0005b31",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alpic-ai/skybridge.git"
+  },
   "bin": {
-    "create-skybridge": "dist/index.js"
+    "create-skybridge": "index.js"
   },
   "files": [
     "index.js",
-    "dist"
+    "dist",
+    "template"
   ],
   "dependencies": {
     "@clack/prompts": "^0.11.0",
+    "giget": "^2.0.0",
     "mri": "^1.2.0"
   },
   "devDependencies": {
-    "@types/node": "^25.0.3",
-    "picocolors": "^1.1.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.17"
   },
   "scripts": {
-    "build": "tsc && echo '#!/usr/bin/env node' | cat - dist/index.js > temp && mv temp dist/index.js",
+    "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

@@ -0,0 +1,77 @@
+# Skybridge Starter
+
+A minimal TypeScript template for building ChatGPT and MCP Apps with widget rendering.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 24+
+- HTTP tunnel such as [ngrok](https://ngrok.com/download)
+
+### Local Development
+
+#### 1. Install
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+# or
+bun install
+```
+
+#### 2. Start your local server
+
+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 the host)
+
+#### 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`)
+
+### 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
+
+#### 2. Edit widgets with Hot Module Replacement (HMR)
+
+Edit and save components in `web/src/widgets/` — changes appear instantly in the host
+
+#### 3. Edit server code
+
+Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
+
+## 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`)
+
+## Resources
+
+- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
+- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
+- [Alpic Documentation](https://docs.alpic.ai/)

package/template/_gitignore

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

package/template/alpic.json

@@ -0,0 +1,3 @@
+{
+  "$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

@@ -0,0 +1,38 @@
+{
+  "name": "apps-sdk-template",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Alpic MCP Server Template",
+  "type": "module",
+  "scripts": {
+    "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": {
+    "@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

@@ -0,0 +1,42 @@
+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";
+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") {
+  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);
+  }
+});
+
+process.on("SIGINT", async () => {
+  console.log("Server shutdown complete");
+  process.exit(0);
+});

package/template/server/src/middleware.ts

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,61 @@
+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;

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/helpers.ts

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

package/template/web/src/index.css

@@ -0,0 +1,151 @@
+@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: radial-gradient(
+    circle at 30% 30%,
+    #454565 0%,
+    #1c1c30 40%,
+    #0a0a10 100%
+  );
+  border-radius: 50%;
+  width: 12rem;
+  height: 12rem;
+  display: flex;
+  flex-direction: column;
+  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: 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-family: "Playfair Display", serif;
+  font-style: italic;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 0.5rem;
+  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

@@ -0,0 +1,24 @@
+import "@/index.css";
+
+import { mountWidget } from "skybridge/web";
+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>
+      </div>
+    </div>
+  );
+}
+
+export default Magic8Ball;
+
+mountWidget(<Magic8Ball />);

package/template/web/vite.config.ts

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