create-skybridge 0.0.0-dev.94c22d0 → 0.0.0-dev.9520814

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,14 +1,20 @@
 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,
+      logLevels: ["error"],
+    },
+  },
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@": path.resolve(import.meta.dirname, "./src"),
     },
   },
 });

package/templates/ecom/.env.template

@@ -1,2 +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/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/alpic

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/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/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.157.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_8f13b9696a5fc8688953a3b2ccd28385/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../alpic/bin/run.js" "$@"

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.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_87a889c60e4b1fe9d02c5a43786e65ce/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_87a889c60e4b1fe9d02c5a43786e65ce/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.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_87a889c60e4b1fe9d02c5a43786e65ce/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_87a889c60e4b1fe9d02c5a43786e65ce/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/node_modules/.bin/vite

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"

package/templates/ecom/package.json

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

package/templates/ecom/src/catalog/index.ts

@@ -0,0 +1,19 @@
+// The catalog: the app's single data seam. Both tools read products through
+// these two functions, and nothing else in the app touches a backend.
+//
+// @todo: pick your provider. Ship one of the modules next to this file, or add
+// your own (same two exports, same types) and re-export it here:
+//   ./mock.js      placeholder catalog, no backend needed (default)
+//   ./shopify.js   Shopify Storefront API, set the SHOPIFY_* vars in .env
+//
+// Writing your own: `search(input)` returns a `SearchResult`, `getProducts(ids)`
+// resolves ids in the requested order (that is the display order, so resolve by
+// id, never by catalog order). Both map your backend's rows into `Product`s, and
+// how you group them depends on your catalog:
+//   - simple products: one `Product` with a single variant, `options: []`
+//   - grouped: one `Product` per product, `card` = union of its variants
+//   - one card per variant: `card` = that variant
+// Either way `variants` holds ALL variants the source returns for the product;
+// the detail view reads them so the client can switch variant. Order `options`
+// with the imagery-driving axis first (see `Product`: order is semantic).
+export { getProducts, search } from "./mock.js";

package/templates/ecom/src/catalog/mock.ts

@@ -0,0 +1,134 @@
+import type { SearchInput } from "../tools/search-products.js";
+import type { Product, SearchResult, Spec } from "../types.js";
+
+// Placeholder catalog provider, so both tools answer before a backend exists.
+// Images are inline SVG placeholders, so no CSP domain is needed.
+// @todo: delete this module once you point `./index.js` at a real provider.
+
+function shot(fill: string): string {
+  return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23${fill}'/%3E%3C/svg%3E`;
+}
+
+const JACKET_SPECS: Spec[] = [
+  { label: "Material", value: "Water-repellent cotton" },
+  { label: "Fit", value: "Relaxed" },
+];
+
+// Deliberately long, to exercise the detail page's scroll and "read more".
+const JACKET_DESCRIPTION = "Relaxed-fit jacket in water-repellent cotton.";
+
+const MOCK_PRODUCTS: Product[] = [
+  {
+    id: "field-jacket",
+    options: [
+      {
+        id: "color",
+        label: "Color",
+        values: [
+          { id: "black", label: "Black", media: shot("2b2b2b") },
+          { id: "sand", label: "Sand", media: shot("d8c7a8") },
+        ],
+      },
+    ],
+    variants: [
+      {
+        id: "fj-black",
+        selection: { color: "black" },
+        title: "Field jacket — Black",
+        description: JACKET_DESCRIPTION,
+        price: { amount: 229, currency: "EUR" },
+        media: [shot("2b2b2b")],
+        url: "https://example.com/field-jacket-black",
+        specs: JACKET_SPECS,
+      },
+      {
+        id: "fj-sand",
+        selection: { color: "sand" },
+        title: "Field jacket — Sand",
+        description: JACKET_DESCRIPTION,
+        price: { amount: 249, currency: "EUR" },
+        media: [shot("d8c7a8")],
+        url: "https://example.com/field-jacket-sand",
+        specs: JACKET_SPECS,
+      },
+    ],
+    card: {
+      title: "Field jacket",
+      description: "Relaxed-fit jacket in water-repellent cotton.",
+      price: { amount: 229, currency: "EUR" },
+      media: [shot("2b2b2b")],
+      specs: JACKET_SPECS,
+    },
+  },
+  {
+    id: "canvas-tote",
+    options: [],
+    variants: [
+      {
+        id: "canvas-tote",
+        selection: {},
+        title: "Canvas tote",
+        description: "Sturdy everyday tote with an inner pocket.",
+        price: { amount: 39, currency: "EUR" },
+        media: [shot("e1e1e1")],
+        url: "https://example.com/canvas-tote",
+        specs: [{ label: "Material", value: "Cotton canvas" }],
+      },
+    ],
+    card: {
+      title: "Canvas tote",
+      description: "Sturdy everyday tote with an inner pocket.",
+      price: { amount: 39, currency: "EUR" },
+      media: [shot("e1e1e1")],
+      specs: [{ label: "Material", value: "Cotton canvas" }],
+    },
+  },
+  {
+    id: "wool-beanie",
+    options: [],
+    variants: [
+      {
+        id: "wool-beanie",
+        selection: {},
+        title: "Wool beanie",
+        description: "Ribbed merino beanie with a folded brim.",
+        price: { amount: 45, currency: "EUR" },
+        media: [shot("6b7f9e")],
+        url: "https://example.com/wool-beanie",
+        outOfStock: true,
+        specs: [{ label: "Material", value: "Merino wool" }],
+      },
+    ],
+    card: {
+      title: "Wool beanie",
+      description: "Ribbed merino beanie with a folded brim.",
+      price: { amount: 45, currency: "EUR" },
+      media: [shot("6b7f9e")],
+      outOfStock: true,
+      specs: [{ label: "Material", value: "Merino wool" }],
+    },
+  },
+];
+
+// Ignores the input: every mock product matches every query.
+export async function search(_input: SearchInput): Promise<SearchResult> {
+  return {
+    products: MOCK_PRODUCTS,
+    pages: { current: 1, total: 1 },
+    totalHits: MOCK_PRODUCTS.length,
+  };
+}
+
+// Requested order is the display order, so resolve by id, not catalog order.
+export async function getProducts(ids: string[]): Promise<Product[]> {
+  const products: Product[] = [];
+  for (const id of ids) {
+    for (const product of MOCK_PRODUCTS) {
+      if (product.id === id) {
+        products.push(product);
+        break;
+      }
+    }
+  }
+  return products;
+}