create-skybridge 0.0.0-dev.10bf56b → 0.0.0-dev.1139380

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.10bf56b",
+  "version": "0.0.0-dev.1139380",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",

package/template/README.md

@@ -44,31 +44,34 @@ This command starts:
 #### 3. Project structure
 
 ```
-├── src/
-│   ├── server.ts         # Server entry point
-│   ├── views/            # React components (one per view)
-│   ├── components/       # Shared UI components
-│   ├── helpers.ts        # Shared utilities
-│   └── index.css         # Global styles
-├── vite.config.ts
+├── server/
+│   └── src/
+│       └── index.ts      # Server entry point
+├── web/
+│   ├── src/
+│   │   ├── widgets/      # React components (one per widget)
+│   │   ├── helpers.ts    # Shared utilities
+│   │   └── index.css     # Global styles
+│   └── vite.config.ts
 ├── alpic.json            # Deployment config
+├── nodemon.json          # Dev server config
 └── package.json
 ```
 
-### Create your first view
+### Create your first widget
 
-#### 1. Add a new view
+#### 1. Add a new widget
 
-- Register a tool in `src/server.ts` with a unique name (e.g., `my-view`) using [`registerTool`](https://docs.skybridge.tech/api-reference/register-tool) and a `view` config.
-- Create a matching React component at `src/views/my-view.tsx`. **The file name must match the view name exactly**.
+- Register a widget in `server/src/server.ts` with a unique name (e.g., `my-widget`) using [`registerWidget`](https://docs.skybridge.tech/api-reference/register-widget)
+- Create a matching React component at `web/src/widgets/my-widget.tsx`. **The file name must match the widget name exactly**.
 
-#### 2. Edit views with Hot Module Replacement (HMR)
+#### 2. Edit widgets with Hot Module Replacement (HMR)
 
-Edit and save components in `src/views/` — changes will appear instantly inside your App.
+Edit and save components in `web/src/widgets/` — changes will appear instantly inside your App.
 
 #### 3. Edit server code
 
-Modify files in `src/` and refresh the connection with your testing MCP Client to see the changes.
+Modify files in `server/` and refresh the connection with your testing MCP Client to see the changes.
 
 ### Testing your App
 

package/template/_gitignore

@@ -2,5 +2,4 @@ node_modules/
 dist/
 .env*
 .DS_store
-*.tsbuildinfo
-.skybridge/
+*.tsbuildinfo

package/template/node_modules/.bin/sb

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../skybridge/bin/run.js" "$@"

package/template/node_modules/.bin/skybridge

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.14_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9ddb2dfa56e61c7e1e71871404a50ada/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../skybridge/bin/run.js" "$@"

package/template/package.json

@@ -15,14 +15,14 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "skybridge": ">=0.0.0-dev.10bf56b",
+    "skybridge": ">=0.35.14 <1.0.0",
     "vite": "^8.0.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@skybridge/devtools": ">=0.35.14 <1.0.0",
-    "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
+    "@types/node": "^24.12.0",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "alpic": "^1.104.1",

package/template/server/src/index.ts

@@ -0,0 +1,82 @@
+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."),
+        maxAnswers: z
+          .number()
+          .describe("The maximum number of answers to return.")
+          .optional(),
+        includeRandom: z
+          .boolean()
+          .describe("Whether to include a random answer.")
+          .optional(),
+      },
+    },
+    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,
+        };
+      }
+    },
+  )
+  .registerTool(
+    "get-answers",
+    {
+      description: "Get answers",
+    },
+    async () => {
+      return {
+        content: [{ type: "text", text: "Answers" }],
+      };
+    },
+  );
+
+server.run();
+
+export type AppType = typeof server;

package/template/tsconfig.json

@@ -2,10 +2,12 @@
   "extends": "skybridge/tsconfig",
 
   "compilerOptions": {
+    "outDir": "dist",
+    "types": ["node", "vite/client"],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./web/src/*"]
     }
   },
 
-  "include": ["src", ".skybridge/**/*.d.ts"]
+  "include": ["server/src", "web/src"]
 }

package/template/web/src/helpers.ts

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

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

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

package/template/{vite.config.ts → web/vite.config.ts}

@@ -1,10 +1,12 @@
 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: {
       "@": path.resolve(__dirname, "./src"),

package/template/src/components/ball.tsx

@@ -1,22 +0,0 @@
-export function Ball({
-  question,
-  answer,
-}: {
-  question?: string;
-  answer?: string;
-}) {
-  return (
-    <div className="container">
-      <div className="ball">
-        {answer ? (
-          <>
-            <div className="question">{question}</div>
-            <div className="answer">{answer}</div>
-          </>
-        ) : (
-          <div className="question">Shaking...</div>
-        )}
-      </div>
-    </div>
-  );
-}

package/template/src/helpers.ts

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

package/template/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: {} },
-).registerTool(
-  {
-    name: "magic-8-ball",
-    description: "For fortune-telling or seeking advice.",
-    inputSchema: {
-      question: z.string().describe("The user question."),
-    },
-    view: {
-      component: "magic-8-ball",
-      description: "Magic 8 Ball",
-    },
-  },
-  async ({ question }) => {
-    try {
-      const hash = question
-        .split("")
-        .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-      const answer = Answers[hash % Answers.length];
-      return {
-        structuredContent: { answer },
-        isError: false,
-      };
-    } catch (error) {
-      return {
-        content: [{ type: "text", text: `Error: ${error}` }],
-        isError: true,
-      };
-    }
-  },
-);
-
-server.run();
-
-export type AppType = typeof server;

package/template/src/views/magic-8-ball.tsx

@@ -1,10 +0,0 @@
-import "@/index.css";
-
-import { Ball } from "../components/ball.js";
-import { useToolInfo } from "../helpers.js";
-
-export default function Magic8Ball() {
-  const { input, output } = useToolInfo<"magic-8-ball">();
-
-  return <Ball question={input?.question} answer={output?.answer} />;
-}