create-skybridge 0.0.0-dev.b9ea588 → 0.0.0-dev.b9f65be

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/{template/web → templates/demo}/vite.config.ts

@@ -1,12 +1,11 @@
 import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import { skybridge } from "skybridge/web";
+import { skybridge } from "skybridge/vite";
 import { defineConfig } from "vite";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [skybridge(), react()],
-
+  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,23 +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 scaffold a new project", 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();
-    });
-});

package/template/README.md

@@ -1,66 +0,0 @@
-# ChatGPT Apps SDK Alpic Starter
-
-A minimal TypeScript template for building OpenAI Apps SDK compatible MCP servers with widget rendering in ChatGPT.
-
-## Getting Started
-
-### Prerequisites
-
-- Node.js 22+
-- pnpm (install with `npm install -g pnpm`)
-- HTTP tunnel such as [ngrok](https://ngrok.com/download)
-
-### Local Development
-
-#### 1. Install
-
-```bash
-pnpm install
-```
-
-#### 2. Start your local server
-
-Run the development server from the root directory:
-
-```bash
-pnpm 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/_gitignore

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

package/template/alpic.json

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

package/template/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "apps-sdk-template",
-  "version": "0.0.1",
-  "private": true,
-  "description": "Alpic MCP Server Template",
-  "type": "module",
-  "packageManager": "pnpm@10.18.3",
-  "scripts": {
-    "dev": "pnpm --filter @apps-sdk-template/server dev",
-    "build": "pnpm web:build && rm -rf server/dist && pnpm --filter=@apps-sdk-template/server --prod deploy server/dist && cp -r web/dist server/dist/assets && pnpm --filter=@apps-sdk-template/server build",
-    "start": "pnpm server:start",
-    "inspector": "pnpm --filter @apps-sdk-template/server inspector",
-    "server:build": "pnpm --filter @apps-sdk-template/server build",
-    "server:start": "pnpm --filter @apps-sdk-template/server start",
-    "web:build": "pnpm --filter @apps-sdk-template/web build",
-    "web:preview": "pnpm --filter @apps-sdk-template/web preview"
-  },
-  "devDependencies": {
-    "tsx": "^4.19.4"
-  }
-}

package/template/pnpm-workspace.yaml

@@ -1,7 +0,0 @@
-packages:
-  - "web"
-  - "server"
-sharedWorkspaceLockfile: false
-
-catalog:
-  skybridge: ^0.13.1

package/template/server/nodemon.json

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

package/template/server/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@apps-sdk-template/server",
-  "version": "0.0.1",
-  "private": true,
-  "main": "dist/index.js",
-  "description": "Alpic MCP Server Template",
-  "files": [
-    "dist"
-  ],
-  "type": "module",
-  "scripts": {
-    "dev": "nodemon",
-    "build": "tsc",
-    "start": "node dist/index.js",
-    "inspector": "mcp-inspector http://localhost:3000/mcp"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.24.3",
-    "express": "^5.1.0",
-    "skybridge": "catalog:",
-    "vite": "^7.1.11",
-    "zod": "^4.1.13"
-  },
-  "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.17.5",
-    "@types/express": "^5.0.3",
-    "@types/node": "^22.15.30",
-    "nodemon": "^3.1.10",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.2"
-  }
-}

package/template/server/src/index.ts

@@ -1,35 +0,0 @@
-import express, { type Express } from "express";
-
-import { 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 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",
-  );
-});
-
-process.on("SIGINT", async () => {
-  console.log("Server shutdown complete");
-  process.exit(0);
-});

package/template/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/server/src/server.ts

@@ -1,66 +0,0 @@
-import { McpServer } from "skybridge/server";
-import { z } from "zod";
-
-const Answers = [
-  "As I see it, yes",
-  "Ask again later",
-  "Better not tell you now",
-  "Cannot predict now",
-  "Concentrate and ask again",
-  "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",
-  "Reply hazy, try again",
-  "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,
-      };
-    }
-  },
-);
-
-export default server;
-export type AppType = typeof server;

package/template/server/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "jsx": "react",
-    "inlineSources": true
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["dist", "node_modules"]
-}

package/template/web/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@apps-sdk-template/web",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "echo 'Not implemented",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "skybridge": "catalog:",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
-  },
-  "devDependencies": {
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "typescript": "~5.9.3",
-    "vite": "^7.1.11"
-  }
-}

package/template/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/web/src/index.css

@@ -1,30 +0,0 @@
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
-
-.ball {
-  background-color: black;
-  border-radius: 50%;
-  width: 12rem;
-  height: 12rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-family: monospace;
-}
-
-.question {
-  font-size: 0.75rem;
-  color: lightgrey;
-}
-
-.answer {
-  font-size: 1.125rem;
-  font-weight: bold;
-  margin-top: 0.5rem;
-  color: aqua;
-}

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

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

package/template/web/tsconfig.app.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true,
-
-    /* Shadcn Config */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
-}

package/template/web/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

package/template/web/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}