create-skybridge 0.0.0-dev.edc0ede → 0.0.0-dev.eea25a3

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

@@ -2,6 +2,7 @@ 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";
 
@@ -11,9 +12,7 @@ app.use(express.json());
 
 app.use(mcp(server));
 
-const env = process.env.NODE_ENV || "development";
-
-if (env !== "production") {
+if (env.NODE_ENV !== "production") {
   app.use(await widgetsDevServer());
 }
 
@@ -23,7 +22,7 @@ app.listen(3000, (error) => {
     process.exit(1);
   }
 
-  console.log(`Server listening on port 3000 - ${env}`);
+  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",
   );

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

@@ -1,28 +1,6 @@
 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",
-];
+import { getPokemon } from "./pokedex.js";
 
 const server = new McpServer(
   {
@@ -30,37 +8,69 @@ const server = new McpServer(
     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."),
+)
+  .registerWidget(
+    "pokemon",
+    {
+      description: "Pokedex entry for a pokemon",
     },
-  },
-  async ({ question }) => {
-    try {
-      // deterministic answer
-      const hash = question
-        .split("")
-        .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-      const answer = Answers[hash % Answers.length];
+    {
+      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 {
-        structuredContent: { answer },
-        content: [],
+        content: [
+          { type: "text", text: `Great job, you've captured a new pokemon!` },
+        ],
         isError: false,
       };
-    } catch (error) {
-      return {
-        content: [{ type: "text", text: `Error: ${error}` }],
-        isError: true,
-      };
-    }
-  },
-);
+    },
+  );
 
 export default server;
 export type AppType = typeof server;

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

@@ -10,14 +10,22 @@
   },
   "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"
+    "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"
   }