create-skybridge 0.0.0-dev.d26270f → 0.0.0-dev.d26b118

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", "-a", "claude-code"]),
+            ...(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.d26270f",
+  "version": "0.0.0-dev.d26b118",
   "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/_gitignore

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

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"

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 />);