create-skybridge 0.0.0-dev.ecfdeac → 0.0.0-dev.ed29eee

package/templates/ecom/README.md

@@ -0,0 +1,92 @@
+# Skybridge Boilerplate
+
+A minimal TypeScript boilerplate for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech) framework.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 24+
+
+### Local Development
+
+#### 1. Install
+
+```bash
+npm install
+# or
+pnpm install
+# or
+bun install
+# or
+deno install
+# or
+yarn install
+```
+
+#### 2. Start your local server
+
+Run the development server from the root directory:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+bun dev
+# or
+deno task dev
+# or
+yarn dev
+```
+
+This command starts:
+- Your MCP server at `http://localhost:3000/mcp`.
+- Skybridge DevTools UI at `http://localhost:3000`.
+
+#### 3. Project structure
+
+```
+├── src/
+│   ├── server.ts         # Server entry point
+│   └── helpers.ts        # Shared utilities
+├── vite.config.ts
+├── alpic.json            # Deployment config
+└── package.json
+```
+
+### Create your first view
+
+#### 1. Add a new view
+
+- Register a tool in `src/server.ts` with a unique name (e.g., `my-view`) using [`registerTool`](https://docs.skybridge.tech/api-reference/register-tool) and a `view` config.
+- Create a matching React component at `src/views/my-view.tsx`. **The file name must match the view name exactly**.
+
+#### 2. Edit views with Hot Module Replacement (HMR)
+
+Edit and save components in `src/views/` — changes will appear instantly inside your App.
+
+#### 3. Edit server code
+
+Modify files in `src/` and refresh the tool list with your MCP Client to see the changes.
+
+### Testing your App
+
+You can test your app locally by using our DevTools UI on `http://localhost:3000` while running the `dev` command.
+
+To connect your app with web clients like ChatGPT or Claude, expose your server on the internet by adding the `--tunnel` flag.
+By enabling the tunnel, you'll also be able to access a playground to chat with your app and a real LLM. Learn more by reading the [test guide](https://docs.skybridge.tech/quickstart/test-your-app).
+
+
+## Deploy to Production
+
+Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
+
+The simplest way to deploy your app is by running the `deploy` command, which will push your MCP server to the [Alpic](https://alpic.ai/) cloud for free.
+
+## Resources
+- [Skybridge Documentation](https://docs.skybridge.tech/)
+- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
+- [MCP Apps Documentation](https://github.com/modelcontextprotocol/ext-apps/tree/main)
+- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
+- [Alpic Documentation](https://docs.alpic.ai/)

package/templates/ecom/_gitignore

@@ -0,0 +1,9 @@
+node_modules/
+dist/
+build/
+.env*
+!.env.template
+.DS_store
+*.tsbuildinfo
+.skybridge/
+.vercel/

package/templates/ecom/alpic.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://assets.alpic.ai/alpic.json"
+}

package/templates/ecom/node_modules/.bin/alpic

@@ -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/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.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" "$@"
+else
+  exec node  "$basedir/../alpic/bin/run.js" "$@"
+fi

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

@@ -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/@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"
+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"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@ladle/react/lib/cli/cli.js" "$@"
+else
+  exec node  "$basedir/../@ladle/react/lib/cli/cli.js" "$@"
+fi

package/templates/ecom/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/node_modules"
+else
+  export NODE_PATH="/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/templates/ecom/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/node_modules"
+else
+  export NODE_PATH="/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/templates/ecom/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@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.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@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.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/templates/ecom/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@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.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@6.0.3/node_modules/typescript/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/typescript@6.0.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/templates/ecom/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.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.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.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.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/templates/ecom/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@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.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" "$@"
+else
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
+fi

package/templates/ecom/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "skybridge-ecom",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Skybridge MCP ecommerce template",
+  "type": "module",
+  "scripts": {
+    "dev": "skybridge dev",
+    "dev:tunnel": "skybridge dev --tunnel",
+    "build": "skybridge build",
+    "start": "skybridge start",
+    "deploy": "alpic deploy",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "skybridge": "^0.0.0-dev.ed29eee",
+    "vite": "^8.1.3",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@ladle/react": "^5.1.1",
+    "@skybridge/devtools": "^1.2.4",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "alpic": "^1.147.1",
+    "tsx": "^4.23.0",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">=24.18.0"
+  }
+}

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;
+}