create-skybridge 0.0.0-dev.98f4db2 → 0.0.0-dev.98fae76

package/dist/index.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from "node:url";
 import * as prompts from "@clack/prompts";
 import spawn from "cross-spawn";
 import mri from "mri";
+const OUTPUT_TAIL_LINES = 10;
 const DEFAULT_PROJECT_NAME = "skybridge-project";
 const PACKAGE_MANAGERS = ["bun", "deno", "npm", "pnpm", "yarn"];
 const TEMPLATES = ["demo", "blank"];
@@ -19,7 +20,7 @@ Arguments:
 Options:
   --blank        scaffold a minimal project without demo tools and views
   --overwrite    remove existing files if target directory is not empty
-  --pm <choice>  package manager to use (choices: ${PACKAGE_MANAGERS.join(", ")}. default: npm)
+  --pm <choice>  package manager to use (choices: ${PACKAGE_MANAGERS.join(", ")}. default to npm when none is provided or infered)
   --skip-skills  skip installing coding agent skills
   --start        start dev server
   --yes          skip prompts and use default values for unprovided options
@@ -174,6 +175,43 @@ export async function init(args = process.argv.slice(2)) {
     catch (error) {
         abort("Failed to update project name in package.json.", String(error));
     }
+    // Async spawn wrapper so a spinner can keep animating during the subprocess
+    // (cross-spawn.sync would block the event loop). Captures stdout/stderr to
+    // `output` when stdio is "pipe", trimmed to the last OUTPUT_TAIL_LINES lines
+    // — install errors land at the tail, so we keep that and prefix with an
+    // ellipsis when content gets dropped.
+    function spawnAsync(command, args) {
+        return new Promise((resolve) => {
+            let raw = "";
+            const child = spawn(command, args, {
+                stdio: ["ignore", "pipe", "pipe"],
+                cwd: root,
+            });
+            child.stdout?.on("data", (chunk) => {
+                raw += chunk.toString();
+            });
+            child.stderr?.on("data", (chunk) => {
+                raw += chunk.toString();
+            });
+            const done = (status) => {
+                const tail = [];
+                for (const part of raw.split("\n").reverse()) {
+                    const line = part.trim();
+                    if (!line) {
+                        continue;
+                    }
+                    if (tail.length >= OUTPUT_TAIL_LINES) {
+                        tail.push(`… (truncated, showing last ${OUTPUT_TAIL_LINES} lines)`);
+                        break;
+                    }
+                    tail.push(line);
+                }
+                resolve({ status, output: tail.reverse().join("\n") });
+            };
+            child.on("close", done);
+            child.on("error", () => done(1));
+        });
+    }
     // 6. Skills install (single Y/n prompt)
     let installSkills;
     if (argv["skip-skills"]) {
@@ -194,7 +232,7 @@ export async function init(args = process.argv.slice(2)) {
     }
     if (installSkills) {
         Spinner.start("Installing coding agent skills");
-        const status = await spawnAsync("npx", [
+        const { status, output } = await spawnAsync("npx", [
             "--yes",
             "skills",
             "add",
@@ -204,14 +242,17 @@ export async function init(args = process.argv.slice(2)) {
             "--agent",
             "universal",
             "claude-code",
+            "--copy", // something the symlink fails for some reason
             "--yes",
-        ], { stdio: "ignore", cwd: root });
-        if (status === 0) {
-            Spinner.stop("Installed coding agent skills");
+        ]);
+        // skills cli always returns 0 so we look for the success message
+        if (status === 0 && output.includes("Done!")) {
+            Spinner.stop(`Installed coding agent skills`);
         }
         else {
-            Spinner.error("Failed to install coding agent skills");
-            prompts.log.warn("Install them later with `npx skills add alpic-ai/skybridge`.");
+            Spinner.error(`Failed to install coding agent skills:
+\x1b[2m${output}\x1b[0m`);
+            prompts.log.error("Try manually: `npx skills add alpic-ai/skybridge`.");
         }
     }
     // 7. Package manager — autodetect, prompt only if detection fails (interactive)
@@ -231,15 +272,13 @@ export async function init(args = process.argv.slice(2)) {
     }
     // 8. Always install dependencies
     Spinner.start(`Installing dependencies with ${pm}`);
-    const installStatus = await spawnAsync(pm, ["install"], {
-        stdio: "ignore",
-        cwd: root,
-    });
-    if (installStatus === 0) {
+    const { status, output } = await spawnAsync(pm, ["install"]);
+    if (status === 0) {
         Spinner.stop(`Installed dependencies with ${pm}`);
     }
     else {
-        Spinner.error("Dependency installation failed");
+        Spinner.error(`Dependency installation failed:
+\x1b[2m${output}\x1b[0m`);
         abort(`Try manually: cd ${targetDir} && ${pm} install`);
     }
     // 9. Start dev server?
@@ -286,15 +325,6 @@ function abort(...lines) {
     prompts.outro("Aborted");
     process.exit(1);
 }
-// Async spawn wrapper used when we want a spinner to keep animating during
-// the subprocess (cross-spawn.sync would block the event loop).
-function spawnAsync(command, args, options) {
-    return new Promise((resolve) => {
-        const child = spawn(command, args, options);
-        child.on("close", (code) => resolve(code));
-        child.on("error", () => resolve(1));
-    });
-}
 function parsePackageManager(value) {
     switch (value) {
         case "bun":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.98f4db2",
+  "version": "0.0.0-dev.98fae76",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",

package/templates/blank/README.md

@@ -1,13 +1,12 @@
-# Skybridge Starter
+# Skybridge Boilerplate
 
-A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech/home) framework.
+A minimal TypeScript boilerplate for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech) framework.
 
 ## Getting Started
 
 ### Prerequisites
 
 - Node.js 24+
-- HTTP tunnel such as [Alpic tunnel](https://docs.alpic.ai/cli/tunnel) if you want to test with remote MCP hosts like ChatGPT or Claude.ai.
 
 ### Local Development
 
@@ -16,11 +15,13 @@ A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybri
 ```bash
 npm install
 # or
-yarn install
-# or
 pnpm install
 # or
 bun install
+# or
+deno install
+# or
+yarn install
 ```
 
 #### 2. Start your local server
@@ -30,16 +31,18 @@ Run the development server from the root directory:
 ```bash
 npm run dev
 # or
-yarn dev
-# or
 pnpm dev
 # or
 bun dev
+# or
+deno task dev
+# or
+yarn dev
 ```
 
 This command starts:
 - Your MCP server at `http://localhost:3000/mcp`.
-- Skybridge DevTools UI at `http://localhost:3000/`.
+- Skybridge DevTools UI at `http://localhost:3000`.
 
 #### 3. Project structure
 
@@ -65,23 +68,21 @@ Edit and save components in `src/views/` — changes will appear instantly insid
 
 #### 3. Edit server code
 
-Modify files in `src/` and refresh the connection with your testing MCP Client to see the changes.
+Modify files in `src/` and refresh the tool list with your MCP Client to see the changes.
 
 ### Testing your App
 
-You can test your App locally by using our DevTools UI on `localhost:3000` while running the `pnpm dev` command.
+You can test your app locally by using our DevTools UI on `http://localhost:3000` while running the `dev` command.
 
-To test your app with other MCP Clients like ChatGPT, Claude or VSCode, see [Testing Your App](https://docs.skybridge.tech/quickstart/test-your-app).
+To connect your app with web clients like ChatGPT or Claude, expose your server on the internet by adding the `--tunnel` flag.
+By enabling the tunnel, you'll also be able to access a playground to chat with your app and a real LLM. Learn more by reading the [test guide](https://docs.skybridge.tech/quickstart/test-your-app).
 
 
 ## Deploy to Production
 
 Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
 
-The simplest way to deploy your App in minutes is [Alpic](https://alpic.ai/).
-1. Create an account on [Alpic platform](https://app.alpic.ai/).
-2. Connect your GitHub repository to automatically deploy at each commit.
-3. Use your remote App URL to connect it to MCP Clients, or use the Alpic Playground to easily test your App.
+The simplest way to deploy your app is by running the `deploy` command, which will push your MCP server to the [Alpic](https://alpic.ai/) cloud for free.
 
 ## Resources
 - [Skybridge Documentation](https://docs.skybridge.tech/)

package/templates/blank/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "skybridge": "^0.0.0-dev.98f4db2",
+    "skybridge": "^0.0.0-dev.98fae76",
     "vite": "^8.0.3"
   },
   "devDependencies": {

package/templates/demo/README.md

@@ -1,13 +1,12 @@
-# Skybridge Starter
+# Skybridge Template
 
-A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech/home) framework.
+A starter TypeScript template for building MCP and ChatGPT Apps with the [Skybridge](https://docs.skybridge.tech) framework.
 
 ## Getting Started
 
 ### Prerequisites
 
 - Node.js 24+
-- HTTP tunnel such as [Alpic tunnel](https://docs.alpic.ai/cli/tunnel) if you want to test with remote MCP hosts like ChatGPT or Claude.ai.
 
 ### Local Development
 
@@ -16,11 +15,13 @@ A minimal TypeScript template for building MCP and ChatGPT Apps with the [Skybri
 ```bash
 npm install
 # or
-yarn install
-# or
 pnpm install
 # or
 bun install
+# or
+deno install
+# or
+yarn install
 ```
 
 #### 2. Start your local server
@@ -30,16 +31,18 @@ Run the development server from the root directory:
 ```bash
 npm run dev
 # or
-yarn dev
-# or
 pnpm dev
 # or
 bun dev
+# or
+deno task dev
+# or
+yarn dev
 ```
 
 This command starts:
 - Your MCP server at `http://localhost:3000/mcp`.
-- Skybridge DevTools UI at `http://localhost:3000/`.
+- Skybridge DevTools UI at `http://localhost:3000`.
 
 #### 3. Project structure
 
@@ -68,23 +71,21 @@ Edit and save components in `src/views/` — changes will appear instantly insid
 
 #### 3. Edit server code
 
-Modify files in `src/` and refresh the connection with your testing MCP Client to see the changes.
+Modify files in `src/` and refresh the tool list with your MCP Client to see the changes.
 
 ### Testing your App
 
-You can test your App locally by using our DevTools UI on `localhost:3000` while running the `pnpm dev` command.
+You can test your app locally by using our DevTools UI on `http://localhost:3000` while running the `dev` command.
 
-To test your app with other MCP Clients like ChatGPT, Claude or VSCode, see [Testing Your App](https://docs.skybridge.tech/quickstart/test-your-app).
+To connect your app with web clients like ChatGPT or Claude, expose your server on the internet by adding the `--tunnel` flag.
+By enabling the tunnel, you'll also be able to access a playground to chat with your app and a real LLM. Learn more by reading the [test guide](https://docs.skybridge.tech/quickstart/test-your-app).
 
 
 ## Deploy to Production
 
 Skybridge is infrastructure vendor agnostic, and your app can be deployed on any cloud platform supporting MCP.
 
-The simplest way to deploy your App in minutes is [Alpic](https://alpic.ai/).
-1. Create an account on [Alpic platform](https://app.alpic.ai/). 
-2. Connect your GitHub repository to automatically deploy at each commit. 
-3. Use your remote App URL to connect it to MCP Clients, or use the Alpic Playground to easily test your App.
+The simplest way to deploy your app is by running the `deploy` command, which will push your MCP server to the [Alpic](https://alpic.ai/) cloud for free.
 
 ## Resources
 - [Skybridge Documentation](https://docs.skybridge.tech/)

package/templates/demo/package.json

@@ -17,7 +17,7 @@
     "lucide-react": "^1.14.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "skybridge": "^0.0.0-dev.98f4db2",
+    "skybridge": "^0.0.0-dev.98fae76",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
     "vite": "^8.0.3",

package/templates/demo/src/server.ts

@@ -15,8 +15,20 @@ const server = new McpServer(
       inputSchema: {
         name: z.string().optional().describe("The user name."),
       },
+      annotations: {
+        title: "Start Skybridge onboarding",
+        readOnlyHint: true,
+        destructiveHint: false,
+        openWorldHint: false,
+      },
+      _meta: {
+        "openai/toolInvocation/invoking": "Starting the Skybridge onboarding…",
+        "openai/toolInvocation/invoked": "Onboarding ready.",
+      },
       view: {
         component: "onboarding",
+        // Replace with the URL your widget will be served from in production.
+        domain: "https://skybridge.tech",
         description: "Onboarding deck",
         csp: {
           resourceDomains: [
@@ -30,7 +42,7 @@ const server = new McpServer(
     async ({ name }) => {
       return {
         structuredContent: { name },
-        content: [{ type: "text", text: `User name: ${name}` }],
+        content: [{ type: "text", text: `User name: ${name ?? "friend"}` }],
         isError: false,
       };
     },
@@ -39,6 +51,16 @@ const server = new McpServer(
     {
       name: "get-fortune-cookie",
       description: "Get fortune cookie",
+      annotations: {
+        title: "Get a fortune cookie",
+        readOnlyHint: true,
+        destructiveHint: false,
+        openWorldHint: false,
+      },
+      _meta: {
+        "openai/toolInvocation/invoking": "Cracking open a fortune cookie…",
+        "openai/toolInvocation/invoked": "Fortune revealed.",
+      },
     },
     async () => {
       const predictions = [

package/templates/demo/src/views/components/steps/tool-output.tsx

@@ -23,8 +23,8 @@ export default function ToolOutput() {
         ) : (
           <p>
             The view reads the <strong>tool output</strong>, but no{" "}
-            <code>name</code> was passed this time. Try again with you surname
-            to see with this view personalize.
+            <code>name</code> was passed this time. Try again with your surname
+            to see how this view personalizes.
           </p>
         )}
       </div>