mcp-app-studio 0.3.2

package/dist/cli/index.js

@@ -0,0 +1,579 @@
+// src/cli/index.ts
+import fs2 from "fs";
+import { createWriteStream } from "fs";
+import { Readable } from "stream";
+import { pipeline } from "stream/promises";
+import path2 from "path";
+import os from "os";
+import { fileURLToPath } from "url";
+import * as p from "@clack/prompts";
+import pc from "picocolors";
+import { extract } from "tar";
+
+// src/cli/utils.ts
+import fs from "fs";
+import path from "path";
+function isValidProjectPath(name) {
+  if (!name || name.trim() === "") {
+    return { valid: false, error: "Project name is required" };
+  }
+  const trimmed = name.trim();
+  if (path.isAbsolute(trimmed)) {
+    return {
+      valid: false,
+      error: "Absolute paths are not allowed. Use a relative path or project name."
+    };
+  }
+  if (trimmed.includes("..")) {
+    return {
+      valid: false,
+      error: "Path traversal (..) is not allowed. Use a simple project name."
+    };
+  }
+  const cwd = process.cwd();
+  const resolved = path.resolve(cwd, trimmed);
+  const relative = path.relative(cwd, resolved);
+  if (relative.startsWith("..") || path.isAbsolute(relative)) {
+    return {
+      valid: false,
+      error: "Project must be created within current directory."
+    };
+  }
+  return { valid: true };
+}
+function isValidPackageName(name) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(
+    name
+  );
+}
+function toValidPackageName(name) {
+  return name.trim().toLowerCase().replace(/\s+/g, "-").replace(/^[._]/, "").replace(/[^a-z0-9-~]+/g, "-");
+}
+function isEmpty(dir) {
+  if (!fs.existsSync(dir)) return true;
+  const files = fs.readdirSync(dir);
+  return files.length === 0 || files.length === 1 && files[0] === ".git";
+}
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) return;
+  for (const file of fs.readdirSync(dir)) {
+    if (file === ".git") continue;
+    fs.rmSync(path.join(dir, file), { recursive: true, force: true });
+  }
+}
+function updatePackageJson(dir, name, description) {
+  const pkgPath = path.join(dir, "package.json");
+  if (!fs.existsSync(pkgPath)) return;
+  try {
+    const content = fs.readFileSync(pkgPath, "utf-8");
+    const pkg = JSON.parse(content);
+    pkg["name"] = name;
+    pkg["version"] = "0.1.0";
+    pkg["private"] = true;
+    if (description) {
+      pkg["description"] = description;
+    }
+    fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}
+`);
+  } catch (error) {
+    throw new Error(
+      `Failed to update package.json: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+function detectPackageManager() {
+  const ua = process.env["npm_config_user_agent"] ?? "";
+  if (ua.includes("pnpm")) return "pnpm";
+  if (ua.includes("yarn")) return "yarn";
+  if (ua.includes("bun")) return "bun";
+  return "npm";
+}
+
+// src/cli/index.ts
+var __dirname = path2.dirname(fileURLToPath(import.meta.url));
+var TEMPLATE_REPO = "assistant-ui/mcp-app-studio-starter";
+var TEMPLATE_BRANCH = "main";
+var REQUIRED_NODE_VERSION = { major: 20, minor: 9, patch: 0 };
+function parseNodeVersion(version) {
+  const [majorRaw, minorRaw, patchRaw] = version.split(".");
+  const major = Number.parseInt(majorRaw ?? "", 10);
+  const minor = Number.parseInt(minorRaw ?? "", 10);
+  const patch = Number.parseInt(patchRaw ?? "", 10);
+  if (![major, minor, patch].every(Number.isFinite)) return null;
+  return { major, minor, patch };
+}
+function isVersionAtLeast(current, required) {
+  if (current.major !== required.major) return current.major > required.major;
+  if (current.minor !== required.minor) return current.minor > required.minor;
+  return current.patch >= required.patch;
+}
+function ensureSupportedNodeVersion() {
+  const current = parseNodeVersion(process.versions.node);
+  if (!current) return;
+  if (!isVersionAtLeast(current, REQUIRED_NODE_VERSION)) {
+    console.error(
+      pc.red(
+        `mcp-app-studio requires Node.js >=${REQUIRED_NODE_VERSION.major}.${REQUIRED_NODE_VERSION.minor}.${REQUIRED_NODE_VERSION.patch} (detected ${process.versions.node}).`
+      )
+    );
+    console.error(pc.dim("Please upgrade Node.js (recommended: latest LTS)."));
+    process.exit(1);
+  }
+}
+function getVersion() {
+  try {
+    const pkgPath = path2.resolve(__dirname, "../package.json");
+    const pkg = JSON.parse(fs2.readFileSync(pkgPath, "utf-8"));
+    return pkg.version || "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+function showHelp() {
+  console.log(`
+mcp-app-studio v${getVersion()}
+
+Create interactive apps for ChatGPT and MCP hosts (like Claude Desktop).
+
+${pc.bold("Requirements:")}
+  Node.js >=${REQUIRED_NODE_VERSION.major}.${REQUIRED_NODE_VERSION.minor}.${REQUIRED_NODE_VERSION.patch}
+
+${pc.bold("Usage:")}
+  npx mcp-app-studio [project-name] [options]
+
+${pc.bold("Options:")}
+  --help, -h     Show this help message
+  --version, -v  Show version number
+
+${pc.bold("Examples:")}
+  npx mcp-app-studio my-app
+  npx mcp-app-studio .          ${pc.dim("# Use current directory")}
+  npx mcp-app-studio
+
+${pc.bold("Learn more:")}
+  Documentation: https://github.com/assistant-ui/mcp-app-studio
+  Examples:      https://github.com/assistant-ui/mcp-app-studio-starter
+`);
+}
+function quotePath(p2) {
+  if (!/[ $`"'\\&|;<>(){}[\]*?!#~]/.test(p2)) {
+    return p2;
+  }
+  return `'${p2.replace(/'/g, "'\\''")}'`;
+}
+var TEMPLATE_COMPONENTS = {
+  minimal: ["welcome"],
+  "poi-map": ["poi-map"]
+};
+var TEMPLATE_EXPORT_CONFIG = {
+  minimal: {
+    entryPoint: "lib/workbench/wrappers/welcome-card-sdk.tsx",
+    exportName: "WelcomeCardSDK"
+  },
+  "poi-map": {
+    entryPoint: "lib/workbench/wrappers/poi-map-sdk.tsx",
+    exportName: "POIMapSDK"
+  }
+};
+function generateComponentRegistry(components) {
+  const imports = [];
+  const entries = [];
+  if (components.includes("welcome")) {
+    imports.push('import { WelcomeCardSDK } from "./wrappers";');
+    entries.push(`  {
+    id: "welcome",
+    label: "Welcome",
+    description: "A simple starter widget - the perfect starting point",
+    category: "cards",
+    component: WelcomeCardSDK,
+    defaultProps: {
+      title: "Welcome!",
+      message:
+        "This is your ChatGPT App. Edit this component to build something amazing.",
+    },
+    exportConfig: {
+      entryPoint: "lib/workbench/wrappers/welcome-card-sdk.tsx",
+      exportName: "WelcomeCardSDK",
+    },
+  }`);
+  }
+  if (components.includes("poi-map")) {
+    imports.push('import { POIMapSDK } from "./wrappers";');
+    entries.push(`  {
+    id: "poi-map",
+    label: "POI Map",
+    description:
+      "Interactive map with points of interest - demonstrates display mode transitions, widget state, and tool calls",
+    category: "data",
+    component: POIMapSDK,
+    defaultProps: {
+      id: "workbench-poi-map",
+      title: "San Francisco Highlights",
+      pois: [
+        {
+          id: "1",
+          name: "Golden Gate Bridge",
+          category: "landmark",
+          lat: 37.8199,
+          lng: -122.4783,
+          description: "Iconic suspension bridge spanning the Golden Gate strait",
+          rating: 4.8,
+          imageUrl: "https://images.unsplash.com/photo-1449034446853-66c86144b0ad?w=400",
+        },
+        {
+          id: "2",
+          name: "Fisherman's Wharf",
+          category: "entertainment",
+          lat: 37.808,
+          lng: -122.4177,
+          description: "Historic waterfront with restaurants and attractions",
+          rating: 4.3,
+        },
+      ],
+      initialCenter: { lat: 37.7749, lng: -122.4194 },
+      initialZoom: 12,
+    },
+    exportConfig: {
+      entryPoint: "lib/workbench/wrappers/poi-map-sdk.tsx",
+      exportName: "POIMapSDK",
+    },
+  }`);
+  }
+  return `"use client";
+
+import type { ComponentType } from "react";
+${imports.join("\n")}
+
+export type ComponentCategory = "cards" | "lists" | "forms" | "data";
+
+type AnyComponent = ComponentType<any>;
+
+export interface WorkbenchComponentEntry {
+  id: string;
+  label: string;
+  description: string;
+  category: ComponentCategory;
+  component: AnyComponent;
+  defaultProps: Record<string, unknown>;
+  exportConfig: {
+    entryPoint: string;
+    exportName: string;
+  };
+}
+
+export const workbenchComponents: WorkbenchComponentEntry[] = [
+${entries.join(",\n")}
+];
+
+export function getComponent(id: string): WorkbenchComponentEntry | undefined {
+  return workbenchComponents.find((c) => c.id === id);
+}
+
+export function getComponentIds(): string[] {
+  return workbenchComponents.map((c) => c.id);
+}
+`;
+}
+function generateWrappersIndex(components) {
+  const exports = [];
+  if (components.includes("welcome")) {
+    exports.push('export { WelcomeCardSDK } from "./welcome-card-sdk";');
+  }
+  if (components.includes("poi-map")) {
+    exports.push('export { POIMapSDK } from "./poi-map-sdk";');
+  }
+  return exports.length > 0 ? `${exports.join("\n")}
+` : "// No components\n";
+}
+function generateExamplesIndex(components) {
+  const exports = [];
+  if (components.includes("welcome")) {
+    exports.push('export * from "./welcome-card";');
+  }
+  if (components.includes("poi-map")) {
+    exports.push('export * from "./poi-map";');
+  }
+  return exports.length > 0 ? `${exports.join("\n")}
+` : "// No examples\n";
+}
+function updateExportScriptDefaults(targetDir, entryPoint, exportName) {
+  const exportScriptPath = path2.join(targetDir, "scripts/export.ts");
+  let content = fs2.readFileSync(exportScriptPath, "utf-8");
+  content = content.replace(
+    /entryPoint: "lib\/workbench\/wrappers\/[^"]+"/,
+    `entryPoint: "${entryPoint}"`
+  );
+  content = content.replace(
+    /exportName: "[^"]+",\n\s+name:/,
+    `exportName: "${exportName}",
+    name:`
+  );
+  content = content.replace(
+    /Widget entry point \(default: [^)]+\)/,
+    `Widget entry point (default: ${entryPoint})`
+  );
+  content = content.replace(
+    /Export name from entry file \(default: [^)]+\)/,
+    `Export name from entry file (default: ${exportName})`
+  );
+  fs2.writeFileSync(exportScriptPath, content);
+}
+function applyTemplate(targetDir, template) {
+  const components = TEMPLATE_COMPONENTS[template];
+  const registryPath = path2.join(
+    targetDir,
+    "lib/workbench/component-registry.tsx"
+  );
+  fs2.writeFileSync(registryPath, generateComponentRegistry(components));
+  const wrappersIndexPath = path2.join(
+    targetDir,
+    "lib/workbench/wrappers/index.ts"
+  );
+  fs2.writeFileSync(wrappersIndexPath, generateWrappersIndex(components));
+  const examplesIndexPath = path2.join(
+    targetDir,
+    "components/examples/index.ts"
+  );
+  fs2.writeFileSync(examplesIndexPath, generateExamplesIndex(components));
+  const examplesDir = path2.join(targetDir, "components/examples");
+  if (!components.includes("welcome")) {
+    fs2.rmSync(path2.join(examplesDir, "welcome-card"), {
+      recursive: true,
+      force: true
+    });
+    fs2.rmSync(
+      path2.join(targetDir, "lib/workbench/wrappers/welcome-card-sdk.tsx"),
+      { force: true }
+    );
+  }
+  if (!components.includes("poi-map")) {
+    fs2.rmSync(path2.join(examplesDir, "poi-map"), {
+      recursive: true,
+      force: true
+    });
+    fs2.rmSync(path2.join(targetDir, "lib/workbench/wrappers/poi-map-sdk.tsx"), {
+      force: true
+    });
+  }
+  const exportConfig = TEMPLATE_EXPORT_CONFIG[template];
+  updateExportScriptDefaults(
+    targetDir,
+    exportConfig.entryPoint,
+    exportConfig.exportName
+  );
+}
+async function downloadTemplate(targetDir) {
+  const tarballUrl = `https://github.com/${TEMPLATE_REPO}/archive/refs/heads/${TEMPLATE_BRANCH}.tar.gz`;
+  const tempDir = path2.join(os.tmpdir(), `mcp-app-studio-${Date.now()}`);
+  const tarballPath = path2.join(tempDir, "template.tar.gz");
+  try {
+    fs2.mkdirSync(tempDir, { recursive: true });
+    const response = await fetch(tarballUrl);
+    if (!response.ok) {
+      throw new Error(
+        `Failed to download template: ${response.status} ${response.statusText}`
+      );
+    }
+    const fileStream = createWriteStream(tarballPath);
+    const body = response.body;
+    if (!body) {
+      throw new Error("No response body received");
+    }
+    const nodeStream = Readable.fromWeb(
+      body
+    );
+    await pipeline(nodeStream, fileStream);
+    fs2.mkdirSync(targetDir, { recursive: true });
+    await extract({
+      file: tarballPath,
+      cwd: targetDir,
+      strip: 1
+      // Remove the top-level directory (e.g., mcp-app-studio-starter-main/)
+    });
+  } finally {
+    fs2.rmSync(tempDir, { recursive: true, force: true });
+  }
+}
+async function main() {
+  ensureSupportedNodeVersion();
+  const args = process.argv.slice(2);
+  if (args.includes("--help") || args.includes("-h")) {
+    showHelp();
+    process.exit(0);
+  }
+  if (args.includes("--version") || args.includes("-v")) {
+    console.log(getVersion());
+    process.exit(0);
+  }
+  const argProjectName = args.find((arg) => !arg.startsWith("-"));
+  p.intro(pc.bgCyan(pc.black(" mcp-app-studio ")));
+  if (argProjectName) {
+    const pathCheck = isValidProjectPath(argProjectName);
+    if (!pathCheck.valid) {
+      p.log.error(pathCheck.error ?? "Invalid project path");
+      process.exit(1);
+    }
+  }
+  const projectName = argProjectName ? argProjectName : await p.text({
+    message: "Project name:",
+    placeholder: "my-chatgpt-app",
+    validate: (value) => {
+      if (!value) return "Project name is required";
+      const pathCheck = isValidProjectPath(value);
+      if (!pathCheck.valid) return pathCheck.error;
+      if (!isValidPackageName(toValidPackageName(value))) {
+        return "Invalid project name";
+      }
+      return void 0;
+    }
+  });
+  if (p.isCancel(projectName)) {
+    p.cancel("Operation cancelled.");
+    process.exit(0);
+  }
+  const description = await p.text({
+    message: "App description:",
+    placeholder: "A ChatGPT app that helps users...",
+    initialValue: ""
+  });
+  if (p.isCancel(description)) {
+    p.cancel("Operation cancelled.");
+    process.exit(0);
+  }
+  const template = await p.select({
+    message: "Choose a starter template:",
+    options: [
+      {
+        value: "minimal",
+        label: "Minimal",
+        hint: "Simple welcome card - perfect starting point"
+      },
+      {
+        value: "poi-map",
+        label: "Locations App",
+        hint: "Interactive map demo with full SDK features"
+      }
+    ],
+    initialValue: "minimal"
+  });
+  if (p.isCancel(template)) {
+    p.cancel("Operation cancelled.");
+    process.exit(0);
+  }
+  const includeServer = await p.confirm({
+    message: "Include MCP server?",
+    initialValue: true
+  });
+  if (p.isCancel(includeServer)) {
+    p.cancel("Operation cancelled.");
+    process.exit(0);
+  }
+  const targetDir = path2.resolve(process.cwd(), projectName);
+  const packageName = projectName === "." ? toValidPackageName(path2.basename(targetDir)) : toValidPackageName(projectName);
+  const config = {
+    name: projectName,
+    packageName,
+    description: description || "",
+    template,
+    includeServer
+  };
+  if (!isEmpty(targetDir)) {
+    const overwrite = await p.confirm({
+      message: `Directory "${projectName}" is not empty. Remove existing files?`,
+      initialValue: false
+    });
+    if (p.isCancel(overwrite) || !overwrite) {
+      p.cancel("Operation cancelled.");
+      process.exit(0);
+    }
+    emptyDir(targetDir);
+  }
+  const s = p.spinner();
+  s.start("Downloading template...");
+  try {
+    await downloadTemplate(targetDir);
+  } catch (error) {
+    s.stop("Download failed");
+    p.log.error(
+      `Failed to download template: ${error instanceof Error ? error.message : String(error)}`
+    );
+    process.exit(1);
+  }
+  s.message("Creating project...");
+  updatePackageJson(targetDir, config.packageName, config.description);
+  s.message("Applying template...");
+  applyTemplate(targetDir, config.template);
+  if (!config.includeServer) {
+    fs2.rmSync(path2.join(targetDir, "server"), { recursive: true, force: true });
+  }
+  s.stop("Project created!");
+  const pm = detectPackageManager();
+  const installCmd = pm === "yarn" ? "yarn" : pm === "bun" ? "bun install" : `${pm} install`;
+  const runCmd = pm === "npm" ? "npm run" : pm === "bun" ? "bun run" : pm;
+  const devCmd = `${runCmd} dev`;
+  const quotedName = quotePath(projectName);
+  const nextSteps = [`cd ${quotedName}`, installCmd];
+  if (config.includeServer) {
+    nextSteps.push(`cd server && ${installCmd}`);
+    nextSteps.push("cd ..");
+  }
+  nextSteps.push(devCmd);
+  if (config.includeServer) {
+    nextSteps.push("");
+    nextSteps.push(pc.dim("# This starts both Next.js and MCP server"));
+  }
+  p.note(nextSteps.join("\n"), "Get started");
+  const structureGuide = [
+    `${pc.cyan("components/examples/")}  ${pc.dim("\u2190 Your widget components")}`,
+    `${pc.cyan("lib/workbench/")}        ${pc.dim("\u2190 SDK wrappers for workbench")}`
+  ];
+  if (config.includeServer) {
+    structureGuide.push(
+      `${pc.cyan("server/")}               ${pc.dim("\u2190 MCP server for Claude Desktop")}`
+    );
+  }
+  p.note(structureGuide.join("\n"), "Project structure");
+  const keyCommands = [];
+  keyCommands.push(
+    `${pc.cyan(`${runCmd} dev`)}      ${pc.dim("Start the development workbench")}`
+  );
+  keyCommands.push(
+    `${pc.cyan(`${runCmd} export`)}   ${pc.dim("Build & export for ChatGPT")}`
+  );
+  if (config.includeServer) {
+    keyCommands.push(
+      `${pc.cyan(`cd server && ${runCmd} inspect`)}  ${pc.dim("Test MCP server locally")}`
+    );
+  }
+  p.note(keyCommands.join("\n"), "Key commands");
+  p.log.message("");
+  p.log.step(pc.bold("Building for multiple platforms:"));
+  p.log.message(
+    `  ${pc.dim("\u2022")} Use ${pc.cyan("useFeature('widgetState')")} to check for ChatGPT features`
+  );
+  p.log.message(
+    `  ${pc.dim("\u2022")} Use ${pc.cyan("useFeature('modelContext')")} to check for MCP features`
+  );
+  p.log.message(
+    `  ${pc.dim("\u2022")} Call ${pc.cyan("enableDebugMode()")} in browser console to debug platform detection`
+  );
+  p.log.message("");
+  p.log.step(pc.bold("Learn more:"));
+  p.log.message(
+    `  ${pc.dim("\u2022")} SDK Docs:   ${pc.cyan("https://github.com/assistant-ui/mcp-app-studio#sdk")}`
+  );
+  p.log.message(
+    `  ${pc.dim("\u2022")} Examples:   ${pc.cyan("https://github.com/assistant-ui/mcp-app-studio-starter")}`
+  );
+  if (config.includeServer) {
+    p.log.message(
+      `  ${pc.dim("\u2022")} MCP Guide:  ${pc.cyan("https://modelcontextprotocol.io/quickstart")}`
+    );
+  }
+  p.log.message("");
+  p.outro(pc.green("Happy building! \u{1F680}"));
+}
+main().catch((err) => {
+  console.error("Error:", err);
+  process.exit(1);
+});