create-skybridge 0.0.0-dev.1b1d257 → 0.0.0-dev.1b2cb1b

package/templates/demo/src/views/use-mascot.ts

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useViewState } from "skybridge/web";
+import beret from "./images/mascot/beret.png";
+import chapka from "./images/mascot/chapka.png";
+import cowboyHat from "./images/mascot/cowboy-hat.png";
+import fez from "./images/mascot/fez.png";
+import jesterHat from "./images/mascot/jester-hat.png";
+import mitre from "./images/mascot/mitre.png";
+import nonLa from "./images/mascot/non-la.png";
+import original from "./images/mascot/original.png";
+import propellerBeanie from "./images/mascot/propeller-beanie.png";
+import skiMask from "./images/mascot/ski-mask.png";
+import sombrero from "./images/mascot/sombrero.png";
+import topHat from "./images/mascot/top-hat.png";
+import vikingHelmet from "./images/mascot/viking-helmet.png";
+
+const Hats = {
+  beret,
+  chapka,
+  "cowboy hat": cowboyHat,
+  fez,
+  "jester hat": jesterHat,
+  mitre,
+  "nón lá": nonLa,
+  "propeller beanie": propellerBeanie,
+  "ski mask": skiMask,
+  sombrero,
+  "top hat": topHat,
+  "viking helmet": vikingHelmet,
+} as const;
+
+type HatLabel = keyof typeof Hats;
+
+const LABELS = Object.keys(Hats) as HatLabel[];
+
+export function useMascot() {
+  // useViewState: persist UI state on the host and surface it to the model.
+  const [state, setState] = useViewState<{ hat?: HatLabel }>({});
+  const { hat } = state;
+  const img = hat ? Hats[hat] : original;
+
+  // Preload all hats once so swaps are instant.
+  useEffect(() => {
+    for (const src of Object.values(Hats)) {
+      new Image().src = src;
+    }
+  }, []);
+
+  return {
+    img,
+    hat,
+    changeHat: () => {
+      setState((prev) => {
+        const currentIndex = prev.hat ? LABELS.indexOf(prev.hat) : -1;
+        const next = LABELS[(currentIndex + 1) % LABELS.length];
+        return { ...prev, hat: next };
+      });
+    },
+  };
+}

package/templates/demo/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "skybridge/tsconfig",
+
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "include": ["src", ".skybridge/**/*.d.ts"]
+}

package/templates/demo/vite.config.ts

@@ -0,0 +1,14 @@
+import path from "node:path";
+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()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/templates/ecom/.dockerignore

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

package/templates/ecom/.env.template

@@ -0,0 +1,2 @@
+# Copy to .env and fill in. Sourced by the server at startup.
+API_KEY=

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"]

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,8 @@
+node_modules/
+dist/
+.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.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"
+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"
+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/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.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"
+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"
+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,29 @@
+{
+  "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"
+  },
+  "dependencies": {
+    "skybridge": "workspace:*",
+    "vite": "^8.1.3",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@skybridge/devtools": "^1.2.4",
+    "@types/node": "^24.13.2",
+    "alpic": "^1.147.1",
+    "tsx": "^4.23.0",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">=24.18.0"
+  }
+}

package/templates/ecom/src/helpers.ts

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

package/templates/ecom/src/lib/format.ts

@@ -0,0 +1,56 @@
+export type NarrateSearchResultsInput = {
+  keyword: string;
+  products: { id: string; properties: { name: string; value: string[] }[] }[];
+  pages?: { current: number; total: number };
+  totalHits?: number;
+  carouselMaxSize: number;
+};
+
+export function narrateSearchResults({
+  keyword,
+  pages,
+  products,
+  totalHits,
+  carouselMaxSize,
+}: NarrateSearchResultsInput) {
+  const size = products.length;
+  if (size <= 0) {
+    return { content: "No product found." };
+  }
+
+  let header = `${size} product${size === 1 ? "" : "s"} found for ${keyword}.`;
+  if (pages) {
+    header += ` Page ${pages.current} of ${pages.total}.`;
+  }
+  if (totalHits) {
+    header += ` Total hits: ${totalHits}.`;
+  }
+
+  const body: string[] = [header];
+  for (const { id, properties } of products) {
+    const item = [`# ID: ${id}`];
+    for (const { name, value } of properties) {
+      item.push(`- ${name}: ${value.join(", ")}`);
+    }
+    body.push(item.join("\n"));
+  }
+
+  const footer =
+    size < carouselMaxSize
+      ? [
+          "",
+          "NEXT STEP: Only a few results found.",
+          "If the client asked for a specific product by name, these are fine: curate and call render-carousel with selected IDs.",
+          "Otherwise, search again with broader terms before rendering.",
+        ].join("\n")
+      : [
+          "",
+          "NEXT STEP:",
+          "1. Curate the best matches for the client's intent from the list above.",
+          "2. Write your recommendation mentioning the selected products.",
+          "3. Call render-carousel with the selected IDs.",
+        ].join("\n");
+
+  const content = [header, ...body, footer].join("\n\n");
+  return { content };
+}

package/templates/ecom/src/server.ts

@@ -0,0 +1,125 @@
+import { existsSync } from "node:fs";
+import { McpServer } from "skybridge/server";
+import { z } from "zod";
+import {
+  type NarrateSearchResultsInput,
+  narrateSearchResults,
+} from "./lib/format.js";
+
+// Load .env into process.env when present (native to Node, no dependency).
+if (existsSync(".env")) {
+  process.loadEnvFile();
+}
+
+// @todo: how many products the carousel curates toward. CAROUSEL_RANGE is
+// interpolated into the prompts below so the model aims for the right amount.
+const CAROUSEL_MAX_SIZE = 6;
+const CAROUSEL_RANGE = `${Math.ceil(CAROUSEL_MAX_SIZE / 2)}-${CAROUSEL_MAX_SIZE}`;
+
+// @todo: minimum number of searches the model runs before rendering. Feeds the
+// prompts below to enforce multi-call exploration; raise for deeper results.
+const MIN_SEARCH_ITERATIONS = 2;
+
+const inputSchema = {
+  // @todo: tune this guidance to your catalog's vocabulary. The model reads
+  // it to turn conversational input into a good keyword.
+  keyword: z.string().describe(
+    `\
+Short noun phrases extracted from conversational input. Never pass full sentences. \
+ALWAYS use the singular form, not the plural. \
+Include color, material, and style descriptors for accuracy. \
+For vague gift or occasion queries without a clear product type, use broad category terms. \
+Preserve the existing keyword across filter refinements; only replace when the user makes a completely different request.`,
+  ),
+
+  // @todo: set the sort options your backend supports (or remove).
+  sort: z.enum(["price-asc", "price-desc"]).optional().describe("Sort order."),
+
+  // @todo: declare the filters your catalog supports. Add one param per
+  // facet (category, color, size...), each optional so the model only sends
+  // what the user asked for. `priceRange` below is just an example, remove it.
+  priceRange: z
+    .string()
+    .optional()
+    .describe(
+      "Price range in dollars. Format: 'min-max' e.g. '0-500', '1000-2000'.",
+    ),
+};
+
+type SearchInput = z.infer<z.ZodObject<typeof inputSchema>>;
+
+function search(input: SearchInput): NarrateSearchResultsInput {
+  // @todo: plug in your product API / DB. Query it with the input params and map
+  // each result into `products` below. `pages` and `totalHits` are optional.
+  return {
+    keyword: input.keyword,
+    products: [], // { id: string; properties: { name: string; value: string[] }[] }[]
+    pages: { current: 1, total: 1 },
+    totalHits: 0,
+    carouselMaxSize: CAROUSEL_MAX_SIZE,
+  };
+}
+
+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: `\
+Two phases:
+
+SEARCH: Call search_products ${MIN_SEARCH_ITERATIONS}+ times before presenting—never off one call. \
+Vary the keyword, apply filters from a prior response, or page deeper. \
+Stay silent while searching: emit NO text between calls. Speak only \
+once the carousel renders. Never call a category unavailable before searching.`,
+  },
+).registerTool(
+  {
+    name: "search_products",
+    // @todo: describe YOUR catalog and how the agent should search and curate
+    // it. This is the model's main guide: be specific about your categories,
+    // the multi-call search loop, and when to render vs. keep searching.
+    description: `\
+Search the product catalog. Handles any query: specific products, broad categories, gifts, occasions, or open discovery.
+Never assume a category is unavailable: always search before responding.
+
+The response is data only: a list of matching products (name, ID, price, description, and any product-specific attributes) plus pagination and the available filters. The raw results are for your eyes only: the client never sees them.
+
+NEVER describe or characterize the raw results to the client: do not mention how many there are, what categories they fall into, or that they look off-topic. While searching, stay silent: do not narrate what you are doing, announce searches, or report progress between tool calls. Speak only once the carousel is rendered.
+
+Act on the response as follows:
+
+- FIRST SEARCH: use the keyword only (plus sort if needed). Read the available filters in the response; these are the only valid filter options for follow-ups.
+- REFINEMENT: if the user's intent matches an available filter, apply it. If it doesn't match any filter, start a new keyword search.
+- ITERATE: a single search is never enough. Run several searches (${MIN_SEARCH_ITERATIONS} minimum) before rendering: vary the keyword, apply a filter, or page deeper, and compare results across them. Quality comes from this multi-call exploration; one call then render gives shallow results.
+- CURATION: read results and pick the best matches for the client's intent, grounding your choice in each product's description. If zero results, broaden the keyword or relax filters and search again: do NOT call render-carousel. If fewer than 3 results and the user didn't ask for a specific product, search again with broader terms. Only after exploring across several searches, call render-carousel with the selected IDs.
+- PRESENT: Once you have ${CAROUSEL_RANGE} distinct, relevant products, call render-carousel with their IDs. Recommend ONLY AFTER the carousel displays, in carousel order.
+
+The sweet spot is ${CAROUSEL_RANGE} products.
+`,
+    annotations: {
+      readOnlyHint: true,
+      openWorldHint: false,
+      destructiveHint: false,
+    },
+    // @todo: customize the status messages shown in ChatGPT while the tool runs.
+    _meta: {
+      "openai/toolInvocation/invoking": "Searching",
+      "openai/toolInvocation/invoked": "Done searching",
+    },
+    inputSchema,
+    outputSchema: {},
+  },
+  (input) => {
+    const results = search(input);
+    const { content } = narrateSearchResults(results);
+    return { structuredContent: {}, content, isError: false };
+  },
+);
+
+export default await server.run();
+
+export type AppType = typeof server;

package/templates/ecom/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "skybridge/tsconfig",
+
+  "include": ["src", ".skybridge/**/*.d.ts"]
+}

package/templates/ecom/vite.config.ts

@@ -0,0 +1,6 @@
+import { skybridge } from "skybridge/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [skybridge()],
+});

package/dist/index.test.d.ts

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