浏览网页

Agents 可以使用浏览器渲染 API 或您首选的无头浏览器服务来浏览网页。

浏览器渲染 API

浏览器渲染允许您启动无头浏览器实例、渲染网页，并通过您的 Agent 与网站交互。

您可以定义一个使用 Puppeteer 提取网页内容、解析 DOM 并通过调用 OpenAI 模型提取相关信息的方法：

JavaScript

export class MyAgent extends Agent {
  async browse(browserInstance, urls) {
    let responses = [];
    for (const url of urls) {
      const browser = await puppeteer.launch(browserInstance);
      const page = await browser.newPage();
      await page.goto(url);

      await page.waitForSelector("body");
      const bodyContent = await page.$eval(
        "body",
        (element) => element.innerHTML,
      );
      const client = new OpenAI({
        apiKey: this.env.OPENAI_API_KEY,
      });

      let resp = await client.chat.completions.create({
        model: this.env.MODEL,
        messages: [
          {
            role: "user",
            content: `从下面的网站内容中返回一个包含产品名称、价格和 URL 的 JSON 对象，格式如下：{ "name": "产品名称", "price": "价格", "url": "URL" }。<content>${bodyContent}</content>`,
          },
        ],
        response_format: {
          type: "json_object",
        },
      });

      responses.push(resp);
      await browser.close();
    }

    return responses;
  }
}

TypeScript

interface Env {
  BROWSER: Fetcher;
}

export class MyAgent extends Agent<Env> {
  async browse(browserInstance: Fetcher, urls: string[]) {
    let responses = [];
    for (const url of urls) {
      const browser = await puppeteer.launch(browserInstance);
      const page = await browser.newPage();
      await page.goto(url);

      await page.waitForSelector("body");
      const bodyContent = await page.$eval(
        "body",
        (element) => element.innerHTML,
      );
      const client = new OpenAI({
        apiKey: this.env.OPENAI_API_KEY,
      });

      let resp = await client.chat.completions.create({
        model: this.env.MODEL,
        messages: [
          {
            role: "user",
            content: `从下面的网站内容中返回一个包含产品名称、价格和 URL 的 JSON 对象，格式如下：{ "name": "产品名称", "price": "价格", "url": "URL" }。<content>${bodyContent}</content>`,
          },
        ],
        response_format: {
          type: "json_object",
        },
      });

      responses.push(resp);
      await browser.close();
    }

    return responses;
  }
}

您还需要安装 @cloudflare/puppeteer 包并将以下内容添加到您的 Agent 的 wrangler 配置中：

npm

npm i -D @cloudflare/puppeteer

yarn

yarn add -D @cloudflare/puppeteer

pnpm

pnpm add -D @cloudflare/puppeteer

wrangler.jsonc

{
  // ...
  "browser": {
    "binding": "MYBROWSER",
  },
  // ...
}

wrangler.toml

[browser]
binding = "MYBROWSER"

Browserbase

您还可以通过直接从 Agent 内使用 Browserbase API 来使用 Browserbase ↗。

获得您的 Browserbase API 密钥 ↗后，您可以通过创建密钥将其添加到您的 Agent：

cd your-agent-project-folder
npx wrangler@latest secret put BROWSERBASE_API_KEY

Enter a secret value: ******
Creating the secret for the Worker "agents-example"
Success! Uploaded secret BROWSERBASE_API_KEY

安装 @cloudflare/puppeteer 包并在您的 Agent 内使用它来调用 Browserbase API：

npm

npm i @cloudflare/puppeteer

yarn

yarn add @cloudflare/puppeteer

pnpm

pnpm add @cloudflare/puppeteer

JavaScript

export class MyAgent extends Agent {
  constructor(env) {
    super(env);
  }
}

TypeScript

interface Env {
  BROWSERBASE_API_KEY: string;
}

export class MyAgent extends Agent<Env> {
  constructor(env: Env) {
    super(env);
  }
}