Add agent prompt workflow

Author: bigmacfive

README.ko.md

@@ -89,6 +89,14 @@ appbun https://www.notion.so --package-manager npm
 appbun https://github.com --name "GitHub" --out-dir ./github --yes
 ```
 
+개발 중인 웹서비스 repo에서 에이전트에게 그대로 붙여넣을 프롬프트를 만들려면:
+
+```bash
+appbun prompt http://localhost:3000 --name "My App"
+```
+
+그러면 에이전트가 현재 웹앱을 `./desktop/my-app` 아래에 `appbun@latest`로 패키징하고 빌드하게 만드는 지시문이 출력됩니다.
+
 ## Showcase
 
 로그인 없이 바로 동작하는 공개 웹앱을 Playwright로 캡처하고, 생성되는 shell 느낌에 맞춰 프레임한 예시입니다.

README.md

@@ -89,6 +89,14 @@ Skip confirmation prompts in scripted runs:
 appbun https://github.com --name "GitHub" --out-dir ./github --yes
 ```
 
+Generate a copy-paste prompt for a coding agent that is working inside your web app repo:
+
+```bash
+appbun prompt http://localhost:3000 --name "My App"
+```
+
+That outputs an instruction block telling the agent to package the current web app into `./desktop/my-app` with `appbun@latest`, then build it.
+
 ## Showcase
 
 Public no-login web apps captured with Playwright and framed to match the generated shell:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appbun",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Turn any webpage into a desktop app with one command using Electrobun.",
   "license": "MIT",
   "type": "module",

src/__tests__/generator.test.ts

@@ -4,6 +4,7 @@ import { tmpdir } from "node:os";
 
 import { afterEach, describe, expect, test } from "bun:test";
 
+import { buildAgentPrompt } from "../lib/agent-prompt.js";
 import { renderTemplateFiles, resolveAppConfig, writeProject } from "../lib/generator.js";
 import { createFallbackSiteMetadata } from "../lib/metadata.js";
 import { deriveIdentifier, isDirectoryEmpty, normalizeHexColor, slugify, suggestAlternativeOutputDirectory } from "../lib/utils.js";
@@ -56,6 +57,44 @@ describe("utils", () => {
 });
 
 describe("generator", () => {
+  test("buildAgentPrompt targets an existing web app repo workflow", () => {
+    const config = resolveAppConfig(
+      "http://localhost:3000",
+      {
+        width: 1440,
+        height: 900,
+        packageManager: "bun",
+        install: false,
+        dmg: false,
+        yes: false,
+        showConfig: false,
+        quiet: true,
+        name: "My App",
+        outDir: "./desktop/my-app",
+      },
+      {
+        title: "My App",
+        description: "Internal dashboard",
+        themeColor: "#2255aa",
+        sourceUrl: "http://localhost:3000",
+        iconCandidates: [],
+      },
+    );
+
+    const prompt = buildAgentPrompt({ ...config, outDir: "./desktop/my-app" }, {
+      title: "My App",
+      description: "Internal dashboard",
+      themeColor: "#2255aa",
+      sourceUrl: "http://localhost:3000",
+      iconCandidates: [],
+    });
+
+    expect(prompt).toContain("You are working inside the repository of an existing web app.");
+    expect(prompt).toContain("http://localhost:3000/");
+    expect(prompt).toContain("./desktop/my-app");
+    expect(prompt).toContain("npx -y appbun@latest");
+  });
+
   test("createFallbackSiteMetadata derives defaults from url", () => {
     const metadata = createFallbackSiteMetadata("https://chat.openai.com");
     expect(metadata.title).toBe("Chat");
@@ -173,5 +212,5 @@ describe("generator", () => {
     expect(readFileSync(join(config.outDir, "src", "mainview", "index.ts"), "utf8")).toContain("example.com");
     expect(readFileSync(join(config.outDir, "package.json"), "utf8")).toContain("\"build:dmg\"");
     expect(icons.sourceUrl).toBe(svgIconDataUrl);
-  });
+  }, 10000);
 });

src/cli.ts

@@ -1,10 +1,12 @@
 #!/usr/bin/env node
 import process from "node:process";
 import { createInterface } from "node:readline/promises";
+import { spawnSync } from "node:child_process";
 
 import pc from "picocolors";
 import { Command } from "commander";
 
+import { buildAgentPrompt } from "./lib/agent-prompt.js";
 import {
   findLatestDmg,
   installDependencies,
@@ -36,7 +38,7 @@ const program = new Command();
 program
   .name("appbun")
   .description("Generate an Electrobun desktop wrapper from any web app URL.")
-  .version("0.5.1");
+  .version("0.5.2");
 
 program
   .command("create")
@@ -164,6 +166,76 @@ program
     }
   });
 
+program
+  .command("prompt")
+  .argument("<url>", "web app URL to wrap")
+  .option("-n, --name <name>", "app display name")
+  .option("-o, --out-dir <dir>", "desktop wrapper output directory inside the repo")
+  .option("--title <title>", "desktop window title")
+  .option("--description <description>", "package description")
+  .option("--identifier <identifier>", "bundle identifier, for example com.example.app")
+  .option("--theme-color <hex>", "shell accent color, for example #2563eb")
+  .option("--width <number>", "window width", parseInteger, defaultOptions.width)
+  .option("--height <number>", "window height", parseInteger, defaultOptions.height)
+  .option("--copy", "copy the generated prompt to the clipboard when supported")
+  .option("--quiet", "reduce metadata logs")
+  .action(async (url: string, options: CreateCommandOptions & { copy?: boolean }) => {
+    try {
+      validatePackageManager(defaultOptions.packageManager);
+      let usedFallbackMetadata = false;
+      const metadata = await fetchSiteMetadata(url).catch((error) => {
+        usedFallbackMetadata = true;
+        if (!options.quiet) {
+          const message = error instanceof Error ? error.message : String(error);
+          console.log(pc.bold(pc.yellow("warning")), `metadata fetch failed, continuing with URL defaults`);
+          console.log(`  reason: ${message}`);
+        }
+        return createFallbackSiteMetadata(url);
+      });
+
+      const resolvedOptions = {
+        ...defaultOptions,
+        ...options,
+        packageManager: defaultOptions.packageManager,
+        install: false,
+        dmg: false,
+        yes: false,
+        showConfig: false,
+      };
+      let config = resolveAppConfig(url, resolvedOptions, metadata);
+      if (!options.outDir) {
+        config = {
+          ...config,
+          outDir: `./desktop/${config.slug}`,
+        };
+      }
+      const prompt = buildAgentPrompt(config, metadata);
+
+      if (!options.quiet) {
+        console.log(pc.bold(pc.cyan("appbun")), "agent prompt");
+        console.log(`  title: ${metadata.title ?? "(not found)"}`);
+        console.log(`  description: ${metadata.description ?? "(not found)"}`);
+        console.log(`  theme color: ${metadata.themeColor ?? "(not found)"}`);
+        console.log(`  icon candidates: ${metadata.iconCandidates.length}`);
+        console.log(`  metadata mode: ${usedFallbackMetadata ? "fallback" : "fetched"}`);
+      }
+
+      if (options.copy) {
+        copyToClipboard(prompt);
+        if (!options.quiet) {
+          console.log(pc.bold(pc.green("copied")), "agent prompt copied to clipboard");
+          console.log("");
+        }
+      }
+
+      console.log(prompt);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      console.error(pc.bold(pc.red("error")), message);
+      process.exitCode = 1;
+    }
+  });
+
 program.addHelpText(
   "after",
   `
@@ -173,6 +245,7 @@ Examples:
   $ appbun create https://chat.openai.com --theme-color #10a37f --width 1600 --height 1000
   $ appbun https://chat.openai.com --name ChatGPT --dmg
   $ appbun https://github.com --name GitHub --out-dir ./github --yes
+  $ appbun prompt https://myapp.com --name "My App" --copy
 `,
 );
 
@@ -276,3 +349,26 @@ async function askForConfirmation(message: string, defaultYes: boolean): Promise
 function isInteractiveSession(): boolean {
   return Boolean(process.stdin.isTTY && process.stdout.isTTY);
 }
+
+function copyToClipboard(value: string): void {
+  const command =
+    process.platform === "darwin"
+      ? { bin: "pbcopy", args: [] }
+      : process.platform === "win32"
+        ? { bin: "clip", args: [] }
+        : { bin: "xclip", args: ["-selection", "clipboard"] };
+
+  const result = spawnSync(command.bin, command.args, {
+    input: value,
+    encoding: "utf8",
+    stdio: ["pipe", "ignore", "pipe"],
+    shell: process.platform === "win32",
+  });
+
+  if (result.status !== 0) {
+    const error = result.stderr?.toString().trim();
+    throw new Error(
+      `Clipboard copy failed${error ? `: ${error}` : ""}. Re-run without --copy if clipboard access is unavailable.`,
+    );
+  }
+}

src/lib/agent-prompt.ts

@@ -0,0 +1,60 @@
+import type { ResolvedAppConfig, SiteMetadata } from './types.js';
+
+export function buildAgentPrompt(config: ResolvedAppConfig, metadata: SiteMetadata): string {
+  const lines = [
+    'You are working inside the repository of an existing web app.',
+    'Create a desktop app wrapper for that app using appbun.',
+    '',
+    'Project inputs:',
+    `- Web app URL to package: ${config.url}`,
+    `- App name: ${config.name}`,
+    `- Window title: ${config.title}`,
+    `- Description: ${config.description}`,
+    `- Package name: ${config.packageName}`,
+    `- Bundle identifier: ${config.identifier}`,
+    `- Default window size: ${config.width}x${config.height}`,
+    `- Theme color: ${config.themeColor}`,
+    `- Desktop wrapper output directory: ${config.outDir}`,
+    `- Source metadata title: ${metadata.title ?? config.name}`,
+    `- Source metadata description: ${metadata.description ?? config.description}`,
+    '',
+    'Rules:',
+    '- Treat the current repository as the source web app project.',
+    '- Use `appbun@latest`; do not hand-roll the wrapper unless appbun output needs a specific fix.',
+    '- Keep the generated project inspectable and editable.',
+    '- Preserve site branding and icon metadata when available.',
+    '- If the URL points to a local dev server, make sure the dev server is running and reachable before packaging.',
+    '- Put the generated desktop wrapper inside this repo so the team can version it together.',
+    '- If the output directory already exists, prefer a safe non-destructive path or explicit confirmation.',
+    '- On macOS, include the DMG packaging step.',
+    '',
+    'Execution plan:',
+    '1. If needed, start the current repo web app and verify the target URL responds in a browser.',
+    `2. Run: npx -y appbun@latest ${shellQuote(config.url)} --name ${shellQuote(config.name)} --out-dir ${shellQuote(config.outDir)} --width ${config.width} --height ${config.height} --theme-color ${shellQuote(config.themeColor)} --yes`,
+    `3. Change into the generated wrapper directory: cd ${shellQuote(config.outDir)}`,
+    '4. Run: bun install',
+    '5. Run: bun run build',
+    '6. On macOS, run: bun run build:dmg',
+    '7. If the repo needs it, add a short README section explaining how to rebuild the desktop wrapper.',
+    '',
+    'Expected result:',
+    `- A generated Electrobun project in ${config.outDir}`,
+    '- Buildable macOS, Windows, and Linux wrapper project output',
+    '- macOS DMG output when packaging is requested',
+    '',
+    'When you reply, include:',
+    '- what command you ran',
+    '- where the generated project was written',
+    '- what metadata or icons were detected',
+    '- what still needs manual attention, if anything',
+  ];
+
+  return `${lines.join('\n')}\n`;
+}
+
+function shellQuote(value: string): string {
+  if (/^[a-zA-Z0-9_./:-]+$/.test(value)) {
+    return value;
+  }
+  return JSON.stringify(value);
+}

src/lib/metadata.ts

@@ -7,7 +7,7 @@ const USER_AGENT = [
   "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)",
   "AppleWebKit/537.36 (KHTML, like Gecko)",
   "Chrome/133.0.0.0 Safari/537.36",
-  "appbun/0.5.1 (+https://github.com/bigmacfive/appbun)"
+  "appbun/0.5.2 (+https://github.com/bigmacfive/appbun)"
 ].join(" ");
 
 export async function fetchSiteMetadata(rawUrl: string): Promise<SiteMetadata> {