MCP Puppeteer

flowchart LR

in(In)
out(Out)
agent(AI Agent)
puppeteer(Puppeteer MCP Agent)
navigate(URL に移動)
evaluate(JS を評価)

in --> agent <--> puppeteer

subgraph MCP Agent
  puppeteer <--> navigate
  puppeteer <--> evaluate
end

agent --> out

classDef inputOutput fill:#f9f0ed,stroke:#debbae,stroke-width:2px,color:#b35b39,font-weight:bolder;
classDef processing fill:#F0F4EB,stroke:#C2D7A7,stroke-width:2px,color:#6B8F3C,font-weight:bolder;

class in inputOutput
class out inputOutput
class agent processing
class puppeteer processing
class navigate processing
class evaluate processing

shape: sequence_diagram

User: {
  shape: c4-person
}

AI: {
  label: "AI Agent"
}

P: {
  label: "Puppeteer MCP Agent"
}

N: {
  label: "URL に移動"
}

E: {
  label: "JS を評価"
}

User -> AI: "https://www.arcblock.io のコンテンツを要約して"
AI -> P: "https://www.arcblock.io からコンテンツを抽出して"
P -> N: "https://www.arcblock.io に移動して"
N -> P: "移動完了"
P -> E: "document.body.innerText を評価して"
E -> P: "コンテンツ抽出済み"
E -> AI: "コンテキストとして抽出されたコンテンツ"
AI -> User: "コンテンツは以下の通りです: ..."

# ワンショットモードで実行 (デフォルト)
npx -y @aigne/example-mcp-puppeteer

# 対話型チャットモードで実行
npx -y @aigne/example-mcp-puppeteer --interactive

# パイプライン入力を使用
echo "extract content from https://www.arcblock.io" | npx -y @aigne/example-mcp-puppeteer

git clone https://github.com/AIGNE-io/aigne-framework

cd aigne-framework/examples/mcp-puppeteer
pnpm install

pnpm start

pnpm start -- --interactive

import { AIAgent, AIGNE, MCPAgent } from "@aigne/core";
import { OpenAIChatModel } from "@aigne/core/models/openai-chat-model.js";

const { OPENAI_API_KEY } = process.env;

// API キーで OpenAI モデルを初期化
const model = new OpenAIChatModel({
  apiKey: OPENAI_API_KEY,
});

// Puppeteer サーバーを実行する MCPAgent を作成
const puppeteerMCPAgent = await MCPAgent.from({
  command: "npx",
  args: ["-y", "@modelcontextprotocol/server-puppeteer"],
});

// モデルと Puppeteer Agent をスキルとして AIGNE インスタンスを初期化
const aigne = new AIGNE({
  model,
  skills: [puppeteerMCPAgent],
});

// Web コンテンツ抽出のための指示を持つ AI Agent を定義
const agent = AIAgent.from({
  instructions: `\
## Steps to extract content from a website
1. navigate to the url
2. evaluate document.body.innerText to get the content
`,
});

// プロンプトで Agent を呼び出す
const result = await aigne.invoke(
  agent,
  "extract content from https://www.arcblock.io",
);

console.log(result);
// 期待される出力:
// {
//   $message: "The content extracted from the website [ArcBlock](https://www.arcblock.io) is as follows:\n\n---\n\n**Redefining Software Architect and Ecosystems**\n\nA total solution for building decentralized applications ...",
// }

// AIGNE インスタンスとその Agent をシャットダウン
await aigne.shutdown();

aigne observe