create-skybridge 0.0.0-dev.e205b05 → 0.0.0-dev.e210492

package/template/package.json

@@ -5,35 +5,37 @@
   "description": "Alpic MCP Server Template",
   "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"
+    "dev": "skybridge dev",
+    "dev:tunnel": "skybridge dev --tunnel",
+    "build": "skybridge build",
+    "start": "skybridge start",
+    "deploy": "alpic deploy"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.24.3",
-    "express": "^5.1.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "skybridge": ">=0.16.0 <1.0.0",
-    "vite": "^7.1.11",
-    "zod": "^4.1.13"
+    "@alpic-ai/ui": "^1.122.0",
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "skybridge": ">=0.0.0-dev.e210492",
+    "sonner": "^2.0.7",
+    "tw-animate-css": "^1.4.0",
+    "vite": "^8.0.3",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@modelcontextprotocol/inspector": "^0.17.5",
-    "@types/express": "^5.0.3",
-    "@types/node": "^22.15.30",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.4",
-    "nodemon": "^3.1.10",
-    "shx": "^0.3.4",
-    "tsx": "^4.19.4",
-    "typescript": "^5.7.2"
+    "@skybridge/devtools": "workspace:*",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "alpic": "^1.104.1",
+    "tailwindcss": "^4.2.4",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2"
   },
-  "workspaces": []
+  "engines": {
+    "node": ">=24.14.1"
+  }
 }

package/template/src/helpers.ts

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

package/template/src/index.css

@@ -0,0 +1,38 @@
+@import url("https://fonts.googleapis.com/css2?family=Mozilla+Text:wght@400..700&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@alpic-ai/ui/theme";
+
+@source "../node_modules/@alpic-ai/ui/src";
+
+@theme {
+  --font-mozilla: "Mozilla Text", serif;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-twirl: twirl 20s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes twirl {
+  0%,
+  80% {
+    transform: rotateY(0deg);
+  }
+  85% {
+    transform: rotateY(180deg);
+  }
+  95% {
+    transform: rotateY(180deg);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}

package/template/src/server.ts

@@ -0,0 +1,44 @@
+import { McpServer } from "skybridge/server";
+import { z } from "zod";
+
+const server = new McpServer(
+  {
+    name: "alpic-openai-app",
+    version: "0.0.1",
+  },
+  { capabilities: {} },
+).registerTool(
+  {
+    name: "start",
+    description: "Onboard Skybridge",
+    inputSchema: {
+      name: z.string().describe("The user name."),
+    },
+    view: {
+      component: "start",
+      description: "Onboarding deck",
+    },
+  },
+  async ({ name }) => {
+    try {
+      return {
+        structuredContent: { name },
+        isError: false,
+      };
+    } catch (error) {
+      return {
+        content: [{ type: "text", text: `Error: ${error}` }],
+        isError: true,
+      };
+    }
+  },
+);
+
+if (process.env.NODE_ENV === "production") {
+  const { default: manifest } = await import("./vite-manifest.js");
+  server.setViteManifest(manifest);
+}
+
+export default await server.run();
+
+export type AppType = typeof server;

package/template/src/views/components/intro.tsx

@@ -0,0 +1,43 @@
+import { Button } from "@alpic-ai/ui/components/button";
+import { CheckCheck, ChevronsRight, Info } from "lucide-react";
+import { useToolInfo } from "@/helpers.js";
+
+export default function Intro({ onNext }: { onNext: () => void }) {
+  const { input } = useToolInfo<"start">();
+
+  return (
+    <>
+      <div className="flex flex-col gap-3">
+        <h1 className="type-display-xs font-mozilla font-semibold">
+          Howdy, <span className="text-primary">{input?.name} !</span>
+        </h1>
+        <p className="">
+          You're wondering how the view displays your name, don't you? Well,
+          it's because it can read <strong>tool output</strong>. The LLM also
+          knows about it.
+        </p>
+      </div>
+      <p className="flex items-start gap-2 type-text-xs text-muted-foreground">
+        <Info className="size-4 shrink-0" />
+        <span>
+          The{" "}
+          <a
+            href="https://docs.skybridge.tech"
+            target="_blank"
+            rel="noreferrer"
+            className="underline underline-offset-4"
+          >
+            useToolInfo
+          </a>{" "}
+          hook hydrates the view with tool input, output and metadata.
+        </span>
+      </p>
+      <div className="flex justify-end gap-2">
+        <Button variant="cta" onClick={onNext}>
+          <CheckCheck />
+          Sharing view state
+        </Button>
+      </div>
+    </>
+  );
+}

package/template/src/views/start.tsx

@@ -0,0 +1,87 @@
+import "@/index.css";
+
+import { Card, CardContent } from "@alpic-ai/ui/components/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@alpic-ai/ui/components/tooltip";
+import { useState } from "react";
+import { useLayout, useViewState } from "skybridge/web";
+import Intro from "./components/intro.js";
+import classic from "./images/mascot/classic.png";
+
+const STEPS = [
+  "Reading tool output",
+  "Sharing view state",
+  "Calling tools",
+] as const;
+const TOTAL_STEPS = STEPS.length;
+
+export default function Start() {
+  const [state] = useViewState({ mascot: "classic" });
+  const { theme } = useLayout();
+  const [step, setStep] = useState(0);
+
+  let mascot: string;
+  switch (state.mascot) {
+    case "classic":
+      mascot = classic;
+      break;
+    default:
+      throw new Error("cannot find mascot");
+  }
+
+  return (
+    <div
+      className={`${theme === "dark" ? "dark" : ""} flex min-h-full items-center justify-center p-6 `}
+    >
+      <Card className="w-full max-w-2xl">
+        <CardContent>
+          <div className="flex flex-col items-center gap-6 md:flex-row md:items-stretch">
+            <div className="shrink-0 self-center animate-float">
+              <img
+                src={mascot}
+                alt="Skybridge mascot"
+                className="h-40 w-40 object-contain animate-twirl"
+              />
+            </div>
+            <div className="flex flex-1 flex-col justify-between gap-6">
+              <div className="flex gap-1.5">
+                {STEPS.map((label, i) => (
+                  <Tooltip key={label}>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => setStep(i)}
+                        className={`h-1 flex-1 rounded-full ${
+                          i <= step ? "bg-primary" : "bg-muted"
+                        }`}
+                        aria-label={label}
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent>{label}</TooltipContent>
+                  </Tooltip>
+                ))}
+              </div>
+              {(() => {
+                const onNext = () =>
+                  setStep((s) => Math.min(s + 1, TOTAL_STEPS - 1));
+                switch (step) {
+                  case 0:
+                    return <Intro onNext={onNext} />;
+                  case 1:
+                    return <div>step 2 placeholder</div>;
+                  case 2:
+                    return <div>step 3 placeholder</div>;
+                  default:
+                    return null;
+                }
+              })()}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/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/template/tsconfig.json

@@ -1,23 +1,11 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "jsx": "react-jsx",
-
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "verbatimModuleSyntax": true,
-
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
+  "extends": "skybridge/tsconfig",
 
-    "noEmit": true
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["server/src", "web/src", "web/vite.config.ts"],
-  "exclude": ["dist", "node_modules"]
+
+  "include": ["src", ".skybridge/**/*.d.ts"]
 }

package/template/{web/vite.config.ts → 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()],
-  root: __dirname,
+  plugins: [skybridge(), react(), tailwindcss()],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

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.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/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.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/inspector/cli/build/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/inspector/cli/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/inspector/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/node_modules/@modelcontextprotocol/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@modelcontextprotocol+inspector@0.17.5_@types+node@22.18.12_@types+react-dom@19.2.3_@ty_960011790b33063d7255347351a0cc44/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/nodemon

@@ -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/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/bin/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules/nodemon/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/nodemon@3.1.11/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../nodemon/bin/nodemon.js" "$@"
-else
-  exec node  "$basedir/../nodemon/bin/nodemon.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.3.4/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.3.4/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.3.4/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.3.4/node_modules/shx/lib/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.3.4/node_modules/shx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/shx@0.3.4/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/nodemon.json

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

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,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/tsconfig.server.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "noEmit": false,
-    "outDir": "server/dist",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["server/src"],
-  "exclude": ["dist", "node_modules"]
-}

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,31 +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;
-  text-align: center;
-}
-
-.question {
-  font-size: 0.75rem;
-  color: lightgrey;
-}
-
-.answer {
-  font-size: 1.125rem;
-  font-weight: bold;
-  margin-top: 0.5rem;
-  color: aqua;
-}