create-skybridge 0.35.20 → 0.36.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.35.20",
+  "version": "0.36.0",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",

package/template/README.md

@@ -44,34 +44,31 @@ This command starts:
 #### 3. Project structure
 
 ```
-├── 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
+├── 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
 ├── alpic.json            # Deployment config
-├── nodemon.json          # Dev server config
 └── package.json
 ```
 
-### Create your first widget
+### Create your first view
 
-#### 1. Add a new widget
+#### 1. Add a new view
 
-- 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**.
+- 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**.
 
-#### 2. Edit widgets with Hot Module Replacement (HMR)
+#### 2. Edit views with Hot Module Replacement (HMR)
 
-Edit and save components in `web/src/widgets/` — changes will appear instantly inside your App.
+Edit and save components in `src/views/` — changes will appear instantly inside your App.
 
 #### 3. Edit server code
 
-Modify files in `server/` and refresh the connection with your testing MCP Client to see the changes.
+Modify files in `src/` and refresh the connection with your testing MCP Client to see the changes.
 
 ### Testing your App
 

package/template/_gitignore

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

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/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"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  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"
+  export NODE_PATH="/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/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"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  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"
+  export NODE_PATH="/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

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "skybridge dev",
+    "dev:tunnel": "skybridge dev --tunnel",
     "build": "skybridge build",
     "start": "skybridge start",
     "deploy": "alpic deploy"
@@ -14,14 +15,14 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "skybridge": ">=0.35.14 <1.0.0",
+    "skybridge": ">=0.36.0",
     "vite": "^8.0.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
     "@skybridge/devtools": ">=0.35.14 <1.0.0",
-    "@types/react": "^19.2.14",
     "@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",

package/template/src/components/ball.tsx

@@ -0,0 +1,22 @@
+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

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

package/template/{server/src/index.ts → src/server.ts}

@@ -25,27 +25,26 @@ const server = new McpServer(
     version: "0.0.1",
   },
   { capabilities: {} },
-).registerWidget(
-  "magic-8-ball",
-  {
-    description: "Magic 8 Ball",
-  },
+).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 {
-      // 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) {

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

@@ -0,0 +1,10 @@
+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} />;
+}

package/template/tsconfig.json

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

package/template/vite.config.ts

@@ -0,0 +1,13 @@
+import path from "node:path";
+import react from "@vitejs/plugin-react";
+import { skybridge } from "skybridge/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [skybridge(), react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/template/web/src/helpers.ts

@@ -1,4 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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/web/vite.config.ts

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