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

package/template/server/src/index.ts

@@ -1,39 +1,62 @@
-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);
-});
+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.server.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "server/dist",
+    "outDir": "dist",
     "sourceMap": true,
     "declaration": true
   },

package/template/web/src/helpers.ts

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

package/template/web/src/index.css

@@ -1,12 +1,23 @@
+@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;
-  height: 100%;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  padding: 1rem;
+  box-sizing: border-box;
 }
 
 .ball {
-  background-color: black;
+  background: radial-gradient(
+    circle at 30% 30%,
+    #454565 0%,
+    #1c1c30 40%,
+    #0a0a10 100%
+  );
   border-radius: 50%;
   width: 12rem;
   height: 12rem;
@@ -16,16 +27,128 @@
   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: 0.75rem;
+  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-size: 1.125rem;
-  font-weight: bold;
+  font-family: "Playfair Display", serif;
+  font-style: italic;
+  font-size: 1.25rem;
+  font-weight: 600;
   margin-top: 0.5rem;
-  color: aqua;
+  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

@@ -5,15 +5,18 @@ 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>
+        {output ? (
+          <>
+            <div className="question">{input.question}</div>
+            <div className="answer">{output.answer}</div>
+          </>
+        ) : (
+          <div className="question">Shaking...</div>
+        )}
       </div>
     </div>
   );

package/template/web/vite.config.ts

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

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

@@ -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/@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"
-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"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
-else
-  exec node  "$basedir/../@modelcontextprotocol/inspector/cli/build/cli.js" "$@"
-fi

package/template/node_modules/.bin/shx

@@ -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/shx@0.4.0/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.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/shx@0.4.0/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.0/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.4.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/../shx/lib/cli.js" "$@"
-else
-  exec node  "$basedir/../shx/lib/cli.js" "$@"
-fi

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,61 +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,
-      };
-    }
-  },
-);
-
-export default server;
-export type AppType = typeof server;

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