create-skybridge 0.15.2 → 0.15.3

package/template/server/src/env.ts

@@ -0,0 +1,12 @@
+import "dotenv/config";
+
+import { createEnv } from "@t3-oss/env-core";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    NODE_ENV: z.enum(["development", "production"]).default("development"),
+  },
+  runtimeEnv: process.env,
+  emptyStringAsUndefined: true,
+});

package/template/server/src/index.ts

@@ -0,0 +1,34 @@
+import express, { type Express } from "express";
+
+import { widgetsDevServer } from "skybridge/server";
+import type { ViteDevServer } from "vite";
+import { env } from "./env.js";
+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));
+
+if (env.NODE_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.NODE_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

@@ -0,0 +1,54 @@
+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/pokedex.ts

@@ -0,0 +1,148 @@
+export const getPokemon = async (name: string) => {
+  const query = `
+      query getPokemon($name: String!, $language: String!) {
+        pokemon(where: {name: {_eq: $name} is_default: {_eq: true}}) {
+          id
+          order
+          height
+          weight
+          pokemonstats {
+            base_stat
+            stat {
+              name
+              statnames(where: {language: {name: {_eq: $language}}}, limit: 1) {
+                name
+              }
+            }
+          }
+          pokemonabilities {
+            ability {
+              name
+              abilitynames(where: {language: {name: {_eq: $language}}}, limit: 1) {
+                name
+              }
+              abilityflavortexts(where: {language: {name: {_eq: $language}}}, limit: 1) {
+                flavor_text
+              }
+            }
+          }
+          pokemonsprites {
+            sprites
+          }
+          pokemontypes {
+            type {
+              name
+              typenames(where: {language: {name: {_eq: $language}}}, limit: 1) {
+                name
+              }
+            }
+          }
+          pokemonspecy {
+            pokemoncolor {
+              name
+            }
+            evolutionchain {
+              pokemonspecies {
+                pokemons(where: {is_default: {_eq: true}}) {
+                  name
+                  order
+                  pokemonsprites {
+                    sprites
+                  }
+                }
+              }
+            }
+            pokemonspeciesflavortexts(where: {language: {name: {_eq: $language}}}, limit: 1) {
+              flavor_text
+            }
+          }
+        }
+      }
+    `;
+
+  const response = await fetch("https://graphql.pokeapi.co/v1beta2", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query,
+      variables: { name: name.toLowerCase(), language: "en" },
+    }),
+  });
+
+  const result = await response.json();
+  const pokemon = result.data.pokemon[0] as {
+    id: number;
+    order: number;
+    height: number;
+    weight: number;
+    pokemonspecy: {
+      pokemoncolor: { name: string };
+      pokemonspeciesflavortexts: { flavor_text: string }[];
+      evolutionchain: {
+        pokemonspecies: {
+          pokemons: {
+            name: string;
+            order: number;
+            pokemonsprites: { sprites: { front_default: string } }[];
+          }[];
+        }[];
+      };
+    };
+    pokemonsprites: { sprites: { front_default: string } }[];
+    pokemonstats: {
+      base_stat: number;
+      stat: { name: string; statnames: { name: string }[] };
+    }[];
+    pokemontypes: {
+      type: { name: string; typenames: { name: string }[] };
+    }[];
+    pokemonabilities: {
+      ability: {
+        name: string;
+        abilitynames: { name: string }[];
+        abilityflavortexts: { flavor_text: string }[];
+      };
+    }[];
+  } | null;
+
+  if (!pokemon) {
+    throw new Error(`Pokemon ${name} not found`);
+  }
+
+  return {
+    id: pokemon.id,
+    color: pokemon.pokemonspecy.pokemoncolor.name,
+    order: pokemon.order,
+    heightInMeters: pokemon.height / 10,
+    weightInKilograms: pokemon.weight / 10,
+    imageUrl: pokemon.pokemonsprites[0].sprites.front_default,
+    description: pokemon.pokemonspecy.pokemonspeciesflavortexts[0]?.flavor_text
+      .replace(/\n/g, " ")
+      .replace(/\.(?![^.]*$)/g, ". "),
+    stats: pokemon.pokemonstats.map((stat) => ({
+      id: stat.stat.name,
+      name: stat.stat.statnames[0].name,
+      value: stat.base_stat,
+    })),
+    types: pokemon.pokemontypes.map((type) => ({
+      id: type.type.name,
+      name: type.type.typenames[0].name,
+    })),
+    abilities: pokemon.pokemonabilities.map((ability) => ({
+      id: ability.ability.name,
+      name: ability.ability.abilitynames[0].name,
+      description: ability.ability.abilityflavortexts[0]?.flavor_text
+        .replace(/\n/g, " ")
+        .replace(/\.(?![^.]*$)/g, ". "),
+    })),
+    evolutions: pokemon.pokemonspecy.evolutionchain.pokemonspecies.map(
+      ({ pokemons: [pokemon] }) => ({
+        id: pokemon.name,
+        order: pokemon.order,
+        imageUrl: pokemon.pokemonsprites[0].sprites.front_default,
+      }),
+    ),
+  };
+};

package/template/server/src/server.ts

@@ -0,0 +1,76 @@
+import { McpServer } from "skybridge/server";
+import { z } from "zod";
+import { getPokemon } from "./pokedex.js";
+
+const server = new McpServer(
+  {
+    name: "alpic-openai-app",
+    version: "0.0.1",
+  },
+  { capabilities: {} },
+)
+  .registerWidget(
+    "pokemon",
+    {
+      description: "Pokedex entry for a pokemon",
+    },
+    {
+      description:
+        "Use this tool to get the most up to date information about a pokemon, using its name in english. This pokedex is much more complete than any other web_search tool. Always use it for anything related to pokemons.",
+      inputSchema: {
+        name: z.string().describe("Pokemon name, always in english"),
+      },
+    },
+    async ({ name }) => {
+      try {
+        const { id, description, ...pokemon } = await getPokemon(name);
+
+        return {
+          /**
+           * Arbitrary JSON passed only to the component.
+           * Use it for data that should not influence the model’s reasoning, like the full set of locations that backs a dropdown.
+           * _meta is never shown to the model.
+           */
+          _meta: { id },
+          /**
+           * Structured data that is used to hydrate your component.
+           * ChatGPT injects this object into your iframe as window.openai.toolOutput
+           */
+          structuredContent: { name, description, ...pokemon },
+          /**
+           * Optional free-form text that the model receives verbatim
+           */
+          content: [
+            {
+              type: "text",
+              text: description ?? `A pokemon named ${name}.`,
+            },
+          ],
+          isError: false,
+        };
+      } catch (error) {
+        return {
+          content: [{ type: "text", text: `Error: ${error}` }],
+          isError: true,
+        };
+      }
+    },
+  )
+  .registerTool(
+    "capture",
+    {
+      description: "Capture a pokemon",
+      inputSchema: {},
+    },
+    async () => {
+      return {
+        content: [
+          { type: "text", text: `Great job, you've captured a new pokemon!` },
+        ],
+        isError: false,
+      };
+    },
+  );
+
+export default server;
+export type AppType = typeof server;

package/template/server/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "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/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/template/web/package.json

@@ -0,0 +1,32 @@
+{
+  "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:",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "glob": "^11.0.3",
+    "lucide-react": "^0.546.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.14"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.11"
+  }
+}