create-skybridge 0.0.0-dev.c9794a7 → 0.0.0-dev.c9a9356

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/src/vite-manifest.d.ts

@@ -0,0 +1,4 @@
+// Typed shim for the Vite manifest emitted by `skybridge build`. The actual
+// `vite-manifest.js` is generated alongside this file and gitignored.
+declare const manifest: Record<string, { file: string }>;
+export default manifest;

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/dist/index.test.d.ts

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

package/dist/index.test.js

@@ -1,33 +0,0 @@
-import { randomBytes } from "node:crypto";
-import fs from "node:fs/promises";
-import path from "node:path";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { init } from "./index.js";
-describe("create-skybridge", () => {
-    let tempDirName;
-    beforeEach(() => {
-        tempDirName = `test-${randomBytes(2).toString("hex")}`;
-    });
-    afterEach(async () => {
-        await fs.rm(path.join(process.cwd(), tempDirName), {
-            recursive: true,
-            force: true,
-        });
-    });
-    it("should copy the template", async () => {
-        const name = `../../${tempDirName}//project$`;
-        await init([name]);
-        await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
-        expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
-    });
-    it("should download template from repo", async () => {
-        const name = `../../${tempDirName}//project$`;
-        await init([
-            name,
-            "--repo",
-            "github:alpic-ai/skybridge/examples/ecom-carousel",
-        ]);
-        await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
-        expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
-    });
-});

package/template/AGENTS.md

@@ -1 +0,0 @@
-Before writing code, first explore the project structure, then invoke the chatgpt-app-builder skill for documentation.

package/template/README.md

@@ -1,97 +0,0 @@
-# Skybridge Starter
-
-A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech/home) framework.
-
-## Getting Started
-
-### Prerequisites
-
-- Node.js 24+
-- HTTP tunnel such as [ngrok](https://ngrok.com/download) if you want to test with remote MCP hosts like ChatGPT or Claude.ai.
-
-### 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:
-- Your MCP server at `http://localhost:3000/mcp`.
-- Skybridge DevTools UI at `http://localhost:3000/`.
-
-#### 3. Project structure
-
-```
-├── server/
-│   └── src/
-│       └── index.ts      # Server entry point
-├── web/
-│   ├── src/
-│   │   ├── widgets/      # React components (one per widget)
-│   │   ├── helpers.ts    # Shared utilities
-│   │   └── index.css     # Global styles
-│   └── vite.config.ts
-├── alpic.json            # Deployment config
-├── nodemon.json          # Dev server config
-└── package.json
-```
-
-### Create your first widget
-
-#### 1. Add a new widget
-
-- Register a widget in `server/src/server.ts` with a unique name (e.g., `my-widget`) using [`registerWidget`](https://docs.skybridge.tech/api-reference/register-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 will appear instantly inside your App.
-
-#### 3. Edit server code
-
-Modify files in `server/` and refresh the connection with your testing MCP Client to see the changes.
-
-### Testing your App
-
-You can test your App locally by using our DevTools UI on `localhost:3000` while running the `pnpm dev` command.
-
-To test your app with other MCP Clients like ChatGPT, Claude or VSCode, see [Testing Your App](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 in minutes is [Alpic](https://alpic.ai/).
-1. Create an account on [Alpic platform](https://app.alpic.ai/). 
-2. Connect your GitHub repository to automatically deploy at each commit. 
-3. Use your remote App URL to connect it to MCP Clients, or use the Alpic Playground to easily test your App.
-
-## 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/template/node_modules/.bin/alpic

@@ -1,21 +0,0 @@
-#!/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.98.0_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@5.9.3/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.98.0_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@5.9.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/alpic@1.98.0_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@5.9.3/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.98.0_@opentelemetry+api@1.9.0_arktype@2.1.27_rxjs@7.8.2_typescript@5.9.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/../alpic/bin/run.js" "$@"
-else
-  exec node  "$basedir/../alpic/bin/run.js" "$@"
-fi

package/template/node_modules/.bin/sb

@@ -1,21 +0,0 @@
-#!/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/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules:/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/template/node_modules/.bin/skybridge

@@ -1,21 +0,0 @@
-#!/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/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.8_@modelcontextprotocol+sdk@1.27.1_zod@4.3.6__@skybridge+devtools@0.35.8_1f1f5db4b462433a2cf55b96d8f41302/node_modules:/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/template/node_modules/.bin/vite

@@ -1,21 +0,0 @@
-#!/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.0.2_@types+node@25.2.3_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.0.2_@types+node@25.2.3_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_tsx@4.21.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.0.2_@types+node@25.2.3_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_tsx@4.21.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.0.2_@types+node@25.2.3_esbuild@0.27.2_jiti@2.6.1_terser@5.44.1_tsx@4.21.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/template/server/src/index.ts

@@ -1,62 +0,0 @@
-import { McpServer } from "skybridge/server";
-import { z } from "zod";
-
-const Answers = [
-  "As I see it, yes",
-  "Don't count on it",
-  "It is certain",
-  "It is decidedly so",
-  "Most likely",
-  "My reply is no",
-  "My sources say no",
-  "Outlook good",
-  "Outlook not so good",
-  "Signs point to yes",
-  "Very doubtful",
-  "Without a doubt",
-  "Yes definitely",
-  "Yes",
-  "You may rely on it",
-];
-
-const server = new McpServer(
-  {
-    name: "alpic-openai-app",
-    version: "0.0.1",
-  },
-  { capabilities: {} },
-).registerWidget(
-  "magic-8-ball",
-  {
-    description: "Magic 8 Ball",
-  },
-  {
-    description: "For fortune-telling or seeking advice.",
-    inputSchema: {
-      question: z.string().describe("The user question."),
-    },
-  },
-  async ({ question }) => {
-    try {
-      // deterministic answer
-      const hash = question
-        .split("")
-        .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-      const answer = Answers[hash % Answers.length];
-      return {
-        structuredContent: { answer },
-        content: [],
-        isError: false,
-      };
-    } catch (error) {
-      return {
-        content: [{ type: "text", text: `Error: ${error}` }],
-        isError: true,
-      };
-    }
-  },
-);
-
-server.run();
-
-export type AppType = typeof server;

package/template/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "skybridge/tsconfig",
-
-  "compilerOptions": {
-    "outDir": "dist"
-  },
-
-  "include": ["server/src", "web/src"]
-}

package/template/web/src/helpers.ts

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

package/template/web/src/index.css

@@ -1,154 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,600&display=swap");
-
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  padding: 1rem;
-  box-sizing: border-box;
-}
-
-.ball {
-  background: radial-gradient(
-    circle at 30% 30%,
-    #454565 0%,
-    #1c1c30 40%,
-    #0a0a10 100%
-  );
-  border-radius: 50%;
-  width: 12rem;
-  height: 12rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: monospace;
-  text-align: center;
-  position: relative;
-  box-shadow:
-    0 10px 30px rgba(0, 0, 0, 0.5),
-    0 5px 15px rgba(0, 0, 0, 0.3),
-    inset 0 -20px 40px rgba(0, 0, 0, 0.6);
-  animation:
-    float 3s ease-in-out infinite,
-    colorShift 15s ease-in-out infinite;
-  transition: transform 0.3s ease;
-  cursor: pointer;
-  border: 1px solid rgba(30, 30, 50, 0.6);
-}
-
-.ball:hover {
-  transform: scale(1.05) translateY(-8px);
-  animation: colorShift 15s ease-in-out infinite;
-  box-shadow:
-    0 20px 50px rgba(0, 0, 0, 0.6),
-    0 10px 25px rgba(0, 0, 0, 0.4),
-    inset 0 -20px 40px rgba(0, 0, 0, 0.6);
-}
-
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-8px);
-  }
-}
-
-@keyframes colorShift {
-  0%,
-  100% {
-    background: radial-gradient(
-      circle at 30% 30%,
-      #454565 0%,
-      #1c1c30 40%,
-      #0a0a10 100%
-    );
-  }
-  25% {
-    background: radial-gradient(
-      circle at 30% 30%,
-      #3f4a65 0%,
-      #181e30 40%,
-      #090a10 100%
-    );
-  }
-  50% {
-    background: radial-gradient(
-      circle at 30% 30%,
-      #3a5065 0%,
-      #152230 40%,
-      #080a10 100%
-    );
-  }
-  75% {
-    background: radial-gradient(
-      circle at 30% 30%,
-      #3f4a65 0%,
-      #181e30 40%,
-      #090a10 100%
-    );
-  }
-}
-
-.ball::before {
-  content: "";
-  position: absolute;
-  top: 8%;
-  left: 20%;
-  width: 30%;
-  height: 20%;
-  background: radial-gradient(
-    ellipse,
-    rgba(255, 255, 255, 0.3) 0%,
-    transparent 70%
-  );
-  border-radius: 50%;
-  pointer-events: none;
-}
-
-.ball::after {
-  content: "";
-  position: absolute;
-  bottom: 8%;
-  right: 25%;
-  width: 25%;
-  height: 10%;
-  background: radial-gradient(
-    ellipse,
-    rgba(255, 255, 255, 0.1) 0%,
-    transparent 70%
-  );
-  border-radius: 50%;
-  pointer-events: none;
-}
-
-.question {
-  font-size: clamp(0.5rem, 2vw, 0.75rem);
-  color: lightgrey;
-  max-width: 90%;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  text-align: center;
-  line-height: 1.3;
-  font-style: italic;
-}
-
-.answer {
-  font-family: "Playfair Display", serif;
-  font-style: italic;
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 0.5rem;
-  color: #7dd3fc;
-  text-shadow: 0 0 10px rgba(125, 211, 252, 0.5);
-  max-width: 90%;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  text-align: center;
-  line-height: 1.3;
-}

package/template/web/src/widgets/magic-8-ball.tsx

@@ -1,27 +0,0 @@
-import "@/index.css";
-
-import { mountWidget } from "skybridge/web";
-import { useToolInfo } from "../helpers.js";
-
-function Magic8Ball() {
-  const { input, output } = useToolInfo<"magic-8-ball">();
-
-  return (
-    <div className="container">
-      <div className="ball">
-        {output ? (
-          <>
-            <div className="question">{input.question}</div>
-            <div className="answer">{output.answer}</div>
-          </>
-        ) : (
-          <div className="question">Shaking...</div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default Magic8Ball;
-
-mountWidget(<Magic8Ball />);

package/template/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, type PluginOption } from "vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [skybridge() as PluginOption, react()],
-  root: __dirname,
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-});