create-skybridge 0.0.0-dev.df0cfdd → 0.0.0-dev.df1e961

package/dist/index.js

@@ -1,4 +1,5 @@
 import fs from "node:fs";
+import os from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import * as prompts from "@clack/prompts";
@@ -8,6 +9,7 @@ const OUTPUT_TAIL_LINES = 10;
 const DEFAULT_PROJECT_NAME = "skybridge-project";
 const PACKAGE_MANAGERS = ["bun", "deno", "npm", "pnpm", "yarn"];
 const TEMPLATES = ["demo", "blank", "ecom"];
+const REPO = "alpic-ai/skybridge";
 const pkg = JSON.parse(fs.readFileSync(fileURLToPath(new URL("../package.json", import.meta.url)), "utf-8"));
 const version = pkg.version;
 const HELP_MESSAGE = `Usage: skybridge create [path] [options]
@@ -18,14 +20,15 @@ Arguments:
   path           Where the project will be created. Prompted when omitted.
 
 Options:
-  --blank        scaffold a minimal project without demo tools and views
-  --ecom         scaffold the ecommerce template (search products, render carousel)
-  --overwrite    remove existing files if target directory is not empty
-  --pm <choice>  package manager to use (choices: ${PACKAGE_MANAGERS.join(", ")}. default to npm when none is provided or infered)
-  --skip-skills  skip installing coding agent skills
-  --start        start dev server
-  --yes          skip prompts and use default values for unprovided options
-  --help         display this help message
+  --blank           scaffold a minimal project without demo tools and views
+  --ecom            scaffold the ecommerce template (search products, render carousel)
+  --example <name>  scaffold a copy of examples/<name> from the latest Skybridge release
+  --overwrite       remove existing files if target directory is not empty
+  --pm <choice>     package manager to use (choices: ${PACKAGE_MANAGERS.join(", ")}. default to npm when none is provided or infered)
+  --skip-skills     skip installing coding agent skills
+  --start           start dev server
+  --yes             skip prompts and use default values for unprovided options
+  --help            display this help message
 
 Non-interactive usage:
   Mandatory: path argument and --yes option
@@ -70,7 +73,7 @@ export async function init(args = process.argv.slice(2)) {
             "start",
             "yes",
         ],
-        string: ["pm"],
+        string: ["pm", "example"],
         alias: { h: "help" },
     });
     if (argv.help) {
@@ -82,6 +85,13 @@ export async function init(args = process.argv.slice(2)) {
     if (yes && !targetDir) {
         abort("The target directory is required in non-interactive mode.", "Example: skybridge create my-app --yes");
     }
+    if (argv.example !== undefined && !/^[\w.-]+$/.test(argv.example)) {
+        abort("--example requires a name, e.g. --example auth-descope.");
+    }
+    if (argv.example && (argv.blank || argv.ecom)) {
+        abort("Cannot combine --example with --blank or --ecom.");
+    }
+    const example = argv.example;
     let pm = parsePackageManager(argv.pm || "");
     if (argv.pm && !pm) {
         abort(`Invalid --pm value "${argv.pm}". Expected one of: ${PACKAGE_MANAGERS.join(", ")}.`);
@@ -104,6 +114,18 @@ export async function init(args = process.argv.slice(2)) {
         targetDir = sanitizeTargetDir(choice);
     }
     // 2. Existing-directory handling
+    let downloaded;
+    if (example) {
+        Spinner.start(`Downloading ${example} example`);
+        try {
+            downloaded = await downloadExample(example);
+            Spinner.stop(`Downloaded ${example} example`);
+        }
+        catch (error) {
+            Spinner.error(`Failed to download ${example} example`);
+            abort(error instanceof Error ? error.message : String(error));
+        }
+    }
     if (fs.existsSync(targetDir) && !isEmpty(targetDir)) {
         if (argv.overwrite) {
             emptyDir(targetDir);
@@ -136,7 +158,7 @@ export async function init(args = process.argv.slice(2)) {
         }
         template = "ecom";
     }
-    if (!template) {
+    if (!template && !example) {
         if (yes) {
             template = "demo";
         }
@@ -170,23 +192,31 @@ export async function init(args = process.argv.slice(2)) {
     }
     // 4. Copy template
     const root = path.resolve(targetDir);
-    Spinner.start(`Copying ${template} template`);
+    const templatesDir = fileURLToPath(new URL("../templates", import.meta.url));
+    const source = downloaded?.source ?? path.join(templatesDir, template ?? "demo");
+    Spinner.start(`Copying ${example ?? template} template`);
     try {
-        const templateDir = fileURLToPath(new URL(`../templates/${template}`, import.meta.url));
-        fs.cpSync(templateDir, root, {
+        fs.cpSync(source, root, {
             recursive: true,
             filter: (src) => [".npmrc"].every((file) => !src.endsWith(file)),
         });
+        const gitignore = path.join(root, ".gitignore");
         const gitignoreSource = path.join(root, "_gitignore");
         if (fs.existsSync(gitignoreSource)) {
-            fs.renameSync(gitignoreSource, path.join(root, ".gitignore"));
+            fs.renameSync(gitignoreSource, gitignore);
+        }
+        else if (!fs.existsSync(gitignore)) {
+            fs.copyFileSync(path.join(templatesDir, "demo", "_gitignore"), gitignore);
         }
-        Spinner.stop(`Copied ${template} template`);
+        Spinner.stop(`Copied ${example ?? template} template`);
     }
     catch (error) {
         Spinner.error("Failed to copy template");
         abort(String(error));
     }
+    finally {
+        downloaded?.cleanup();
+    }
     // 5. Set package.json name to the project dir basename
     try {
         const pkgPath = path.join(root, "package.json");
@@ -340,6 +370,62 @@ ${scriptCommand(pm, "deploy")}`);
    Chat: https://discord.alpic.ai
    Docs: https://docs.skybridge.tech`);
 }
+async function fetchJson(url) {
+    const res = await fetch(url, {
+        headers: { accept: "application/vnd.github+json" },
+    });
+    if (!res.ok) {
+        throw new Error(`GitHub returned ${res.status} for ${url}.`);
+    }
+    return res.json();
+}
+async function downloadExample(name) {
+    const api = `https://api.github.com/repos/${REPO}`;
+    const { tag_name: tag } = await fetchJson(`${api}/releases/latest`);
+    const entries = await fetchJson(`${api}/contents/examples?ref=${tag}`);
+    const available = entries
+        .filter((entry) => entry.type === "dir")
+        .map((entry) => entry.name);
+    if (!available.includes(name)) {
+        throw new Error(`Unknown example "${name}". Available examples:\n  ${available.join("\n  ")}`);
+    }
+    const res = await fetch(`https://codeload.github.com/${REPO}/tar.gz/${tag}`);
+    if (!res.ok) {
+        throw new Error(`GitHub returned ${res.status} while fetching ${REPO}.`);
+    }
+    const archive = Buffer.from(await res.arrayBuffer());
+    const tmp = fs.mkdtempSync(path.join(os.tmpdir(), "skybridge-example-"));
+    const cleanup = () => fs.rmSync(tmp, { recursive: true, force: true });
+    try {
+        const tar = spawn("tar", ["-xz", "-C", tmp], {
+            stdio: ["pipe", "ignore", "pipe"],
+        });
+        let stderr = "";
+        tar.stderr?.on("data", (chunk) => {
+            stderr += chunk.toString();
+        });
+        const exit = new Promise((resolve, reject) => {
+            tar.on("error", (error) => reject(error.code === "ENOENT"
+                ? new Error("`tar` is required to extract the example.")
+                : error));
+            tar.on("close", (status) => status === 0
+                ? resolve()
+                : reject(new Error(`tar exited with ${status}: ${stderr.trim()}`)));
+        });
+        tar.stdin?.on("error", () => { });
+        tar.stdin?.end(archive);
+        await exit;
+        const [extracted] = fs.readdirSync(tmp);
+        if (!extracted) {
+            throw new Error("Downloaded archive is empty.");
+        }
+        return { source: path.join(tmp, extracted, "examples", name), cleanup };
+    }
+    catch (error) {
+        cleanup();
+        throw error;
+    }
+}
 function cancel() {
     prompts.cancel("Operation cancelled");
     process.exit(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.df0cfdd",
+  "version": "0.0.0-dev.df1e961",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",

package/templates/blank/README.md

@@ -48,7 +48,8 @@ This command starts:
 
 ```
 ├── src/
-│   ├── server.ts         # Server entry point
+│   ├── index.ts          # Entry point (starts the app)
+│   ├── server.ts         # App definition (tools, views)
 │   └── helpers.ts        # Shared utilities
 ├── vite.config.ts
 ├── alpic.json            # Deployment config

package/templates/blank/package.json

@@ -12,13 +12,13 @@
     "deploy": "alpic deploy"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.29.0",
-    "skybridge": "^0.0.0-dev.df0cfdd",
-    "vite": "^8.1.5"
+    "skybridge": "^0.0.0-dev.df1e961",
+    "vite": "^8.1.5",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@skybridge/devtools": "^1.2.7",
-    "@skybridge/vite-plugin": "^0.0.0-dev.df0cfdd",
+    "@skybridge/devtools": "^0.0.0-dev.df1e961",
+    "@skybridge/vite-plugin": "^0.0.0-dev.df1e961",
     "@types/node": "^24.13.3",
     "alpic": "^1.155.0",
     "tsx": "^4.23.1",

package/templates/blank/src/index.ts

@@ -0,0 +1,3 @@
+import { app } from "./server.js";
+
+export default await app.run();

package/templates/blank/src/server.ts

@@ -1,16 +1,12 @@
-import { McpServer } from "skybridge/server";
-
-const server = new McpServer(
-  {
-    name: "skybridge-blank",
-    version: "0.0.1",
-  },
-  { capabilities: {} },
-);
+import { Skybridge } from "skybridge/server";
 
 // Register tools with `server.registerTool(...)`.
 // Docs: https://docs.skybridge.tech/api-reference/register-tool
 
-export default await server.run();
+export const app = new Skybridge({
+  name: "skybridge-blank",
+  version: "0.0.1",
+  handler: (server) => server,
+});
 
-export type AppType = typeof server;
+export type AppType = typeof app;

package/templates/demo/README.md

@@ -48,11 +48,13 @@ This command starts:
 
 ```
 ├── src/
-│   ├── server.ts         # Server entry point
+│   ├── index.ts          # Entry point (starts the app)
+│   ├── server.ts         # App definition (tools, views)
 │   ├── views/            # React components (one per view)
 │   ├── components/       # Shared UI components
 │   ├── helpers.ts        # Shared utilities
 │   └── index.css         # Global styles
+├── evals/                # Model-driven scenarios (pnpm evals, needs ANTHROPIC_API_KEY)
 ├── vite.config.ts
 ├── alpic.json            # Deployment config
 └── package.json

package/templates/demo/evals/start.eval.ts

@@ -0,0 +1,11 @@
+import { anthropic } from "@ai-sdk/anthropic";
+import { start } from "@skybridge/test";
+import { expect, it } from "vitest";
+import { app } from "../src/server.js";
+
+it("reaches the onboarding tool from a natural prompt", async () => {
+  const chat = await start({ app, model: anthropic("claude-sonnet-4-5") });
+  await chat.send("Get me started with Skybridge, my name is Ada");
+
+  expect.chat(chat).toHaveCalledToolOnce("start");
+});

package/templates/demo/node_modules/.bin/vitest

@@ -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/vitest@4.1.10_@opentelemetry+api@1.9.1_@types+node@24.13.3_@vitest+ui@4.1.10_jsdom@29.1_07746666baa47915e6a10611198811a1/node_modules/vitest/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vitest@4.1.10_@opentelemetry+api@1.9.1_@types+node@24.13.3_@vitest+ui@4.1.10_jsdom@29.1_07746666baa47915e6a10611198811a1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vitest@4.1.10_@opentelemetry+api@1.9.1_@types+node@24.13.3_@vitest+ui@4.1.10_jsdom@29.1_07746666baa47915e6a10611198811a1/node_modules/vitest/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vitest@4.1.10_@opentelemetry+api@1.9.1_@types+node@24.13.3_@vitest+ui@4.1.10_jsdom@29.1_07746666baa47915e6a10611198811a1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"
+else
+  exec node  "$basedir/../vitest/vitest.mjs" "$@"
+fi

package/templates/demo/package.json

@@ -9,32 +9,37 @@
     "dev:tunnel": "skybridge dev --tunnel",
     "build": "skybridge build",
     "start": "skybridge start",
-    "deploy": "alpic deploy"
+    "deploy": "alpic deploy",
+    "evals": "vitest run evals",
+    "evals:types": "tsc --noEmit -p tsconfig.evals.json"
   },
   "dependencies": {
     "@alpic-ai/ui": "^1.155.0",
-    "@modelcontextprotocol/sdk": "^1.29.0",
     "lucide-react": "^1.25.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "skybridge": "^0.0.0-dev.df0cfdd",
+    "skybridge": "^0.0.0-dev.df1e961",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vite": "^8.1.5",
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@skybridge/devtools": "^1.2.7",
-    "@skybridge/vite-plugin": "^0.0.0-dev.df0cfdd",
+    "@ai-sdk/anthropic": "^2.0.90",
+    "@skybridge/devtools": "^0.0.0-dev.df1e961",
+    "@skybridge/test": "beta",
+    "@skybridge/vite-plugin": "^0.0.0-dev.df1e961",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
+    "ai": "^5.0.0",
     "alpic": "^1.155.0",
     "tailwindcss": "^4.3.3",
     "tsx": "^4.23.1",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   },
   "engines": {
     "node": ">=24.18.0"

package/templates/demo/src/index.ts

@@ -0,0 +1,3 @@
+import { app } from "./server.js";
+
+export default await app.run();

package/templates/demo/src/server.ts

@@ -1,94 +1,92 @@
-import { McpServer } from "skybridge/server";
+import { Skybridge } from "skybridge/server";
 import { z } from "zod";
 
-const server = new McpServer(
-  {
-    name: "alpic-openai-app",
-    version: "0.0.1",
-  },
-  { capabilities: {} },
-)
-  .registerTool(
-    {
-      name: "start",
-      description: "Onboard Skybridge",
-      inputSchema: {
-        name: z.string().optional().describe("The user name."),
-      },
-      annotations: {
-        title: "Start Skybridge onboarding",
-        readOnlyHint: true,
-        destructiveHint: false,
-        openWorldHint: false,
-      },
-      _meta: {
-        "openai/toolInvocation/invoking": "Starting the Skybridge onboarding…",
-        "openai/toolInvocation/invoked": "Onboarding ready.",
-      },
-      view: {
-        component: "onboarding",
-        // Replace with the URL your widget will be served from in production.
-        domain: "https://skybridge.tech",
-        description: "Onboarding deck",
-        csp: {
-          resourceDomains: [
-            "https://fonts.googleapis.com",
-            "https://fonts.gstatic.com",
-          ],
-          redirectDomains: ["https://docs.skybridge.tech"],
+export const app = new Skybridge({
+  name: "alpic-openai-app",
+  version: "0.0.1",
+  handler: (server) =>
+    server
+      .registerTool(
+        {
+          name: "start",
+          description: "Onboard Skybridge",
+          inputSchema: {
+            name: z.string().optional().describe("The user name."),
+          },
+          annotations: {
+            title: "Start Skybridge onboarding",
+            readOnlyHint: true,
+            destructiveHint: false,
+            openWorldHint: false,
+          },
+          _meta: {
+            "openai/toolInvocation/invoking":
+              "Starting the Skybridge onboarding…",
+            "openai/toolInvocation/invoked": "Onboarding ready.",
+          },
+          view: {
+            component: "onboarding",
+            // Replace with the URL your widget will be served from in production.
+            domain: "https://skybridge.tech",
+            description: "Onboarding deck",
+            csp: {
+              resourceDomains: [
+                "https://fonts.googleapis.com",
+                "https://fonts.gstatic.com",
+              ],
+              redirectDomains: ["https://docs.skybridge.tech"],
+            },
+          },
         },
-      },
-    },
-    async ({ name }) => {
-      return {
-        structuredContent: { name },
-        content: [{ type: "text", text: `User name: ${name ?? "friend"}` }],
-        isError: false,
-      };
-    },
-  )
-  .registerTool(
-    {
-      name: "get-fortune-cookie",
-      description: "Get fortune cookie",
-      annotations: {
-        title: "Get a fortune cookie",
-        readOnlyHint: true,
-        destructiveHint: false,
-        openWorldHint: false,
-      },
-      _meta: {
-        "openai/toolInvocation/invoking": "Cracking open a fortune cookie…",
-        "openai/toolInvocation/invoked": "Fortune revealed.",
-      },
-    },
-    async () => {
-      const predictions = [
-        "A pleasant surprise is waiting for you.",
-        "Your hard work will soon pay off.",
-        "An unexpected friendship will brighten your week.",
-        "The best is yet to come.",
-        "A small step today leads to a giant leap tomorrow.",
-        "Trust your instincts: they are sharper than you think.",
-        "Adventure awaits just around the corner.",
-        "A long-forgotten idea will return with great success.",
-        "Kindness given today will be returned threefold.",
-        "Something you lost will soon be found.",
-      ];
-      const prediction =
-        predictions[Math.floor(Math.random() * predictions.length)];
-
-      // simulate backend work
-      await new Promise((resolve) => setTimeout(resolve, 1000));
+        async ({ name }) => {
+          return {
+            structuredContent: { name },
+            content: [{ type: "text", text: `User name: ${name ?? "friend"}` }],
+            isError: false,
+          };
+        },
+      )
+      .registerTool(
+        {
+          name: "get-fortune-cookie",
+          description: "Get fortune cookie",
+          annotations: {
+            title: "Get a fortune cookie",
+            readOnlyHint: true,
+            destructiveHint: false,
+            openWorldHint: false,
+          },
+          _meta: {
+            "openai/toolInvocation/invoking": "Cracking open a fortune cookie…",
+            "openai/toolInvocation/invoked": "Fortune revealed.",
+          },
+        },
+        async () => {
+          const predictions = [
+            "A pleasant surprise is waiting for you.",
+            "Your hard work will soon pay off.",
+            "An unexpected friendship will brighten your week.",
+            "The best is yet to come.",
+            "A small step today leads to a giant leap tomorrow.",
+            "Trust your instincts: they are sharper than you think.",
+            "Adventure awaits just around the corner.",
+            "A long-forgotten idea will return with great success.",
+            "Kindness given today will be returned threefold.",
+            "Something you lost will soon be found.",
+          ];
+          const prediction =
+            predictions[Math.floor(Math.random() * predictions.length)];
 
-      return {
-        structuredContent: { prediction },
-        content: [{ type: "text", text: prediction }],
-        isError: false,
-      };
-    },
-  );
+          // simulate backend work
+          await new Promise((resolve) => setTimeout(resolve, 1000));
 
-export default await server.run();
+          return {
+            structuredContent: { prediction },
+            content: [{ type: "text", text: prediction }],
+            isError: false,
+          };
+        },
+      ),
+});
 
-export type AppType = typeof server;
+export type AppType = typeof app;

package/templates/demo/src/views/onboarding.tsx

@@ -1,7 +1,7 @@
 import "@/index.css";
 
 import { useState } from "react";
-import { useLayout } from "skybridge/web";
+import { useUser } from "skybridge/web";
 import Nav from "./components/nav.js";
 import Progress from "./components/progress.js";
 import Outro from "./components/steps/outro.js";
@@ -18,8 +18,8 @@ const STEPS = [
 ] as const;
 
 export default function Onboarding() {
-  // useLayout: read host layout info (theme, display mode, locale, ...).
-  const { theme } = useLayout();
+  // useUser: read user environment info (theme, locale, user agent).
+  const { theme } = useUser();
 
   const [step, setStep] = useState(0);
   const { img } = useMascot();

package/templates/demo/tsconfig.evals.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "incremental": false
+  },
+
+  "include": ["src", "evals", ".skybridge/**/*.d.ts"]
+}

package/templates/demo/vite.config.ts

@@ -5,7 +5,7 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [skybridge(), react(), tailwindcss()],
+  plugins: [skybridge({ evals: {} }), react(), tailwindcss()],
   server: {
     forwardConsole: {
       unhandledErrors: true,
@@ -14,7 +14,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@": path.resolve(import.meta.dirname, "./src"),
     },
   },
 });

package/templates/ecom/README.md

@@ -48,7 +48,8 @@ This command starts:
 
 ```
 ├── src/
-│   ├── server.ts         # Server entry point
+│   ├── index.ts          # Entry point (starts the app)
+│   ├── server.ts         # App definition (tools, views)
 │   └── helpers.ts        # Shared utilities
 ├── vite.config.ts
 ├── alpic.json            # Deployment config

package/templates/ecom/node_modules/.bin/ladle

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@swc+helpers@0.5.23_@types+node@24.13.3_@types+react@19.2.17_jiti@2._9105ecfa2ac4b29fe87a036530c3844f/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@swc+helpers@0.5.23_@types+node@24.13.3_@types+react@19.2.17_jiti@2._9105ecfa2ac4b29fe87a036530c3844f/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.3_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_8c0d7eb4f29a667fc68ef4c081ca0a73/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/@ladle+react@5.1.1_@swc+helpers@0.5.23_@types+node@24.13.3_@types+react@19.2.17_jiti@2._9105ecfa2ac4b29fe87a036530c3844f/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@swc+helpers@0.5.23_@types+node@24.13.3_@types+react@19.2.17_jiti@2._9105ecfa2ac4b29fe87a036530c3844f/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../@ladle/react/lib/cli/cli.js" "$@"

package/templates/ecom/package.json

@@ -16,14 +16,14 @@
   "dependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "skybridge": "^0.0.0-dev.df0cfdd",
+    "skybridge": "^0.0.0-dev.df1e961",
     "vite": "^8.1.3",
     "zod": "^4.4.3"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",
-    "@skybridge/devtools": "^1.2.4",
-    "@skybridge/vite-plugin": "^0.0.0-dev.df0cfdd",
+    "@skybridge/devtools": "^0.0.0-dev.df1e961",
+    "@skybridge/vite-plugin": "^0.0.0-dev.df1e961",
     "@types/node": "^24.13.2",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

package/templates/ecom/src/components/view-frame.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "react";
-import { useLayout } from "skybridge/web";
+import { useUser } from "skybridge/web";
 import { darkTheme, lightTheme } from "../design/tokens";
 import { cx } from "../lib/cx";
 import { viewFrame } from "./view-frame.css";
@@ -10,8 +10,8 @@ import { viewFrame } from "./view-frame.css";
  * variables the color contract declares) and paints the base surface + font +
  * content color so descendants inherit from the DS instead of the host page.
  *
- * It follows the host theme via useLayout(). To lock the widget to one palette
- * (e.g. always light), drop useLayout and hardcode the theme class.
+ * It follows the host theme via useUser(). To lock the widget to one palette
+ * (e.g. always light), drop useUser and hardcode the theme class.
  *
  * Keep view entry files thin: render <ViewFrame> at the root and let this carry
  * the theme + base-style boilerplate.
@@ -19,7 +19,7 @@ import { viewFrame } from "./view-frame.css";
 type ViewFrameProps = HTMLAttributes<HTMLDivElement>;
 
 export function ViewFrame({ className, ...rest }: ViewFrameProps) {
-  const { theme } = useLayout();
+  const { theme } = useUser();
   const themeClass = theme === "dark" ? darkTheme : lightTheme;
 
   return <div {...rest} className={cx(themeClass, viewFrame, className)} />;

package/templates/ecom/src/index.ts

@@ -0,0 +1,3 @@
+import { app } from "./server.js";
+
+export default await app.run();

package/templates/ecom/src/server.ts

@@ -1,5 +1,5 @@
 import { existsSync } from "node:fs";
-import { McpServer } from "skybridge/server";
+import { Skybridge } from "skybridge/server";
 import { CAROUSEL_RANGE, MIN_SEARCH_ITERATIONS } from "./config.js";
 import {
   renderCarouselDefinition,
@@ -15,15 +15,12 @@ if (existsSync(".env")) {
   process.loadEnvFile();
 }
 
-const server = new McpServer(
-  {
-    // @todo: name and version your app.
-    name: "skybridge-ecom",
-    version: "0.0.1",
-  },
-  {
-    // @todo: adapt this server-wide prompt to your catalog.
-    instructions: `\
+export const app = new Skybridge({
+  // @todo: name and version your app.
+  name: "skybridge-ecom",
+  version: "0.0.1",
+  // @todo: adapt this server-wide prompt to your catalog.
+  instructions: `\
 Two phases:
 
 SEARCH: Call search-products ${MIN_SEARCH_ITERATIONS}+ times before presenting, never off one call. \
@@ -33,11 +30,10 @@ once the carousel renders.
 
 RENDER: After curating, call render-carousel with the chosen product IDs (aim for ${CAROUSEL_RANGE}). \
 Speak once it renders, then recommend products in carousel order.`,
-  },
-)
-  .registerTool(searchProductsDefinition, searchProductsHandler)
-  .registerTool(renderCarouselDefinition, renderCarouselHandler);
+  handler: (server) =>
+    server
+      .registerTool(searchProductsDefinition, searchProductsHandler)
+      .registerTool(renderCarouselDefinition, renderCarouselHandler),
+});
 
-export default await server.run();
-
-export type AppType = typeof server;
+export type AppType = typeof app;