create-skybridge 0.0.0-next.d563fa4 → 0.0.0-next.da3047d

package/dist/index.js

@@ -7,7 +7,7 @@ import mri from "mri";
 const OUTPUT_TAIL_LINES = 10;
 const DEFAULT_PROJECT_NAME = "skybridge-project";
 const PACKAGE_MANAGERS = ["bun", "deno", "npm", "pnpm", "yarn"];
-const TEMPLATES = ["demo", "blank"];
+const TEMPLATES = ["demo", "blank", "ecom"];
 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]
@@ -19,6 +19,7 @@ Arguments:
 
 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
@@ -60,7 +61,15 @@ const Spinner = {
 };
 export async function init(args = process.argv.slice(2)) {
     const argv = mri(args, {
-        boolean: ["help", "blank", "overwrite", "skip-skills", "start", "yes"],
+        boolean: [
+            "help",
+            "blank",
+            "ecom",
+            "overwrite",
+            "skip-skills",
+            "start",
+            "yes",
+        ],
         string: ["pm"],
         alias: { h: "help" },
     });
@@ -121,30 +130,43 @@ export async function init(args = process.argv.slice(2)) {
     if (argv.blank) {
         template = "blank";
     }
-    else if (yes) {
-        template = "demo";
+    if (argv.ecom) {
+        if (template) {
+            abort("Cannot specify both --blank and --ecom.");
+        }
+        template = "ecom";
     }
-    else {
-        const choice = await prompts.select({
-            message: "Choose a template:",
-            options: [
-                {
-                    value: "demo",
-                    label: "demo",
-                    hint: "starter code with tools and UI",
-                },
-                {
-                    value: "blank",
-                    label: "blank",
-                    hint: "minimal boilerplate without tools",
-                },
-            ],
-            initialValue: "demo",
-        });
-        if (prompts.isCancel(choice)) {
-            return cancel();
+    if (!template) {
+        if (yes) {
+            template = "demo";
+        }
+        else {
+            const choice = await prompts.select({
+                message: "Choose a template:",
+                options: [
+                    {
+                        value: "demo",
+                        label: "demo",
+                        hint: "starter code with tools and UI",
+                    },
+                    {
+                        value: "blank",
+                        label: "blank",
+                        hint: "minimal boilerplate without tools",
+                    },
+                    {
+                        value: "ecom",
+                        label: "ecom",
+                        hint: "ecommerce template with product search tool and carousel view",
+                    },
+                ],
+                initialValue: "demo",
+            });
+            if (prompts.isCancel(choice)) {
+                return cancel();
+            }
+            template = choice;
         }
-        template = choice;
     }
     // 4. Copy template
     const root = path.resolve(targetDir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-next.d563fa4",
+  "version": "0.0.0-next.da3047d",
   "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,12 +12,12 @@
     "deploy": "alpic deploy"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.29.0",
-    "skybridge": "^0.0.0-next.d563fa4",
+    "skybridge": "^0.0.0-next.da3047d",
     "vite": "^8.1.5"
   },
   "devDependencies": {
-    "@skybridge/devtools": "^1.2.7",
+    "@skybridge/devtools": "^0.0.0-next.da3047d",
+    "@skybridge/vite-plugin": "^0.0.0-next.da3047d",
     "@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/blank/vite.config.ts

@@ -1,4 +1,4 @@
-import { skybridge } from "skybridge/vite";
+import { skybridge } from "@skybridge/vite-plugin";
 import { defineConfig } from "vite";
 
 export default defineConfig({

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,31 +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-next.d563fa4",
+    "skybridge": "^0.0.0-next.da3047d",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vite": "^8.1.5",
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@skybridge/devtools": "^1.2.7",
+    "@ai-sdk/anthropic": "^2.0.90",
+    "@skybridge/devtools": "^0.0.0-next.da3047d",
+    "@skybridge/test": "beta",
+    "@skybridge/vite-plugin": "^0.0.0-next.da3047d",
     "@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

@@ -1,11 +1,11 @@
 import path from "node:path";
+import { skybridge } from "@skybridge/vite-plugin";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/vite";
 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/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.git
+dist
+.env*

package/templates/ecom/.env.template

@@ -0,0 +1,7 @@
+# Copy to .env and fill in. Sourced by the server at startup.
+API_KEY=
+
+# Only for the Shopify catalog provider (src/catalog/shopify.ts).
+# The token is the public Storefront API access token, not an Admin key.
+SHOPIFY_STORE_DOMAIN=
+SHOPIFY_STOREFRONT_TOKEN=

package/templates/ecom/.ladle/components.tsx

@@ -0,0 +1,26 @@
+import type { GlobalProvider } from "@ladle/react";
+import "../src/index.css";
+import { viewFrame } from "../src/components/view-frame.css";
+import { darkTheme, lightTheme } from "../src/design/tokens";
+import { cx } from "../src/lib/cx";
+
+/**
+ * Ladle's built-in theme toggle (sun/moon in the toolbar) drives
+ * globalState.theme. We reuse it to flip the widget's own palette, so the
+ * preview theme and the widget theme always match. The Provider applies the
+ * real ViewFrame surface (viewFrame + theme class), and index.css loads the
+ * brand @font-face rules, so stories preview against the actual frame.
+ */
+export const Provider: GlobalProvider = ({ children, globalState }) => {
+  const themeClass = globalState.theme === "dark" ? darkTheme : lightTheme;
+
+  return (
+    <div
+      className={cx(viewFrame, themeClass)}
+      data-theme={globalState.theme}
+      style={{ minHeight: "100vh", padding: 32 }}
+    >
+      {children}
+    </div>
+  );
+};

package/templates/ecom/.ladle/config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: "src/**/*.stories.{ts,tsx}",
+  viteConfig: ".ladle/vite.config.ts",
+  addons: {
+    theme: {
+      enabled: true,
+      defaultState: "light",
+    },
+  },
+};

package/templates/ecom/.ladle/vite.config.ts

@@ -0,0 +1,11 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+/**
+ * Ladle-only vite config. Intentionally omits the Skybridge plugin (which
+ * transforms MCP view boilerplate and crashes Ladle's bundler) and the
+ * @vitejs/plugin-react call (Ladle provides its own).
+ */
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+});

package/templates/ecom/AGENTS.md

@@ -0,0 +1,2 @@
+This is an MCP ecommerce app built with Skybridge.
+ALWAYS use the `chatgpt-app-builder` skill when planning or updating the codebase: see its "ecommerce" reference.

package/templates/ecom/Dockerfile

@@ -0,0 +1,53 @@
+# syntax=docker/dockerfile:1
+
+# Dockerfile for a Skybridge MCP server.
+#
+# Detects npm, yarn, or pnpm from the lockfile in your project.
+# (For bun or deno, adapt the install/build/prune commands below.)
+
+# Build stage: install deps, compile the app, then prune dev deps.
+FROM node:24.18.0-slim AS build
+WORKDIR /app
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN --mount=type=cache,target=/root/.npm \
+    --mount=type=cache,target=/usr/local/share/.cache/yarn \
+    --mount=type=cache,target=/root/.local/share/pnpm/store \
+    if [ -f package-lock.json ]; then \
+      npm ci; \
+    elif [ -f yarn.lock ]; then \
+      corepack enable yarn && yarn install --frozen-lockfile; \
+    elif [ -f pnpm-lock.yaml ]; then \
+      corepack enable pnpm && pnpm install --frozen-lockfile; \
+    else \
+      echo "No lockfile found." && exit 1; \
+    fi
+
+ENV NODE_ENV=production
+
+COPY . .
+RUN if [ -f package-lock.json ]; then \
+      npm run build && npm prune --omit=dev; \
+    elif [ -f yarn.lock ]; then \
+      corepack enable yarn && yarn build && yarn install --frozen-lockfile --production=true; \
+    elif [ -f pnpm-lock.yaml ]; then \
+      corepack enable pnpm && pnpm build && pnpm prune --prod; \
+    fi
+
+# Runtime stage: copy built artifacts and prod deps, run as non-root.
+FROM node:24.18.0-slim AS runtime
+WORKDIR /app
+ENV NODE_ENV=production
+
+USER node
+
+COPY --from=build --chown=node:node /app/node_modules ./node_modules
+COPY --from=build --chown=node:node /app/dist ./dist
+COPY --from=build --chown=node:node /app/package.json ./package.json
+
+EXPOSE 3000
+
+# Run the built server directly rather than via `npm start` / `skybridge start`.
+# Each wrapper adds a process layer that can swallow SIGTERM, which makes
+# graceful shutdowns time out on platforms like Cloud Run, Fly, and k8s.
+CMD ["node", "dist/__entry.js"]