create-skybridge 0.0.0-dev.e38035c → 0.0.0-dev.e43e7b0

package/dist/index.js

@@ -5,10 +5,6 @@ import { fileURLToPath } from "node:url";
 import * as prompts from "@clack/prompts";
 import mri from "mri";
 const defaultProjectName = "skybridge-project";
-const templates = [
-    { value: "default", label: "a minimal implementation" },
-    { value: "ecom", label: "a functional ecommerce carousel" },
-];
 // prettier-ignore
 const helpMessage = `\
 Usage: create-skybridge [OPTION]... [DIRECTORY]
@@ -19,10 +15,6 @@ Options:
   -h, --help              show this help message
   --overwrite             remove existing files in target directory
   --immediate             install dependencies and start development server
-  --template <template>   use a specific template
-
-Available templates:
-${templates.map((t) => `  ${t.value.padEnd(23)} ${t.label}`).join("\n")}
 
 Examples:
   create-skybridge my-app
@@ -31,14 +23,13 @@ Examples:
 export async function init(args = process.argv.slice(2)) {
     const argv = mri(args, {
         boolean: ["help", "overwrite", "immediate"],
-        alias: { h: "help", t: "template" },
+        alias: { h: "help" },
     });
     const argTargetDir = argv._[0]
         ? sanitizeTargetDir(String(argv._[0]))
         : undefined;
     const argOverwrite = argv.overwrite;
     const argImmediate = argv.immediate;
-    const argTemplate = argv.template;
     const help = argv.help;
     if (help) {
         console.log(helpMessage);
@@ -69,38 +60,7 @@ export async function init(args = process.argv.slice(2)) {
             targetDir = defaultProjectName;
         }
     }
-    // 2. Select a template
-    const hasInvalidTemplate = argTemplate && !templates.some((t) => t.value === argTemplate);
-    let template = argTemplate;
-    if (interactive) {
-        if (!argTemplate || hasInvalidTemplate) {
-            let message = "Please choose a template:";
-            if (hasInvalidTemplate) {
-                message = `${argTemplate} is not a valid template. Please choose one of the following:`;
-            }
-            template = await prompts.select({
-                message,
-                options: templates.map((t) => ({
-                    value: t.value,
-                    label: `${t.value}: ${t.label}`,
-                })),
-            });
-            if (prompts.isCancel(template)) {
-                return cancel();
-            }
-        }
-    }
-    else if (hasInvalidTemplate) {
-        prompts.log.error(`Template is not a valid template. Please choose one of the following: ${templates.map((t) => t.value).join(", ")}`);
-        process.exit(1);
-    }
-    let templatePath = "../template";
-    switch (template) {
-        case "ecom":
-            templatePath = "../template-ecom";
-            break;
-    }
-    // 3. Handle directory if exist and not empty
+    // 2. Handle directory if exist and not empty
     if (fs.existsSync(targetDir) && !isEmpty(targetDir)) {
         let overwrite = argOverwrite ? "yes" : undefined;
         if (!overwrite) {
@@ -140,20 +100,17 @@ export async function init(args = process.argv.slice(2)) {
         }
     }
     const root = path.join(process.cwd(), targetDir);
-    // 4. Copy the template
+    // 3. Copy the repository
     prompts.log.step(`Copying template...`);
     try {
-        const templateDir = fileURLToPath(new URL(templatePath, import.meta.url));
+        const templateDir = fileURLToPath(new URL("../template", import.meta.url));
         // Copy template to target directory
         fs.cpSync(templateDir, root, {
             recursive: true,
             filter: (src) => [".npmrc"].every((file) => !src.endsWith(file)),
         });
-        // Write .gitignore
-        fs.writeFileSync(path.join(root, ".gitignore"), `node_modules/
-dist/
-.env*
-.DS_store`);
+        // Rename _gitignore to .gitignore
+        fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
         // Update project name in package.json
         const name = path.basename(root);
         const pkgPath = path.join(root, "package.json");
@@ -169,7 +126,7 @@ dist/
     }
     const userAgent = process.env.npm_config_user_agent;
     const pkgManager = userAgent?.split(" ")[0]?.split("/")[0] || "npm";
-    // 5. Ask about immediate installation
+    // 4. Ask about immediate installation
     let immediate = argImmediate;
     if (immediate === undefined) {
         if (interactive) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.e38035c",
+  "version": "0.0.0-dev.e43e7b0",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
@@ -14,8 +14,7 @@
   "files": [
     "index.js",
     "dist",
-    "template",
-    "template-ecom"
+    "template"
   ],
   "dependencies": {
     "@clack/prompts": "^0.11.0",
@@ -26,7 +25,7 @@
     "vitest": "^4.0.16"
   },
   "scripts": {
-    "build": "tsc && node copyExamples.js",
+    "build": "tsc",
     "test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
     "test:unit": "vitest run",
     "test:type": "tsc --noEmit",

package/template/_gitignore

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

package/template/node_modules/.bin/mcp-inspector

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@25.0.3_@types+react-dom@19.2.3_@type_cfe96c348f18ba1e580ab58ea63930bf/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/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.18.0_@types+node@24.10.4_@types+react-dom@19.2.3_@typ_2ae0bad7d98bf01c7830eb2bffcfeaad/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"

package/template/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@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.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@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.0_@types+node@25.0.3_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/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@7.3.1_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@7.3.1_@types+node@24.10.4_jiti@2.6.1_lightningcss@1.30.2_terser@5.44.1_tsx@4.21.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/template/package.json

@@ -15,12 +15,12 @@
     "web:preview": "vite preview -c web/vite.config.ts"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.1",
+    "@modelcontextprotocol/sdk": "^1.25.2",
     "express": "^5.2.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "skybridge": ">=0.16.8 <1.0.0",
-    "vite": "^7.3.0",
+    "skybridge": ">=0.16.2 <1.0.0",
+    "vite": "^7.3.1",
     "zod": "^4.3.5"
   },
   "devDependencies": {
@@ -37,6 +37,6 @@
   },
   "workspaces": [],
   "engines": {
-    "node": ">=24.0.0"
+    "node": ">=24.12.0"
   }
 }

package/template-ecom/README.md

@@ -1,89 +0,0 @@
-# Ecommerce Carousel Example
-
-## What This Example Showcases
-This "Ecommerce Carousel" example demonstrates key Skybridge capabilities:
-- **Interactive Widget Rendering**: A React-based widget that displays an interactive product carousel directly in ChatGPT
-- **Tool Info Access**: Widgets access tool input, output, and metadata via `useToolInfo()` hook
-- **Theme Support**: Adapts to light/dark mode using the `useLayout()` hook
-- **Localization**: Translates UI based on user locale via `useUser()` hook
-- **Persistent State**: Maintains cart state across re-renders using `useWidgetState()` hook
-- **Modal Dialogs**: Opens checkout modal via `useRequestModal()` hook
-- **External Links**: Opens external URL for checkout completion via `useOpenExternal()` hook
-- **External API Integration**: Demonstrates fetching data from REST APIs
-- **Hot Module Replacement**: Live reloading of widget components during development
-
-This example serves as a comprehensive reference for building sophisticated, interactive widgets that leverage Skybridge's full feature set.
-
-## Getting Started
-
-### Prerequisites
-
-- Node.js 22+
-- HTTP tunnel such as [ngrok](https://ngrok.com/download)
-
-### Local Development
-
-#### 1. Install
-
-```bash
-npm install
-# or
-yarn install
-# or
-pnpm install
-# or
-bun install
-```
-
-#### 2. Start your local server
-
-Run the development server from the root directory:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-This command starts an Express server on port 3000. This server packages:
-
-- an MCP endpoint on `/mcp` (the app backend)
-- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
-
-#### 3. Connect to ChatGPT
-
-- ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
-```bash
-ngrok http 3000
-```
-- In ChatGPT, navigate to **Settings → Connectors → Create** and add the forwarding URL provided by ngrok suffixed with `/mcp` (e.g. `https://3785c5ddc4b6.ngrok-free.app/mcp`)
-
-### Create your first widget
-
-#### 1. Add a new widget
-
-- Register a widget in `server/server.ts` with a unique name (e.g., `my-widget`)
-- Create a matching React component at `web/src/widgets/my-widget.tsx`. The file name must match the widget name exactly
-
-#### 2. Edit widgets with Hot Module Replacement (HMR)
-
-Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
-
-#### 3. Edit server code
-
-Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
-
-## Deploy to Production
-
-- Use [Alpic](https://alpic.ai/) to deploy your OpenAI App to production
-- In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
-
-## Resources
-
-- [Apps SDK Documentation](https://developers.openai.com/apps-sdk)
-- [Model Context Protocol Documentation](https://modelcontextprotocol.io/)
-- [Alpic Documentation](https://docs.alpic.ai/)

package/template-ecom/alpic.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://assets.alpic.ai/alpic.json",
-  "buildOutputDir": "server/dist"
-}

package/template-ecom/nodemon.json

@@ -1,5 +0,0 @@
-{
-  "watch": ["server/src"],
-  "ext": "ts,json",
-  "exec": "tsx server/src/index.ts"
-}

package/template-ecom/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "ecom-carousel",
-  "version": "0.0.1",
-  "private": true,
-  "description": "An e-commerce carousel example",
-  "type": "module",
-  "scripts": {
-    "dev": "nodemon",
-    "build": "vite build -c web/vite.config.ts && shx rm -rf server/dist && tsc -p tsconfig.server.json && shx cp -r web/dist server/dist/assets",
-    "start": "node server/dist/index.js",
-    "inspector": "mcp-inspector http://localhost:3000/mcp",
-    "server:build": "tsc -p tsconfig.server.json",
-    "server:start": "node server/dist/index.js",
-    "web:build": "tsc -b web && vite build -c web/vite.config.ts",
-    "web:preview": "vite preview -c web/vite.config.ts"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.1",
-    "express": "^5.2.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "skybridge": ">=0.16.8 <1.0.0",
-    "vite": "^7.3.0",
-    "zod": "^4.3.5"
-  },
-  "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.18.0",
-    "@skybridge/devtools": "^0.16.2",
-    "@types/express": "^5.0.6",
-    "@types/node": "^22.19.3",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "nodemon": "^3.1.11",
-    "shx": "^0.4.0",
-    "tsx": "^4.21.0",
-    "typescript": "^5.9.3"
-  },
-  "workspaces": []
-}

package/template-ecom/server/src/index.ts

@@ -1,39 +0,0 @@
-import express, { type Express } from "express";
-import { devtoolsStaticServer, widgetsDevServer } from "skybridge/server";
-import type { ViteDevServer } from "vite";
-import { mcp } from "./middleware.js";
-import server from "./server.js";
-
-const app = express() as Express & { vite: ViteDevServer };
-
-app.use(express.json());
-
-app.use(mcp(server));
-
-const env = process.env.NODE_ENV || "development";
-
-if (env !== "production") {
-  app.use(await devtoolsStaticServer());
-  app.use(await widgetsDevServer());
-}
-
-app.listen(3000, (error) => {
-  if (error) {
-    console.error("Failed to start server:", error);
-    process.exit(1);
-  }
-
-  console.log(`Server listening on port 3000 - ${env}`);
-  console.log(
-    "Make your local server accessible with 'ngrok http 3000' and connect to ChatGPT with URL https://xxxxxx.ngrok-free.app/mcp",
-  );
-
-  if (env !== "production") {
-    console.log("Devtools available at http://localhost:3000");
-  }
-});
-
-process.on("SIGINT", async () => {
-  console.log("Server shutdown complete");
-  process.exit(0);
-});

package/template-ecom/server/src/middleware.ts

@@ -1,54 +0,0 @@
-import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
-import type { NextFunction, Request, Response } from "express";
-
-import type { McpServer } from "skybridge/server";
-
-export const mcp =
-  (server: McpServer) =>
-  async (req: Request, res: Response, next: NextFunction) => {
-    // Only handle requests to the /mcp path
-    if (req.path !== "/mcp") {
-      return next();
-    }
-
-    if (req.method === "POST") {
-      try {
-        const transport = new StreamableHTTPServerTransport({
-          sessionIdGenerator: undefined,
-        });
-
-        res.on("close", () => {
-          transport.close();
-        });
-
-        await server.connect(transport);
-
-        await transport.handleRequest(req, res, req.body);
-      } catch (error) {
-        console.error("Error handling MCP request:", error);
-        if (!res.headersSent) {
-          res.status(500).json({
-            jsonrpc: "2.0",
-            error: {
-              code: -32603,
-              message: "Internal server error",
-            },
-            id: null,
-          });
-        }
-      }
-    } else if (req.method === "GET" || req.method === "DELETE") {
-      res.writeHead(405).end(
-        JSON.stringify({
-          jsonrpc: "2.0",
-          error: {
-            code: -32000,
-            message: "Method not allowed.",
-          },
-          id: null,
-        }),
-      );
-    } else {
-      next();
-    }
-  };

package/template-ecom/server/src/server.ts

@@ -1,73 +0,0 @@
-import { McpServer } from "skybridge/server";
-import { z } from "zod";
-
-interface Product {
-  id: number;
-  title: string;
-  price: number;
-  description: string;
-  category: string;
-  image: string;
-  rating: {
-    rate: number;
-    count: number;
-  };
-}
-
-const server = new McpServer(
-  {
-    name: "ecom-carousel-app",
-    version: "0.0.1",
-  },
-  { capabilities: {} },
-).registerWidget(
-  "ecom-carousel",
-  {
-    description: "E-commerce Product Carousel",
-  },
-  {
-    description: "Display a carousel of products from the store.",
-    inputSchema: {
-      category: z
-        .enum(["electronics", "jewelery", "men's clothing", "women's clothing"])
-        .optional()
-        .describe("Filter by product category"),
-      maxPrice: z.number().optional().describe("Maximum price filter"),
-    },
-  },
-  async ({ category, maxPrice }) => {
-    try {
-      const response = await fetch("https://fakestoreapi.com/products");
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-
-      const products: Product[] = await response.json();
-      const filtered: Product[] = [];
-
-      for (const product of products) {
-        if (category && product.category !== category) {
-          continue;
-        }
-        if (maxPrice !== undefined && product.price > maxPrice) {
-          continue;
-        }
-        filtered.push(product);
-      }
-
-      return {
-        structuredContent: { products: filtered },
-        content: [{ type: "text", text: JSON.stringify(filtered) }],
-        isError: false,
-      };
-    } catch (error) {
-      return {
-        content: [{ type: "text", text: `Error: ${error}` }],
-        isError: true,
-      };
-    }
-  },
-);
-
-export default server;
-export type AppType = typeof server;

package/template-ecom/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "verbatimModuleSyntax": true,
-
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    "noEmit": true
-  },
-  "include": ["server/src", "web/src", "web/vite.config.ts"],
-  "exclude": ["dist", "node_modules"]
-}

package/template-ecom/tsconfig.server.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "outDir": "server/dist",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["server/src"],
-  "exclude": ["dist", "node_modules"]
-}

package/template-ecom/web/src/helpers.ts

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

package/template-ecom/web/src/index.css

@@ -1,194 +0,0 @@
-.light {
-  --bg: #fff;
-  --bg-alt: #f5f5f5;
-  --text: #333;
-  --text-muted: #666;
-  --shadow: rgba(0, 0, 0, 0.1);
-}
-
-.dark {
-  --bg: #2a2a2a;
-  --bg-alt: #333;
-  --text: #eee;
-  --text-muted: #aaa;
-  --shadow: rgba(0, 0, 0, 0.3);
-}
-
-.container,
-.checkout {
-  --accent: mediumseagreen;
-  --accent-text: #fff;
-  display: flex;
-  flex-direction: column;
-  font-family: sans-serif;
-}
-
-.carousel {
-  display: flex;
-  gap: 1rem;
-  padding: 1rem;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.product-wrapper {
-  flex: 0 0 150px;
-  max-width: 150px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.product-card {
-  background: var(--bg);
-  border: none;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px var(--shadow);
-  cursor: pointer;
-  padding: 0;
-  text-align: left;
-}
-
-.product-card.selected {
-  outline: 2px solid var(--accent);
-}
-
-.product-image {
-  width: 100%;
-  height: 100px;
-  object-fit: contain;
-  background: var(--bg-alt);
-  padding: 0.5rem;
-  box-sizing: border-box;
-  border-radius: 8px 8px 0 0;
-}
-
-.product-info {
-  padding: 0.5rem;
-}
-
-.product-title {
-  font-size: 0.75rem;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.product-price {
-  font-size: 0.875rem;
-  font-weight: bold;
-  color: var(--accent);
-  margin-top: 0.25rem;
-}
-
-.product-detail {
-  margin: 0 1rem 1rem;
-  padding: 1rem;
-  background: var(--bg);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px var(--shadow);
-}
-
-.detail-title {
-  font-weight: bold;
-  color: var(--text);
-  margin-bottom: 0.5rem;
-}
-
-.detail-rating {
-  font-size: 0.875rem;
-  color: var(--text-muted);
-  margin-bottom: 0.5rem;
-}
-
-.detail-description {
-  font-size: 0.8rem;
-  color: var(--text-muted);
-  line-height: 1.4;
-}
-
-.message {
-  margin: 1rem;
-  padding: 1rem;
-  background: var(--bg);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px var(--shadow);
-  color: var(--text-muted);
-  text-align: center;
-}
-
-.cart-indicator {
-  padding: 0.5rem 1rem;
-  align-self: flex-end;
-  color: var(--accent-text);
-  background: var(--accent);
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: bold;
-  margin-right: 1rem;
-}
-
-.cart-indicator:disabled {
-  background: var(--bg-alt);
-  color: var(--text-muted);
-  cursor: default;
-}
-
-.cart-button {
-  padding: 0.5rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  background: var(--accent);
-  color: var(--accent-text);
-}
-
-.cart-button.in-cart {
-  background: var(--bg-alt);
-  color: var(--text-muted);
-}
-
-.checkout {
-  gap: 1rem;
-  padding: 1.25rem;
-}
-
-.checkout-title {
-  font-weight: bold;
-  font-size: 1rem;
-  color: var(--text);
-}
-
-.checkout-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.checkout-item {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.875rem;
-  color: var(--text);
-}
-
-.checkout-total {
-  display: flex;
-  justify-content: space-between;
-  font-weight: bold;
-  color: var(--text);
-  border-top: 1px solid var(--bg-alt);
-  padding-top: 0.5rem;
-}
-
-.checkout-button {
-  padding: 0.75rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  background: var(--accent);
-  color: var(--accent-text);
-  font-weight: bold;
-}

package/template-ecom/web/src/widgets/ecom-carousel.tsx

@@ -1,181 +0,0 @@
-import "@/index.css";
-
-import { useState } from "react";
-import {
-  mountWidget,
-  useLayout,
-  useOpenExternal,
-  useRequestModal,
-  useUser,
-  useWidgetState,
-} from "skybridge/web";
-import { useToolInfo } from "../helpers.js";
-
-const translations: Record<string, Record<string, string>> = {
-  en: {
-    loading: "Loading products...",
-    noProducts: "No product found",
-    addToCart: "Add to cart",
-    removeFromCart: "Remove",
-  },
-  fr: {
-    loading: "Chargement des produits...",
-    noProducts: "Aucun produit trouvé",
-    addToCart: "Ajouter",
-    removeFromCart: "Retirer",
-  },
-  es: {
-    loading: "Cargando productos...",
-    noProducts: "No se encontraron productos",
-    addToCart: "Añadir",
-    removeFromCart: "Quitar",
-  },
-  de: {
-    loading: "Produkte werden geladen...",
-    noProducts: "Keine Produkte gefunden",
-    addToCart: "Hinzufügen",
-    removeFromCart: "Entfernen",
-  },
-};
-
-const CHECKOUT_URL = "https://alpic.ai";
-
-function EcomCarousel() {
-  const { theme } = useLayout();
-  const { locale } = useUser();
-  const { open, isOpen } = useRequestModal();
-  const openExternal = useOpenExternal();
-
-  const lang = locale?.split("-")[0] ?? "en";
-
-  function translate(key: string) {
-    return translations[lang]?.[key] ?? translations.en[key];
-  }
-
-  const { output, isPending } = useToolInfo<"ecom-carousel">();
-  type Product = NonNullable<typeof output>["products"][number];
-  const [selected, setSelected] = useState<Product | null>(null);
-
-  const [cart, setCart] = useWidgetState<{ ids: number[] }>({ ids: [] });
-
-  function toggleCart(productId: number) {
-    if (cart.ids.includes(productId)) {
-      setCart({ ids: cart.ids.filter((id) => id !== productId) });
-    } else {
-      setCart({ ids: [...cart.ids, productId] });
-    }
-  }
-
-  if (isPending) {
-    return (
-      <div className={`${theme} container`}>
-        <div className="message">{translate("loading")}</div>
-      </div>
-    );
-  }
-
-  if (!output || output.products.length === 0) {
-    return (
-      <div className={`${theme} container`}>
-        <div className="message">{translate("noProducts")}</div>
-      </div>
-    );
-  }
-
-  if (isOpen) {
-    const cartItems: Product[] = [];
-    let total = 0;
-    for (const p of output.products) {
-      if (cart.ids.includes(p.id)) {
-        cartItems.push(p);
-        total += p.price;
-      }
-    }
-    const checkoutUrl = new URL(CHECKOUT_URL);
-    checkoutUrl.searchParams.set("cart", cart.ids.join(","));
-
-    return (
-      <div className={`${theme} checkout`}>
-        <div className="checkout-title">Order summary</div>
-        <div className="checkout-items">
-          {cartItems.map((item) => (
-            <div key={item.id} className="checkout-item">
-              <span>{item.title}</span>
-              <span>${item.price.toFixed(2)}</span>
-            </div>
-          ))}
-        </div>
-        <div className="checkout-total">
-          <span>Total</span>
-          <span>${total.toFixed(2)}</span>
-        </div>
-        <button
-          type="button"
-          className="checkout-button"
-          onClick={() => openExternal(checkoutUrl.toString())}
-        >
-          Checkout
-        </button>
-      </div>
-    );
-  }
-
-  const activeProduct = selected ?? output.products[0];
-
-  return (
-    <div className={`${theme} container`}>
-      <button
-        type="button"
-        className="cart-indicator"
-        onClick={() => open({ title: "Proceed to checkout ?" })}
-        disabled={cart.ids.length === 0}
-      >
-        🛒 {cart.ids.length}
-      </button>
-      <div className="carousel">
-        {output.products.map((product) => {
-          const inCart = cart.ids.includes(product.id);
-          return (
-            <div key={product.id} className="product-wrapper">
-              <button
-                type="button"
-                className={`product-card ${activeProduct?.id === product.id ? "selected" : ""}`}
-                onClick={() => setSelected(product)}
-              >
-                <img
-                  src={product.image}
-                  alt={product.title}
-                  className="product-image"
-                />
-                <div className="product-info">
-                  <div className="product-title">{product.title}</div>
-                  <div className="product-price">
-                    ${product.price.toFixed(2)}
-                  </div>
-                </div>
-              </button>
-              <button
-                type="button"
-                className={`cart-button ${inCart ? "in-cart" : ""}`}
-                onClick={() => toggleCart(product.id)}
-              >
-                {inCart ? translate("removeFromCart") : translate("addToCart")}
-              </button>
-            </div>
-          );
-        })}
-      </div>
-      <div className="product-detail">
-        <div className="detail-title">{activeProduct.title}</div>
-        <div className="detail-rating">
-          ⭐ {activeProduct.rating.rate} ({activeProduct.rating.count} reviews)
-        </div>
-        <div className="detail-description">{activeProduct.description}</div>
-      </div>
-    </div>
-  );
-}
-
-export default EcomCarousel;
-
-mountWidget(<EcomCarousel />);

package/template-ecom/web/vite.config.ts

@@ -1,15 +0,0 @@
-import path from "node:path";
-import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/web";
-import { defineConfig } from "vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [skybridge(), react()],
-  root: __dirname,
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});