create-agent-ui/src/index.js

CLI tool to create an Agent UI with one command

#!/usr/bin/env node

import chalk from "chalk";
import { execSync } from "child_process";
import fs from "fs";
import readline from "readline";
import { fileURLToPath } from "url";
import { dirname, join } from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

try {
  const asciiArt = fs.readFileSync(join(__dirname, "ascii.txt"), "utf8");
  console.log(chalk.hex("#FF4017")(asciiArt));
} catch (error) {
  console.log(
    chalk.hex("#FF4017")(`
     _                      
    / \\   __ _ _ __   ___  
   / _ \\ / _\` | '_ \\ / _ \\ 
  / ___ \\ (_| | | | | (_) |
 /_/   \\_\\__, |_| |_|\\___/ 
         |___/             
`)
  );
}

// Get project name from command-line arguments
const projectName = process.argv[2] || "agent-ui";

// Detect package manager
const detectPackageManager = () => {
  const npm_execpath = process.env.npm_execpath || "";
  const userAgent = process.env.npm_config_user_agent || "";

  if (process.env.BUNNPM) return "bun";
  if (npm_execpath.includes("pnpm")) return "pnpm";
  if (npm_execpath.includes("yarn")) return "yarn";
  if (userAgent.includes("pnpm")) return "pnpm";
  if (userAgent.includes("yarn")) return "yarn";
  if (userAgent.includes("bun")) return "bun";
  return "npm";
};

const packageManager = detectPackageManager();

const askForInstallation = async () => {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  });

  return new Promise((resolve) => {
    rl.question(
      chalk.yellow("\nDo you want to install all dependencies now? (y/n): "),
      (answer) => {
        rl.close();
        resolve(answer.toLowerCase() === "y");
      }
    );
  });
};

console.log(
  chalk.blue(`\n🚀 Creating a new Agent UI project: ${projectName}\n`)
);

const repoUrl = "https://github.com/agno-agi/agent-ui.git";

// Clone the repo
try {
  execSync(`git clone --depth=1 ${repoUrl} ${projectName}`, {
    stdio: "inherit",
  });

  // Remove the .git folder so it's not tied to the original repo
  fs.rmSync(`${projectName}/.git`, { recursive: true, force: true });

  const installCommand = {
    npm: "npm install",
    pnpm: "pnpm install",
    yarn: "yarn",
    bun: "bun install",
  }[packageManager];

  console.log(chalk.green(`\n✅ Project cloned successfully!`));

  (async () => {
    const shouldInstall = await askForInstallation();

    if (shouldInstall) {
      console.log(chalk.blue(`\n📦 Installing dependencies...\n`));
      try {
        execSync(installCommand, {
          stdio: "inherit",
          cwd: projectName,
        });
        console.log(chalk.green(`\n✅ Dependencies installed successfully!`));
      } catch (error) {
        console.error(
          chalk.red(`\n❌ Error installing dependencies: ${error.message}`)
        );
      }
    }

    console.log();
    console.log(chalk.gray("─".repeat(50)));
    console.log();

    console.log(chalk.yellow(`📌 Next Steps:`));
    console.log();
    console.log(
      chalk.cyan(
        `Before setting up the Agent UI, ensure that an Agno playground server is running.`
      )
    );
    console.log(
      chalk.cyan(
        `To set up the Agno Playground Server locally, please visit: https://agno.link/agent-ui#connect-to-local-agents`
      )
    );

    if (!shouldInstall) {
      console.log(chalk.cyan(`Then, run the following commands:`));
      console.log();
      console.log(
        chalk.green(
          `cd ${projectName} && ${installCommand} && ${packageManager} run dev\n`
        )
      );
    } else {
      console.log(chalk.cyan(`Then, start the Agent UI with:`));
      console.log();
      console.log(
        chalk.green(`cd ${projectName} && ${packageManager} run dev\n`)
      );
    }
  })();
} catch (error) {
  console.error(chalk.red("\n❌ Error cloning template:"), error.message);
}