create-skybridge 0.0.0-dev.edc0ede → 0.0.0-dev.eea25a3

package/dist/index.js

@@ -1,10 +1,8 @@
-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 minimumPnpmVersion = 10;
 const defaultProjectName = "skybridge-project";
 // prettier-ignore
 const helpMessage = `\
@@ -15,22 +13,20 @@ 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 --immediate
+  create-skybridge . --overwrite
 `;
 export async function init(args = process.argv.slice(2)) {
     const argv = mri(args, {
-        boolean: ["help", "overwrite", "immediate"],
+        boolean: ["help", "overwrite"],
         alias: { h: "help" },
     });
     const argTargetDir = argv._[0]
         ? sanitizeTargetDir(String(argv._[0]))
         : undefined;
     const argOverwrite = argv.overwrite;
-    const argImmediate = argv.immediate;
     const help = argv.help;
     if (help) {
         console.log(helpMessage);
@@ -104,10 +100,7 @@ export async function init(args = process.argv.slice(2)) {
     try {
         const templateDir = fileURLToPath(new URL("../template", import.meta.url));
         // Copy template to target directory
-        fs.cpSync(templateDir, root, {
-            recursive: true,
-            filter: (src) => !src.endsWith(".npmrc"),
-        });
+        fs.cpSync(templateDir, root, { recursive: true });
         // Rename _gitignore to .gitignore
         fs.renameSync(path.join(root, "_gitignore"), path.join(root, ".gitignore"));
         // Update project name in package.json
@@ -119,72 +112,13 @@ export async function init(args = process.argv.slice(2)) {
             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 sanitizeTargetDir(targetDir) {
     return (targetDir

package/dist/index.test.js

@@ -1,7 +1,7 @@
 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 { afterEach, beforeEach, describe, it } from "vitest";
 import { init } from "./index.js";
 describe("create-skybridge", () => {
     let tempDirName;
@@ -18,6 +18,5 @@ describe("create-skybridge", () => {
         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/package.json

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

package/template/.cursor/mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "local": {
+      "url": "http://localhost:3000/mcp"
+    }
+  }
+}

package/template/.nvmrc

@@ -0,0 +1 @@
+lts/jod

package/template/.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "Debug MCP Server",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/dist/index.js",
+      "console": "integratedTerminal",
+      "sourceMaps": true,
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+      "preLaunchTask": "npm: build",
+      "stopOnEntry": false
+    }
+  ]
+}

package/template/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}

package/template/.vscode/tasks.json

@@ -0,0 +1,14 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "shell",
+      "command": "npm",
+      "args": ["build"],
+      "group": "build",
+      "label": "npm: build",
+      "detail": "npm build",
+      "problemMatcher": ["$tsc"]
+    }
+  ]
+}

package/template/README.md

@@ -1,16 +1,24 @@
 # ChatGPT Apps SDK Alpic Starter
 
-A minimal TypeScript template for building OpenAI Apps SDK compatible MCP servers with widget rendering in ChatGPT.
+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.
 
 ## Getting Started
 
 ### Prerequisites
 
-- Node.js 22+
+- Node.js 22+ (see `.nvmrc` for exact version)
 - pnpm (install with `npm install -g pnpm`)
-- HTTP tunnel such as [ngrok](https://ngrok.com/download)
+- Ngrok
 
-### Local Development
+### 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.
 
 #### 1. Install
 
@@ -18,7 +26,7 @@ A minimal TypeScript template for building OpenAI Apps SDK compatible MCP server
 pnpm install
 ```
 
-#### 2. Start your local server
+#### 2. Start the Development Server
 
 Run the development server from the root directory:
 
@@ -28,37 +36,79 @@ pnpm dev
 
 This command starts an Express server on port 3000. This server packages:
 
-- an MCP endpoint on `/mcp` (the app backend)
-- a React application on Vite HMR dev server (the UI elements to be displayed in ChatGPT)
+- 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
 
-#### 3. Connect to ChatGPT
+In a separate terminal, expose your local server using ngrok:
 
-- 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`)
 
-### Create your first widget
+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
 
-#### 1. Add a new 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")
 
-- 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
+#### 6. Develop with HMR
 
-#### 2. Edit widgets with Hot Module Replacement (HMR)
+Now you can edit React components in `web` and see changes instantly:
 
-Edit and save components in `web/src/widgets/` — changes appear instantly in ChatGPT
+- 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
 
-#### 3. Edit server code
+**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**.
 
-Modify files in `server/` and reload your ChatGPT connector in **Settings → Connectors → [Your connector] → Reload**
+## 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.
 
 ## Deploy to Production
 
-- Use [Alpic](https://alpic.ai/) to deploy your OpenAI App 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)
+
 - 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,4 +1,194 @@
+# =============================================================================
+# 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/
-.env*
-.DS_store
+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