Merge pull request #386 from basementstudio/canary

v0.5.6

Author: valebearzotti

.github/workflows/auto-create-promotion-pr.yml

@@ -31,21 +31,23 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
-          EXISTING_PR=$(gh pr list --base main --head canary --state open --json number --jq '.[0].number')
-          
+          SOURCE_BRANCH="${{ github.event.pull_request.head.ref }}"
+
+          EXISTING_PR=$(gh pr list --base main --head "$SOURCE_BRANCH" --state open --json number --jq '.[0].number')
+
           if [ -z "$EXISTING_PR" ]; then
             gh pr create \
               --base main \
-              --head canary \
+              --head "$SOURCE_BRANCH" \
               --title "${{ github.event.pull_request.title }}" \
               --body "Auto-generated PR to promote changes from canary to main.
-              
-              **Original PR:** #${{ github.event.pull_request.number }}
+
+              **Original PR to canary:** #${{ github.event.pull_request.number }}
               **Merged by:** @${{ github.event.pull_request.merged_by.login }}
-              **Docs changes detected:**
-              
+              **Docs changes detected**
+
               ---
-              
+
               ${{ github.event.pull_request.body }}"
             echo "PR created successfully"
           else

apps/website/content/docs/core-concepts/tools.mdx

@@ -251,6 +251,36 @@ export const metadata: ToolMetadata = {
 - `domain` - Optional dedicated subdomain for the widget's sandbox origin
 - `prefersBorder` - Request visible border + background (`true`/`false`/omitted)
 
+### MCP Apps metadata
+
+<Callout variant="info">
+  Unlike OpenAI widgets, MCP Apps do not require specific metadata configuration. Widgets work automatically without additional setup.
+</Callout>
+
+```typescript
+export const metadata: ToolMetadata = {
+  name: "show-analytics",
+  description: "Display analytics dashboard",
+	_meta: {
+    ui: {
+      csp: {
+        connectDomains: ["https://api.analytics.com"],
+        resourceDomains: ["https://cdn.analytics.com"],
+      },
+      domain: "https://analytics-widget.example.com",
+      prefersBorder: true,
+    },
+  },
+};
+```
+
+**Resource-specific properties:**
+
+- `csp.connectDomains` - Origins for fetch/XHR/WebSocket connections
+- `csp.resourceDomains` - Origins for images, scripts, stylesheets, fonts, media
+- `domain` - Optional dedicated subdomain for the widget's sandbox origin
+- `prefersBorder` - Request visible border + background (`true`/`false`/omitted)
+
 ## Handler Types
 
 Tools support three types of handlers, each suited for different use cases:

apps/website/content/docs/getting-started/installation.mdx

@@ -27,7 +27,15 @@ On installation, you'll see the following prompts:
 
 <TerminalPrompt>
   {
-    "? What is your project named? (my-xmcp-app)\n? Select a package manager: (Use arrow keys)\n❯ npm \n  yarn \n  pnpm \n  bun\n? Select the transport you want to use: (Use arrow keys)\n❯ HTTP (runs on a server) \n  STDIO (runs on the user's machine)\n? Select components to initialize: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)\n❯◉ Tools\n ◉ Prompts\n ◉ Resources"
+    "? What is your project named? (my-xmcp-app)\n? Select a template: (Use arrow keys)\n❯ Default (Standard MCP server)\n  GPT App (ChatGPT/OpenAI widgets)\n  MCP App (React widgets for ext-apps)"
+  }
+</TerminalPrompt>
+
+You can also skip prompts using flags: `--gpt` (GPT App), `--ui` (MCP App), `--tailwind` or `--tw` (Tailwind CSS). Run `npx create-xmcp-app --help` for all options.
+
+<TerminalPrompt>
+  {
+    "? Select a package manager: (Use arrow keys)\n❯ npm \n  yarn \n  pnpm \n  bun\n? Select the transport you want to use: (Use arrow keys)\n❯ HTTP (runs on a server) \n  STDIO (runs on the user's machine)\n? Select components to initialize: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)\n❯◉ Tools\n ◉ Prompts\n ◉ Resources"
   }
 </TerminalPrompt>
 

packages/create-xmcp-app/README.md

@@ -35,6 +35,9 @@ You will be asked for the project name and then guided through a series of promp
 - `--skip-install`: Skip installing dependencies
 - `--http`: Enable HTTP transport
 - `--stdio`: Enable STDIO transport
+- `--gpt`: Initialize with GPT App template (ChatGPT/OpenAI widgets)
+- `--ui`: Initialize with MCP App template (React widgets for ext-apps)
+- `--tailwind, --tw`: Use Tailwind CSS (only with --gpt or --ui, defaults to --ui if used alone)
 
 ## Getting Started
 

packages/create-xmcp-app/src/helpers/create.ts

@@ -19,6 +19,7 @@ interface ProjectOptions {
   skipInstall?: boolean;
   paths?: string[];
   template?: string;
+  tailwind?: boolean;
 }
 
 /**
@@ -41,40 +42,39 @@ export function createProject(options: ProjectOptions): void {
     transports,
     packageVersion,
     skipInstall,
-    paths = ["tools", "prompts"],
+    paths = ["tools", "prompts", "resources"],
     template = "typescript",
+    tailwind = false,
   } = options;
 
   // Ensure the project directory exists
   fs.ensureDirSync(projectPath);
 
   // Get the template directory path
-  const templateDir = path.join(__dirname, "../../templates", template);
+  let templateDir: string;
+  if (template === "gpt-apps" || template === "mcp-apps") {
+    const subTemplate = tailwind ? "tailwind" : "default";
+    templateDir = path.join(
+      __dirname,
+      "../../templates",
+      template,
+      subTemplate
+    );
+  } else {
+    templateDir = path.join(__dirname, "../../templates", template);
+  }
 
   // Copy template files to project directory
   copyTemplate(templateDir, projectPath, paths);
 
   // Rename special files (e.g., _gitignore to .gitignore)
   renameFiles(projectPath);
 
-  // For openai and react templates, skip config generation and package.json update
-  // as they're already provided in the template
-  if (template === "openai" || template === "react") {
-    // Update package.json name only
-    const packageJsonPath = path.join(projectPath, "package.json");
-    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
-    packageJson.name = projectName;
-    fs.writeFileSync(
-      packageJsonPath,
-      JSON.stringify(packageJson, null, 2) + "\n"
-    );
-  } else {
-    // Generate xmcp.config.ts based on selected transports and paths
-    generateConfig(projectPath, transports, paths);
+  // Generate xmcp.config.ts based on selected transports and paths
+  generateConfig(projectPath, transports, paths);
 
-    // Update package.json with project configuration
-    updatePackageJson(projectPath, projectName, transports);
-  }
+  // Update package.json with project configuration
+  updatePackageJson(projectPath, projectName, transports);
 
   // Create necessary project directories
   createProjectDirectories(projectPath);

packages/create-xmcp-app/src/index.ts

@@ -39,30 +39,18 @@ const program = new Command()
   .option("--skip-install", "Skip installing dependencies", false)
   .option("--http", "Enable HTTP transport", false)
   .option("--stdio", "Enable STDIO transport", false)
+  .option("--gpt", "Initialize with GPT App template", false)
+  .option("--ui", "Initialize with MCP App template", false)
   .option(
-    "--gpt",
-    "[DEPRECATED] Initialize with OpenAI/ChatGPT widgets template",
+    "--tailwind, --tw",
+    "Use Tailwind CSS (only with --gpt or --ui)",
     false
   )
-  .option("--ui", "[DEPRECATED] Initialize with React widgets template", false)
   .action(async (projectDir, options) => {
     console.log(chalk.bold(`\ncreate-xmcp-app@${packageJson.version}`));
 
-    // Show deprecation warnings for template flags
-    if (options.gpt || options.ui) {
-      console.log(
-        chalk.yellow(
-          "\nDEPRECATION WARNING: The --gpt and --ui flags will be removed in a future version."
-        )
-      );
-      console.log(
-        chalk.dim(
-          "React components and OpenAI widgets now work natively with any xmcp app."
-        )
-      );
-      console.log(
-        chalk.dim("See: https://xmcp.dev/docs for more information.\n")
-      );
+    if (options.tailwind && !options.gpt && !options.ui) {
+      options.ui = true;
     }
 
     // If project directory wasn't specified, ask for it
@@ -106,29 +94,85 @@ const program = new Command()
     let transports = ["http"];
     let selectedPaths = ["tools", "prompts", "resources"];
     let template = "typescript";
+    let templateChoice = "default";
+    let tailwind = false;
 
-    // If --gpt flag is set, use openai template and force certain settings
+    // Handle --gpt flag
     if (options.gpt) {
-      template = "openai";
+      template = "gpt-apps";
       transports = ["http"];
-      selectedPaths = ["tools"]; // new OpenAI template doesn't use prompts or resources
+      selectedPaths = ["tools"];
+      templateChoice = "gpt-app";
+      tailwind = options.tailwind || false;
     }
 
-    // If --ui flag is set, use react template and force certain settings
+    // Handle --ui flag
     if (options.ui) {
-      template = "react";
+      template = "mcp-apps";
       transports = ["http"];
-      selectedPaths = ["tools"]; // React template uses only tools
+      selectedPaths = ["tools"];
+      templateChoice = "mcp-app";
+      tailwind = options.tailwind || false;
     }
 
-    // Handle transport selection from CLI options (only for non-gpt/ui templates)
     if (!options.gpt && !options.ui && (options.http || options.stdio)) {
       transports = [];
       if (options.http) transports.push("http");
       if (options.stdio) transports.push("stdio");
     }
 
     if (!options.yes) {
+      if (!options.gpt && !options.ui) {
+        const templateAnswers = await inquirer.prompt([
+          {
+            type: "list",
+            name: "template",
+            message: "Select a template:",
+            choices: [
+              {
+                name: "Default (Standard MCP server)",
+                value: "default",
+              },
+              {
+                name: "GPT App (ChatGPT/OpenAI widgets)",
+                value: "gpt-app",
+              },
+              {
+                name: "MCP App (React widgets for ext-apps)",
+                value: "mcp-app",
+              },
+            ],
+            default: "default",
+          },
+        ]);
+        templateChoice = templateAnswers.template;
+
+        if (templateChoice === "gpt-app") {
+          template = "gpt-apps";
+          transports = ["http"];
+          selectedPaths = ["tools"];
+        } else if (templateChoice === "mcp-app") {
+          template = "mcp-apps";
+          transports = ["http"];
+          selectedPaths = ["tools"];
+        }
+
+        if (
+          (templateChoice === "gpt-app" || templateChoice === "mcp-app") &&
+          !options.tailwind
+        ) {
+          const tailwindAnswers = await inquirer.prompt([
+            {
+              type: "confirm",
+              name: "tailwind",
+              message: "Would you like to use Tailwind CSS?",
+              default: true,
+            },
+          ]);
+          tailwind = tailwindAnswers.tailwind;
+        }
+      }
+
       if (options.useYarn) packageManager = "yarn";
       if (options.usePnpm) packageManager = "pnpm";
       if (options.useBun) packageManager = "bun";
@@ -156,8 +200,7 @@ const program = new Command()
         packageManager = pmAnswers.packageManager;
       }
 
-      // Transport selection (skip if already specified via CLI options or using --gpt/--ui)
-      if (!options.gpt && !options.ui && !options.http && !options.stdio) {
+      if (templateChoice === "default" && !options.http && !options.stdio) {
         const transportAnswers = await inquirer.prompt([
           {
             type: "list",
@@ -179,8 +222,8 @@ const program = new Command()
         transports = [transportAnswers.transport];
       }
 
-      // Path selection checklist (skip for --gpt/--ui template)
-      if (!options.gpt && !options.ui) {
+      // Path selection checklist (only for none template)
+      if (templateChoice === "default") {
         const pathAnswers = await inquirer.prompt([
           {
             type: "checkbox",
@@ -232,10 +275,15 @@ const program = new Command()
       if (options.usePnpm) packageManager = "pnpm";
       if (options.useBun) packageManager = "bun";
 
-      // Use all paths by default in non-interactive mode (unless --gpt or --ui is set)
-      if (!options.gpt && !options.ui) {
+      // Use all paths by default in non-interactive mode (unless template is set)
+      if (templateChoice === "default") {
         selectedPaths = ["tools", "prompts", "resources"];
       }
+
+      // Default to Tailwind for GPT and UI templates in non-interactive mode
+      if (templateChoice === "gpt-app" || templateChoice === "mcp-app") {
+        tailwind = true;
+      }
     }
 
     const spinner = ora("Creating your xmcp app...").start();
@@ -249,6 +297,7 @@ const program = new Command()
         skipInstall,
         paths: selectedPaths,
         template,
+        tailwind,
       });
 
       spinner.succeed(chalk.green("Your xmcp app is ready"));

…eate-xmcp-app/templates/openai/README.md …app/templates/gpt-apps/default/README.mdpackages/create-xmcp-app/templates/openai/README.md renamed to packages/create-xmcp-app/templates/gpt-apps/default/README.md packages/create-xmcp-app/templates/openai/README.md renamed to packages/create-xmcp-app/templates/gpt-apps/default/README.md

@@ -9,8 +9,3 @@ npm run dev
 ```
 
 This will start the development server with HTTP transport enabled.
-
-## Learn More
-
-- [xmcp Documentation](https://xmcp.dev)
-- [ChatGPT Widgets Guide](https://xmcp.dev/docs/integrations/chatgpt)

…ate-xmcp-app/templates/openai/_gitignore …pp/templates/gpt-apps/default/_gitignorepackages/create-xmcp-app/templates/openai/_gitignore renamed to packages/create-xmcp-app/templates/gpt-apps/default/_gitignore packages/create-xmcp-app/templates/openai/_gitignore renamed to packages/create-xmcp-app/templates/gpt-apps/default/_gitignore

@@ -0,0 +1,24 @@
+{
+  "name": "create-xmcp-app",
+  "version": "0.1.0",
+  "description": "An xmcp application with ChatGPT widgets",
+  "keywords": [
+    "chatgpt"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "xmcp build",
+    "dev": "xmcp dev"
+  },
+  "dependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3"
+  }
+}