create-skybridge 0.0.0-dev.fd05cd0 → 0.0.0-dev.ff23e30

package/dist/index.d.ts

@@ -1 +1 @@
-export {};
+export declare function init(args?: string[]): Promise<void>;

package/dist/index.js

@@ -1,13 +1,10 @@
+import { spawnSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import * as prompts from "@clack/prompts";
 import mri from "mri";
-const argv = mri(process.argv.slice(2), {
-    boolean: ["help", "overwrite"],
-    alias: { h: "help" },
-});
-const cwd = process.cwd();
+const minimumPnpmVersion = 10;
 const defaultProjectName = "skybridge-project";
 // prettier-ignore
 const helpMessage = `\
@@ -18,16 +15,22 @@ Create a new Skybridge project by copying the starter template.
 Options:
   -h, --help              show this help message
   --overwrite             remove existing files in target directory
+  --immediate             install dependencies and start development server
 
 Examples:
   create-skybridge my-app
-  create-skybridge . --overwrite
+  create-skybridge . --overwrite --immediate
 `;
-async function init() {
+export async function init(args = process.argv.slice(2)) {
+    const argv = mri(args, {
+        boolean: ["help", "overwrite", "immediate"],
+        alias: { h: "help" },
+    });
     const argTargetDir = argv._[0]
-        ? formatTargetDir(String(argv._[0]))
+        ? sanitizeTargetDir(String(argv._[0]))
         : undefined;
     const argOverwrite = argv.overwrite;
+    const argImmediate = argv.immediate;
     const help = argv.help;
     if (help) {
         console.log(helpMessage);
@@ -44,14 +47,15 @@ async function init() {
                 defaultValue: defaultProjectName,
                 placeholder: defaultProjectName,
                 validate: (value) => {
-                    return value.length === 0 || formatTargetDir(value).length > 0
+                    return value.length === 0 || sanitizeTargetDir(value).length > 0
                         ? undefined
                         : "Invalid project name";
                 },
             });
-            if (prompts.isCancel(projectName))
+            if (prompts.isCancel(projectName)) {
                 return cancel();
-            targetDir = formatTargetDir(projectName);
+            }
+            targetDir = sanitizeTargetDir(projectName);
         }
         else {
             targetDir = defaultProjectName;
@@ -78,8 +82,9 @@ async function init() {
                         },
                     ],
                 });
-                if (prompts.isCancel(res))
+                if (prompts.isCancel(res)) {
                     return cancel();
+                }
                 overwrite = res;
             }
             else {
@@ -95,13 +100,16 @@ async function init() {
                 return;
         }
     }
-    const root = path.join(cwd, targetDir);
+    const root = path.join(process.cwd(), targetDir);
     // 3. Copy the repository
     prompts.log.step(`Copying template...`);
     try {
         const templateDir = fileURLToPath(new URL("../template", import.meta.url));
         // Copy template to target directory
-        fs.cpSync(templateDir, root, { recursive: true });
+        fs.cpSync(templateDir, root, {
+            recursive: true,
+            filter: (src) => !src.endsWith(".npmrc"),
+        });
         // Rename _gitignore to .gitignore
         fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
         // Update project name in package.json
@@ -113,16 +121,84 @@ async function init() {
             fs.writeFileSync(pkgPath, fixed);
         }
         prompts.log.success(`Project created in ${root}`);
-        prompts.outro(`Done! Next steps:\n\n  cd ${targetDir}\n  pnpm install\n  pnpm dev`);
     }
     catch (error) {
         prompts.log.error("Failed to copy repository");
         console.error(error);
         process.exit(1);
     }
+    // 4. Ask about immediate installation
+    let immediate = argImmediate;
+    if (immediate === undefined) {
+        if (interactive) {
+            const immediateResult = await prompts.confirm({
+                message: `Install with pnpm and start now?`,
+            });
+            if (prompts.isCancel(immediateResult)) {
+                return cancel();
+            }
+            immediate = immediateResult;
+        }
+        else {
+            immediate = false;
+        }
+    }
+    const installCmd = ["pnpm", "install"];
+    const runCmd = ["pnpm", "dev"];
+    if (!immediate) {
+        prompts.outro(`Done! Next steps:
+  cd ${targetDir}
+  ${installCmd.join(" ")}
+  ${runCmd.join(" ")}
+`);
+        return;
+    }
+    // check if pnpm is installed
+    const result = spawnSync("pnpm", ["--version"], { encoding: "utf-8" });
+    if (result.error || result.status !== 0) {
+        console.error("Error: pnpm is not installed. Please install pnpm first.");
+        process.exit(1);
+    }
+    // check if pnpm major is greater or equal to the one set in package.json packageManager, which should do the trick
+    const version = result.stdout.trim();
+    const major = Number(version.split(".")[0]);
+    if (Number.isNaN(major) || major < minimumPnpmVersion) {
+        console.error(`Error: pnpm version ${version} is too old. Minimum required version is ${minimumPnpmVersion}.`);
+        process.exit(1);
+    }
+    prompts.log.step(`Installing dependencies with pnpm...`);
+    run(installCmd, {
+        stdio: "inherit",
+        cwd: root,
+    });
+    prompts.log.step("Starting dev server...");
+    run(runCmd, {
+        stdio: "inherit",
+        cwd: root,
+    });
+}
+function run([command, ...args], options) {
+    const { status, error } = spawnSync(command, args, options);
+    if (status != null && status > 0) {
+        process.exit(status);
+    }
+    if (error) {
+        console.error(`\n${command} ${args.join(" ")} error!`);
+        console.error(error);
+        process.exit(1);
+    }
 }
-function formatTargetDir(targetDir) {
-    return targetDir.trim().replace(/\/+$/g, "");
+function sanitizeTargetDir(targetDir) {
+    return (targetDir
+        .trim()
+        // Only keep alphanumeric, dash, underscore, dot, @, /
+        .replace(/[^a-zA-Z0-9\-_.@/]/g, "")
+        // Prevent path traversal
+        .replace(/\.\./g, "")
+        // Collapse multiple slashes
+        .replace(/\/+/g, "/")
+        // Remove leading/trailing slashes
+        .replace(/^\/+|\/+$/g, ""));
 }
 function isEmpty(path) {
     const files = fs.readdirSync(path);
@@ -139,7 +215,3 @@ function emptyDir(dir) {
         fs.rmSync(path.resolve(dir, file), { recursive: true, force: true });
     }
 }
-init().catch((e) => {
-    console.error(e);
-    process.exit(1);
-});

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,23 @@
+import { randomBytes } from "node:crypto";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { init } from "./index.js";
+describe("create-skybridge", () => {
+    let tempDirName;
+    beforeEach(() => {
+        tempDirName = `test-${randomBytes(2).toString("hex")}`;
+    });
+    afterEach(async () => {
+        await fs.rm(path.join(process.cwd(), tempDirName), {
+            recursive: true,
+            force: true,
+        });
+    });
+    it("should scaffold a new project", async () => {
+        const name = `../../${tempDirName}//project$`;
+        await init([name]);
+        await fs.access(path.join(process.cwd(), tempDirName, "project", ".gitignore"));
+        expect(fs.access(path.join(process.cwd(), tempDirName, "project", ".npmrc"))).rejects.toThrowError();
+    });
+});

package/index.js

@@ -1,3 +1,8 @@
 #!/usr/bin/env node
 
-import "./dist/index.js";
+import { init } from "./dist/index.js";
+
+init().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.fd05cd0",
+  "version": "0.0.0-dev.ff23e30",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
@@ -18,6 +18,8 @@
   ],
   "scripts": {
     "build": "tsc",
+    "test": "pnpm run test:unit && pnpm run test:type && pnpm run test:format",
+    "test:unit": "vitest run",
     "test:type": "tsc --noEmit",
     "test:format": "biome ci",
     "prepublishOnly": "pnpm run build"
@@ -28,6 +30,7 @@
   },
   "devDependencies": {
     "@types/node": "^25.0.3",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^2.1.9"
   }
 }

package/template/README.md

@@ -1,24 +1,16 @@
 # ChatGPT Apps SDK Alpic Starter
 
-This repository is a minimal Typescript application demonstrating how to build an OpenAI Apps SDK compatible MCP server with widget rendering in ChatGPT.
-
-![Demo](docs/demo.gif)
-
-## Overview
-
-This project shows how to integrate a Typescript express application with the ChatGPT Apps SDK using the Model Context Protocol (MCP). It includes a working MCP server that exposes tools and resources that can be called from ChatGPT, with responses rendered natively in ChatGPT. It also includes MCP tools without UI widgets.
+A minimal TypeScript template for building OpenAI Apps SDK compatible MCP servers with widget rendering in ChatGPT.
 
 ## Getting Started
 
 ### Prerequisites
 
-- Node.js 22+ (see `.nvmrc` for exact version)
+- Node.js 22+
 - pnpm (install with `npm install -g pnpm`)
-- Ngrok
+- HTTP tunnel such as [ngrok](https://ngrok.com/download)
 
-### Local Development with Hot Module Replacement (HMR)
-
-This project uses Vite for React widget development with full HMR support, allowing you to see changes in real-time, directly within ChatGPT conversation, without restarting the server.
+### Local Development
 
 #### 1. Install
 
@@ -26,7 +18,7 @@ This project uses Vite for React widget development with full HMR support, allow
 pnpm install
 ```
 
-#### 2. Start the Development Server
+#### 2. Start your local server
 
 Run the development server from the root directory:
 
@@ -36,79 +28,37 @@ pnpm dev
 
 This command starts an Express server on port 3000. This server packages:
 
-- an MCP endpoint on `/mcp` - aka the ChatGPT App Backend
-- a React application on Vite HMR dev server - aka the ChatGPT App Frontend
-
-#### 3. Expose Your Local Server
+- an MCP endpoint on `/mcp` (the app backend)
+- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
 
-In a separate terminal, expose your local server using ngrok:
+#### 3. Connect to ChatGPT
 
+- ChatGPT requires connectors to be publicly accessible. To expose your server on the Internet, run:
 ```bash
 ngrok http 3000
 ```
+- In ChatGPT, navigate to **Settings → Connectors → Create** and add the forwarding URL provided by ngrok suffixed with `/mcp` (e.g. `https://3785c5ddc4b6.ngrok-free.app/mcp`)
 
-Copy the forwarding URL from ngrok output:
-
-```bash
-Forwarding     https://3785c5ddc4b6.ngrok-free.app -> http://localhost:3000
-```
-
-#### 4. Connect to ChatGPT
-
-- Enable **Settings → Connectors → Advanced → Developer mode** in the ChatGPT client
-- Navigate to **Settings → Connectors → Create**
-- Enter your ngrok URL with the `/mcp` path (e.g., `https://3785c5ddc4b6.ngrok-free.app/mcp`)
-- Click **Create**
-
-#### 5. Test Your Integration
+### Create your first widget
 
-- Start a new conversation in ChatGPT
-- Select your newly created connector using **the + button → Your connector**
-- Try prompting the model (e.g., "Show me pikachu details")
+#### 1. Add a new widget
 
-#### 6. Develop with HMR
+- Register a widget in `server/server.ts` with a unique name (e.g., `my-widget`)
+- Create a matching React component at `web/src/widgets/my-widget.tsx`. The file name must match the widget name exactly
 
-Now you can edit React components in `web` and see changes instantly:
+#### 2. Edit widgets with Hot Module Replacement (HMR)
 
-- Make changes to any component
-- Save the file
-- The widget will automatically update in ChatGPT without refreshing or reconnecting
-- The Express server and MCP server continue running without interruption
+Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
 
-**Note:** When you modify widget components, changes will be reflected immediately. If you modify MCP server code (in `src/`), you may need to reload your connector in **Settings → Connectors → [Your connector] → Reload**.
+#### 3. Edit server code
 
-## Widget Naming Convention
-
-**Important:** For a widget to work properly, the name of the endpoint in your MCP server must match the file name of the corresponding React component in `web/src/widgets/`.
-
-For example:
-
-- If you create a widget endpoint named `pokemon-card`, you must create a corresponding React component file at `web/src/widgets/pokemon-card.tsx`
-- The endpoint name and the widget file name (without the `.tsx` extension) must be identical
-
-This naming convention allows the system to automatically map widget requests to their corresponding React components.
+Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
 
 ## Deploy to Production
 
-Use Alpic to deploy your OpenAI App to production.
-
-[![Deploy on Alpic](https://assets.alpic.ai/button.svg)](https://app.alpic.ai/new/clone?repositoryUrl=https%3A%2F%2Fgithub.com%2Falpic-ai%2Fapps-sdk-template)
-
+- Use [Alpic](https://alpic.ai/) to deploy your OpenAI App to production
 - In ChatGPT, navigate to **Settings → Connectors → Create** and add your MCP server URL (e.g., `https://your-app-name.alpic.live`)
 
-## Project Structure
-
-```
-.
-├── server/
-│   ├── app.ts          # OpenAI App extension class with widget API implementation
-│   ├── server.ts       # MCP server with tool/resource/prompt registration
-│   └── index.ts        # Express server definition
-└── web/
-    └── src/
-        └── widgets/    # React widget components (must match endpoint names)
-```
-
 ## Resources
 
 - [Apps SDK Documentation](https://developers.openai.com/apps-sdk)

package/template/_gitignore

@@ -1,194 +1,4 @@
-# =============================================================================
-# OPERATING SYSTEM FILES
-# =============================================================================
-.DS_Store
-.DS_Store?
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db
-
-# =============================================================================
-# NODE.JS & PACKAGE MANAGERS
-# =============================================================================
 node_modules/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-.npm
-.pnp.js
-.pnp.cjs
-.pnp.mjs
-.pnp.json
-.pnp.ts
-
-# =============================================================================
-# TYPESCRIPT & JAVASCRIPT
-# =============================================================================
-*.tsbuildinfo
-.tscache/
-*.js.map
-*.mjs.map
-*.cjs.map
-*.d.ts.map
-*.d.ts
-!*.d.ts.template
-*.tgz
-.eslintcache
-.rollup.cache
-
-# =============================================================================
-# PYTHON
-# =============================================================================
-__pycache__/
-*.py[cod]
-*$py.class
-*.so
-.Python
-develop-eggs/
-eggs/
-.eggs/
-lib/
-lib64/
-parts/
-sdist/
-var/
-wheels/
-*.egg-info/
-.installed.cfg
-*.egg
-.pytest_cache/
-.coverage
-htmlcov/
-.tox/
-.venv
-venv/
-ENV/
-
-# =============================================================================
-# JAVA
-# =============================================================================
-*.class
-*.jar
-*.war
-*.nar
-*.ear
-hs_err_pid*
-target/
-.gradle/
-
-# =============================================================================
-# RUBY
-# =============================================================================
-*.gem
-*.rbc
-/.config
-/coverage/
-/InstalledFiles
-/pkg/
-/spec/reports/
-/spec/examples.txt
-/test/tmp/
-/test/version_tmp/
-/tmp/
-.byebug_history
-
-# =============================================================================
-# BUILD & DISTRIBUTION
-# =============================================================================
-build/
 dist/
-dist-ssr/
-out/
-
-# =============================================================================
-# COMPILED FILES
-# =============================================================================
-*.com
-*.dll
-*.exe
-*.o
-
-# =============================================================================
-# PACKAGE & ARCHIVE FILES
-# =============================================================================
-*.7z
-*.dmg
-*.gz
-*.iso
-*.rar
-*.tar
-*.tar.gz
-*.zip
-
-# =============================================================================
-# LOGS & DATABASES
-# =============================================================================
-*.log
-*.sql
-*.sqlite
-*.sqlite3
-logs/
-
-# =============================================================================
-# TESTING & COVERAGE
-# =============================================================================
-coverage/
-.nyc_output/
-
-# =============================================================================
-# CACHE & TEMPORARY FILES
-# =============================================================================
-.cache/
-.parcel-cache/
-*.bak
-
-# =============================================================================
-# ENVIRONMENT & CONFIGURATION
-# =============================================================================
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-.sample-env
-sample.*
-!sample.template.*
-*.local
-mcp-servers.json
-mcp-config.json
-
-# =============================================================================
-# DEMO & EXAMPLE DIRECTORIES
-# =============================================================================
-demo/
-demos/
-example/
-examples/
-samples/
-
-# =============================================================================
-# GENERATED DOCUMENTATION
-# =============================================================================
-docs/api/
-
-# =============================================================================
-# EDITOR DIRECTORIES AND FILES
-# =============================================================================
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# =============================================================================
-# APPLICATION SPECIFIC
-# =============================================================================
-repomix-output*
-duckdata/
-.claude
+.env*
+.DS_store

package/template/server/package.json

@@ -16,10 +16,7 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.24.3",
-    "@t3-oss/env-core": "^0.13.8",
-    "dotenv": "^17.2.3",
     "express": "^5.1.0",
-    "lodash": "^4.17.21",
     "skybridge": "catalog:",
     "vite": "^7.1.11",
     "zod": "^4.1.13"
@@ -27,7 +24,6 @@
   "devDependencies": {
     "@modelcontextprotocol/inspector": "^0.17.5",
     "@types/express": "^5.0.3",
-    "@types/lodash": "^4.17.20",
     "@types/node": "^22.15.30",
     "nodemon": "^3.1.10",
     "tsx": "^4.19.2",

package/template/server/src/index.ts

@@ -2,7 +2,6 @@ import express, { type Express } from "express";
 
 import { widgetsDevServer } from "skybridge/server";
 import type { ViteDevServer } from "vite";
-import { env } from "./env.js";
 import { mcp } from "./middleware.js";
 import server from "./server.js";
 
@@ -12,7 +11,9 @@ app.use(express.json());
 
 app.use(mcp(server));
 
-if (env.NODE_ENV !== "production") {
+const env = process.env.NODE_ENV || "development";
+
+if (env !== "production") {
   app.use(await widgetsDevServer());
 }
 
@@ -22,7 +23,7 @@ app.listen(3000, (error) => {
     process.exit(1);
   }
 
-  console.log(`Server listening on port 3000 - ${env.NODE_ENV}`);
+  console.log(`Server listening on port 3000 - ${env}`);
   console.log(
     "Make your local server accessible with 'ngrok http 3000' and connect to ChatGPT with URL https://xxxxxx.ngrok-free.app/mcp",
   );