Codex SDKからchrome-devtool MCPを利用しブラウザ操作を行わせる

こんにちは。ポート株式会社でバックエンドエンジニアをしているrin3です。
今回は「AIを使ってブラウザ操作を自動化する」という目的を、Codex SDKとChrome DevTools MCPを利用して解決していきたいと思います。

利用するツール

Codex SDK

Codexをコード内で利用することができるようになるツールセットです。
2025/11現在、TypeScriptのみ利用可能なようです。
https://developers.openai.com/codex/sdk/

Chrome DevTools MCP

Google公式が提供している、Chromeを直接操作することができるMCPサーバーです。
https://github.com/ChromeDevTools/chrome-devtools-mcp

実装

前提

npmがインストールされていること
OpenAIのAPIキーを所持していること

ダウンロード

codex SDKのインストール
npm install @openai/codex-sdk
OpenAIのAPIキーを保存する(今回はdotenvを利用)
npm install dotenv

設定

sandbox_mode = "workspace-write"
approval_policy = "never"

[sandbox_workspace_write]
network_access = true

[mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest"]

コードの実装

import { Codex } from "@openai/codex-sdk";
import 'dotenv/config'

const codex = new Codex(
    {
        apiKey: process.env.OPENAI_API_KEY
    }
);

const thread = codex.startThread();
const result = await thread.run(
    `
    chrome-devtools mcpサーバーを利用して、
    https://zenn.dev/p/port_incにアクセスし、
    直近投稿された3つの記事のタイトルを取得して下さい。
    `
); // 好きなプロンプトを入力、サイトの利用規約にはくれぐれも注意してください。

console.log(result);

npx ts-node {上記コードのfile名} で実行します。

うまく動作していると、Chromeが立ち上がり、以下のように表示されます。

結果として、以下の出力が出てきました。

{
  items: [
    {
      id: 'item_0',
      type: 'mcp_tool_call',
      server: 'chrome-devtools',
      tool: 'list_pages',
      status: 'completed'
    },
    {
      id: 'item_1',
      type: 'mcp_tool_call',
      server: 'chrome-devtools',
      tool: 'take_snapshot',
      status: 'completed'
    },
    {
      id: 'item_2',
      type: 'mcp_tool_call',
      server: 'chrome-devtools',
      tool: 'navigate_page',
      status: 'completed'
    },
    {
      id: 'item_3',
      type: 'mcp_tool_call',
      server: 'chrome-devtools',
      tool: 'take_snapshot',
      status: 'completed'
    },
    {
      id: 'item_4',
      type: 'mcp_tool_call',
      server: 'chrome-devtools',
      tool: 'evaluate_script',
      status: 'completed'
    },
    {
      id: 'item_5',
      type: 'agent_message',
      text: '最新順に並んでいた記事リストから上位3件を取得しました。  \n' +
        '- 「朝Docs読み会」という試みを続けている  \n' +
        '- Claude Code を1ヶ月使ってみて  \n' +
        '- 新卒エンジニアがClaude Codeを使ってみた結果 〜社内システムのプロトタイピングを通じた学びと今後の展望〜'
    }
  ],
  finalResponse: '最新順に並んでいた記事リストから上位3件を取得しました。  \n' +
    '- 「朝Docs読み会」という試みを続けている  \n' +
    '- Claude Code を1ヶ月使ってみて  \n' +
    '- 新卒エンジニアがClaude Codeを使ってみた結果 〜社内システムのプロトタイピングを通じた学びと今後の展望〜',
  usage: {
    input_tokens: 62249,
    cached_input_tokens: 31360,
    output_tokens: 1292
  }
}

itemには、Codexの操作および結果が出力されており、finalResponseとして期待している結果が出力されていますね。
chrome-devtoolsを通してブラウザを立ち上げ、内容を確認できています。

まとめ

本記事では、Codex SDKとChrome DevTools MCPを利用して、ブラウザ操作を自動化する方法を紹介しました。
かなり簡単に自動でブラウザ操作できるようになったかなと思います。
ローカルでアプリケーションを立ち上げ、ブラウザ上から動作確認等することもできそうなので、色々試してみたいです。