create-skybridge 0.0.0-dev.fd61a71 → 0.0.0-dev.fd6e4e8

package/dist/index.js

@@ -172,7 +172,9 @@ export async function init(args = process.argv.slice(2)) {
             "alpic-ai/skybridge",
             "-s",
             "chatgpt-app-builder",
-            ...(interactive ? [] : ["--yes"]),
+            ...(interactive
+                ? []
+                : ["--yes", "-a", "universal", "-a", "claude-code"]),
         ], {
             stdio: "inherit",
             cwd: targetDir,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.fd61a71",
+  "version": "0.0.0-dev.fd6e4e8",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
@@ -23,13 +23,14 @@
   },
   "devDependencies": {
     "typescript": "^6.0.2",
-    "vitest": "^4.1.2"
+    "vitest": "^4.1.4"
   },
   "scripts": {
     "build": "tsc",
     "test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
     "test:unit": "vitest run",
     "test:type": "tsc --noEmit",
+    "format": "biome check --write --error-on-warnings",
     "test:format": "biome ci"
   }
 }

package/template/README.md

@@ -44,17 +44,14 @@ 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 widget)
+│   ├── 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
 ```
 
@@ -62,16 +59,16 @@ This command starts:
 
 #### 1. Add a new widget
 
-- 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-widget`) using [`registerTool`](https://docs.skybridge.tech/api-reference/register-tool) and a `view` config.
+- Create a matching React component at `src/views/my-widget.tsx`. **The file name must match the widget name exactly**.
 
 #### 2. Edit widgets 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.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/node_modules:/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/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/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/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/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/node_modules:/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/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/node_modules/skybridge/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/skybridge@0.35.13_@modelcontextprotocol+sdk@1.29.0_zod@4.3.6__@skybridge+devtools@0.35._9590acdb2dd61fe785a7e8fd166ca279/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/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

@@ -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,12 +15,12 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "skybridge": ">=0.35.13 <1.0.0",
+    "skybridge": ">=0.35.14 <1.0.0",
     "vite": "^8.0.3",
     "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@skybridge/devtools": ">=0.35.13 <1.0.0",
+    "@skybridge/devtools": ">=0.35.14 <1.0.0",
     "@types/react": "^19.2.14",
     "@types/node": "^24.12.0",
     "@types/react-dom": "^19.2.3",

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,20 +25,20 @@ 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);

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/{web/vite.config.ts → vite.config.ts}

@@ -1,12 +1,10 @@
 import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { skybridge } from "skybridge/web";
-import { defineConfig, type PluginOption } from "vite";
+import { defineConfig } from "vite";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [skybridge() as PluginOption, react()],
-  root: __dirname,
+  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 />);