@aigne/example-mcp-puppeteer NPM

Puppeteer MCP Server Demo

This is a demonstration of using AIGNE Framework and Puppeteer MCP Server to extract content from websites using Puppeteer. The example now supports both one-shot and interactive chat modes, along with customizable model settings and pipeline input/output.

flowchart LR

in(In)
out(Out)
agent(AI Agent)
puppeteer(Puppeteer MCP Agent)
navigate(Navigate to URL)
evaluate(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

Following is a sequence diagram of the workflow to summarize content from a website:

sequenceDiagram
participant User
participant AI as AI Agent
participant P as Puppeteer MCP Agent
participant N as Navigate to URL
participant E as Evaluate JS

User ->> AI: summarize content from https://www.arcblock.io
AI ->> P: extract content from https://www.arcblock.io
P ->> N: navigate to https://www.arcblock.io
N ->> P: navigation completed
P ->> E: evaluate document.body.innerText
E ->> P: content extracted
E ->> AI: extracted content as context
AI ->> User: The content is as follows: ...

Prerequisites

Node.js and npm installed on your machine
An OpenAI API key for interacting with OpenAI's services
Optional dependencies (if running the example from source code):
- Bun for running unit tests & examples
- Pnpm for package management

Quick Start (No Installation Required)

export OPENAI_API_KEY=YOUR_OPENAI_API_KEY # Set your OpenAI API key

# Run in one-shot mode (default)
npx -y @aigne/example-mcp-puppeteer

# Run in interactive chat mode
npx -y @aigne/example-mcp-puppeteer --chat

# Use pipeline input
echo "extract content from https://www.arcblock.io" | npx -y @aigne/example-mcp-puppeteer

Installation

Clone the Repository

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

Install Dependencies

cd aigne-framework/examples/mcp-puppeteer

pnpm install

Setup Environment Variables

Setup your OpenAI API key in the .env.local file:

OPENAI_API_KEY="" # Set your OpenAI API key here

Run the Example

pnpm start

Run Options

The example supports the following command-line parameters:

Parameter	Description	Default
`--chat`	Run in interactive chat mode	Disabled (one-shot mode)
`--model <provider[:model]>`	AI model to use in format 'provider:model' where model is optional. Examples: 'openai' or 'openai:gpt-4o-mini'	openai
`--temperature <value>`	Temperature for model generation	Provider default
`--top-p <value>`	Top-p sampling value	Provider default
`--presence-penalty <value>`	Presence penalty value	Provider default
`--frequency-penalty <value>`	Frequency penalty value	Provider default
`--log-level <level>`	Set logging level (ERROR, WARN, INFO, DEBUG, TRACE)	INFO
`--input`, `-i <input>`	Specify input directly	None

Examples

# Run in chat mode (interactive)
pnpm start -- --chat

# Set logging level
pnpm start -- --log-level DEBUG

# Use pipeline input
echo "extract content from https://www.arcblock.io" | pnpm start

Example

The following example demonstrates how to extract content from a website:

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

const { OPENAI_API_KEY } = process.env;
assert(OPENAI_API_KEY, "Please set the OPENAI_API_KEY environment variable");

const model = new OpenAIChatModel({
  apiKey: OPENAI_API_KEY,
});

const puppeteerMCPAgent = await MCPAgent.from({
  command: "npx",
  args: ["-y", "@modelcontextprotocol/server-puppeteer"],
});

const aigne = new AIGNE({
  model,
  skills: [puppeteerMCPAgent],
});

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
`,
});

const result = await aigne.invoke(agent, "extract content from https://www.arcblock.io");

console.log(result);
// output:
// {
//   $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 ...",
// }

await aigne.shutdown();