Actionbook：最初のAIブラウザエージェントを構築する

Your Agent
  │
  ├─ actionbook search "google search"        ──►  利用可能なAction Manualsを検索
  │                                                 • google.com:/:default
  │                                                 • google.com:/advanced_search:default
  │
  ├─ actionbook get "google.com:/:default"    ◄──  セレクタを含む完全なマニュアル
  │                                                 • textarea_search: textarea[aria-label="Search"]
  │                                                 • button_search: [aria-label="Google Search"]
  │
  ├─ actionbook browser open "google.com"     ──►  実際のChrome/Edge/Brave
  │                                                 (CDP経由で接続 — ドライバー不要)
  │
  └─ actionbook browser fill / press          ──►  検証済みセレクタを使用してアクション実行

my-actionbook-agent/
├── agent.mjs          ← すべてを統括するAIエージェント
├── browser.mjs        ← Actionbook CLIコマンドの薄いラッパー
├── .env               ← APIキー（コミットしない）
└── package.json

npm install -g @actionbookdev/cli

actionbook --version

# Google関連のAction Manualsを検索
actionbook search "google search"

# GoogleホームページのAction Manualをすべて取得
actionbook get "google.com:/:default"

# 既存のChrome/Brave/EdgeでGoogleを開く
actionbook browser open "https://www.google.com"

# Action Manualのセレクタを使用して検索ボックスに入力
actionbook browser fill 'textarea[aria-label="Search"]' "Actionbook browser agent"

# Enterを押して検索
actionbook browser press "Enter"

# スクリーンショットで確認
actionbook browser screenshot ./result.png

# 完了したら必ず閉じる
actionbook browser close

mkdir my-actionbook-agent
cd my-actionbook-agent
npm init -y
npm install openai dotenv

{
  "name": "my-actionbook-agent",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node agent.mjs"
  },
  "dependencies": {
    "openai": "^4.0.0",
    "dotenv": "^16.0.0"
  }
}

OPENAI_API_KEY=sk-your-key-here

// browser.mjs
// Wraps Actionbook CLI commands so the agent can call them from JS.
import { execSync } from "node:child_process";

// Run a CLI command and return its stdout as a string.
// opts.stdio = "inherit" lets you see live output in the terminal.
function run(cmd, opts = {}) {
  return execSync(cmd, { encoding: "utf8", ...opts });
}

// ── Action Manual Commands ───────────────────────────────────────────────────

/** Search for action manuals. Returns raw text output from the CLI. */
export function searchActions(query) {
  console.log(`[actionbook] Searching: "${query}"`);
  return run(`actionbook search "${query}"`);
}

/** Fetch the full action manual for an area ID (e.g. "google.com:/:default"). */
export function getManual(areaId) {
  console.log(`[actionbook] Getting manual: ${areaId}`);
  return run(`actionbook get "${areaId}"`);
}

// ── Browser Commands ─────────────────────────────────────────────────────────

/** Open a URL in your existing Chrome/Brave/Edge browser. */
export function browserOpen(url) {
  console.log(`[actionbook] Opening: ${url}`);
  run(`actionbook browser open "${url}"`, { stdio: "inherit" });
}

/** Fill an input field with text (official Actionbook command). */
export function browserFill(selector, text) {
  console.log(`[actionbook] Filling "${text}" into ${selector}`);
  // Use single quotes for selector to avoid escaping issues with attribute selectors
  run(`actionbook browser fill '${selector}' '${text}'`);
}

/** Press a key (e.g., "Enter", "Tab", "Escape"). */
export function browserPressKey(key) {
  console.log(`[actionbook] Pressing key: ${key}`);
  run(`actionbook browser press "${key}"`);
}

/** Take a screenshot. Returns path string. */
export function browserScreenshot(path = "./screenshot.png") {
  run(`actionbook browser screenshot "${path}"`);
  return path;
}

/** Close the browser session. ALWAYS call this when done. */
export function browserClose() {
  console.log(`[actionbook] Closing browser.`);
  try {
    run(`actionbook browser close`);
  } catch {
    // Ignore errors on close — browser may already be shut down.
  }
}

// agent.mjs
import "dotenv/config";
import OpenAI from "openai";
import {
  searchActions,
  getManual,
  browserOpen,
  browserFill,
  browserPressKey,
  browserScreenshot,
  browserClose,
} from "./browser.mjs";

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

// ── Step 1: Parse action IDs from search results ────────────────────────────

function parseActionIds(searchOutput) {
  const lines = searchOutput.split("\n");
  const actionIds = [];

  for (const line of lines) {
    // Match "- ID: xxx" format
    const idMatch = line.match(/^- ID:\s*(.+)$/);
    if (idMatch) {
      actionIds.push(idMatch[1].trim());
      continue;
    }
    // Match "### xxx" header format
    const headerMatch = line.match(/^###\s+([\w.-]+:[^\s]+)/);
    if (headerMatch) {
      actionIds.push(headerMatch[1].trim());
    }
  }

  return actionIds;
}

// ── Step 2: Main search task using action manuals ───────────────────────────

async function runSearchTask(query) {
  console.log(`\n🤖 Agent starting task: search Google for "${query}"\n`);

  try {
    // Search for Google search action manual
    console.log("[agent] Searching for action manual...");
    const searchResults = searchActions("google search");

    // Parse action IDs from results
    const actionIds = parseActionIds(searchResults);
    console.log("[agent] Found action IDs:", actionIds);

    // Find the Google homepage action
    let actionId = actionIds.find((id) => 
      id.startsWith("google.com:/:") || id === "google.com:/:default"
    );
    if (!actionId) {
      actionId = actionIds.find((id) => id.startsWith("google.com:"));
    }
    if (!actionId) throw new Error("No action manual found for Google");

    // Get the full action manual
    console.log(`[agent] Fetching manual for: ${actionId}`);
    const manual = getManual(actionId);

    // Extract the search input selector from the role definition
    // The manual contains: getByRole('combobox', { name: 'Search' })
    let searchInputSelector = '[role="combobox"]';
    const roleMatch = manual.match(/getByRole\('combobox',\s*\{\s*name:\s*'([^']+)'\s*\}\)/);
    if (roleMatch) {
      const comboboxName = roleMatch[1];
      console.log(`[agent] Found combobox name: ${comboboxName}`);
      searchInputSelector = `textarea[aria-label="${comboboxName}"]`;
    }
    console.log(`[agent] Using selector: ${searchInputSelector}`);

    // Execute browser automation
    browserOpen("https://www.google.com");
    await new Promise((resolve) => setTimeout(resolve, 1500));

    // Fill the search input and submit
    browserFill(searchInputSelector, query);
    browserPressKey("Enter");

    // Wait for results and screenshot
    await new Promise((resolve) => setTimeout(resolve, 3000));
    const shot = browserScreenshot("./search-result.png");
    console.log(`\n✅ Done! Screenshot saved to ${shot}`);
  } finally {
    browserClose();
  }
}

// ── Entry point ──────────────────────────────────────────────────────────────

const query = process.argv[2] ?? "Actionbook browser agent";
runSearchTask(query).catch((err) => {
  console.error("\n❌ Agent error:", err.message);
  browserClose();
  process.exit(1);
});

node agent.mjs "open source AI agents"

🤖 Agent starting task: search Google for "open source AI agents"

[agent] Searching for action manual...
[actionbook] Searching: "google search"
[agent] Found action IDs: [ 'google.com:/:default', ... ]
[agent] Fetching manual for: google.com:/:default
[actionbook] Getting manual: google.com:/:default
[agent] Found combobox name: Search
[agent] Using selector: textarea[aria-label="Search"]
[actionbook] Opening: https://www.google.com
✓ Google
  https://www.google.com
[actionbook] Filling "open source AI agents" into textarea[aria-label="Search"]
[actionbook] Pressing key: Enter

✅ Done! Screenshot saved to ./search-result.png
[actionbook] Closing browser.