developersIO
AgentCore × n8nでブラウザ自動化を試してみる

AgentCore × n8nでブラウザ自動化を試してみる

Amazon Bedrock AgentCorePlaywrightAWSAmazon Bedrock
FacebookHatena blogX
2025.11.07

Introduction

Amazon Bedrock AgentCore Browserは、ブラウザ自動化をマネージドサービスとして提供するAWSのサービスです。
2025年7月にプレビュー版が公開され、2025年10月にGAされました。

先日
「AgentCoreでブラウザ自動操作させてフォーム入力させてみて」
「n8nで使えるようにして」
という依頼をうけたので、試してみた記録です。

本記事では、AgentCore Browserをn8nのカスタムノードとして統合し、
AWS側にブラウザを用意したうえで、自動操作させてみます。
（n8n 本体はローカルの Docker (Colima) で動かす）

Environment

  • MacBook Pro (14-inch, M3, 2023)
  • OS : MacOS 15.7.1
  • Node : v20.x
  • Container Runtime : Colima 0.9.1
  • AWS CLI : 2.31.20

有効なAWSアカウントがあること。
なお、本記事で使用しているデモのリポジトリはここです。

Archtecture

今回は以下の構成で作成します。

┌───────────────────────────┐          ┌───────────────────────────┐
│ Local (macOS+Colima)      │          │ AWS                       │
│                           │          │                           │
│  Docker (n8n + node)      │  ◀────▶  │ AgentCore Browser         │
│  - AgentCore Custom Node  │  　　　   │ (Custom Resource)         │
│  - AWS CLI / Credentials  │ WebSocket│                           │
└───────────────────────────┘          └───────────────────────────┘

リポジトリには ECS Fargate 用スタックも含まれますが、
本記事でデプロイするのは AgentCoreBrowserStack のみです。
n8nローカルで動かします。

なお、AgentCore Browser が実際にブラウザ操作を行う際はAWS側でPlaywrightが立ち上がり、
開発者はそれを使用して自動操作APIを呼び出せます。

Setup

1. AgentCore Browserの作成

まず、AWS上にAgentCore Browserインスタンスを作成します。

CDK では複数スタックを扱えますが、本記事では AgentCoreBrowserStack のみをデプロイして Browser ID を取得します（より複雑な構成は Appendix を参照）。

AgentCoreBrowserStack（ブラウザ作成）

AgentCoreBrowserStackはAgentCore Browser を作成し、
ローカルのn8nで使うbrowserIdを取得できるようにしています。

// infrastructure/cdk/lib/agentcore-browser-stack.ts
export class AgentCoreBrowserStack extends cdk.Stack {
  public readonly browserId: string;

  constructor(scope: Construct, id: string, props: AgentCoreBrowserStackProps) {
    super(scope, id, props);

    ・・・・・

    const browserFunction = new lambda.Function(this, 'BrowserCustomResourceFunction', {
      runtime: lambda.Runtime.NODEJS_20_X,
      handler: 'index.handler',
      code: lambda.Code.fromAsset(path.join(__dirname, '../../lambda/browser-custom-resource/dist')),
      timeout: cdk.Duration.minutes(10),
      role: lambdaRole,
      logRetention: logs.RetentionDays.ONE_WEEK,
    });

    const resource = new cdk.CustomResource(this, 'AgentCoreBrowser', {
      serviceToken: browserFunction.functionArn,
      properties: {
        BrowserName: `n8n_browser_${props.environment}`,
        NetworkMode: 'PUBLIC',
        Description: `AgentCore Browser for n8n (${props.environment})`,
      },
    });

    this.browserId = resource.getAttString('BrowserId');
}
}

デプロイ手順（AgentCore Browserだけ）

# 1. 依存関係をインストール
cd /path/to/agent-core
npm install

# 2. カスタムノードをビルド
cd n8n-nodes
npm install && npm run build
cd ..

# 3. Lambda カスタムリソースをビルド
cd infrastructure/lambda/browser-custom-resource
npm install && npm run build
cd ../../cdk

# 4. CDK を初期化
export CDK_DEFAULT_ACCOUNT=<AWSアカウント>
export CDK_DEFAULT_REGION=us-west-2（今回使った）
npm install
npx cdk bootstrap

# 5. AgentCoreBrowserStack のみデプロイ
npx cdk deploy AgentCoreBrowserStack-prod -c environment=prod

デプロイ結果は↓みたいになりました。

Outputs:
AgentCoreBrowserStack-prod.BrowserId = n8n_browser_prod-xxxxx
AgentCoreBrowserStack-prod.BrowserArn = arn:aws:bedrock-agentcore:us-west-2:...

この BrowserId をこのあとn8nで設定します。

2. カスタムノードのビルド

n8n用のAgentCore Browserカスタムノードをビルドします。
カスタムノードの主要な実装は以下。

//AgentCoreBrowser.node.ts）
export class AgentCoreBrowser implements INodeType {
  description: INodeTypeDescription = {
    displayName: 'AgentCore Browser',
    name: 'agentCoreBrowser',
    group: ['transform'],
    version: 1,
    credentials: [
      {
        name: 'agentCoreAwsApi',
        required: true,
      },
    ],
    properties: [
      {
        displayName: 'Operation',
        name: 'operation',
        type: 'options',
        options: [
          {
            name: 'Execute Actions',
            value: 'executeActions',
            description: 'Execute predefined JSON actions',
          },
          {
            name: 'Execute Instruction',
            value: 'executeInstruction',
            description: 'Convert natural language to actions and execute',
          },
        ],
        default: 'executeActions',
      },
      ・・・・・・・・
    ],
  };

  async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
    ・・・・・
  }
}

executeではAWS認証情報取得後にAgentCoreクライアントを初期化してブラウザ接続し、
アクションを実行しています。
認証情報の定義は以下。

//AgentCoreAwsApi.credentials.ts
export class AgentCoreAwsApi implements ICredentialType {
  name = 'agentCoreAwsApi';
  displayName = 'AgentCore AWS API';
  properties: INodeProperties[] = [
    {
      displayName: 'AWS Access Key ID',
      name: 'accessKeyId',
      type: 'string',
      required: true,
    },
    ・・・・・・・・・・
    {
      displayName: 'Browser Identifier',
      name: 'browserIdentifier',
      type: 'string',
      required: true,
      description: 'AgentCore Browser identifier',
    },
  ];
}

n8n-nodesディレクトリでnpm run buildでビルド。

% cd n8n-nodes
% npm install && npm run build

ビルド成功後、dist/に実行コードが生成されます。

3. Dockerイメージのビルド

n8nとカスタムノードを含むDockerイメージをビルドします。
内容はリポジトリのinfrastructure/n8n-docker-custom/Dockerfile参照。

docker buildでイメージをビルドします。

% docker build \
  -f infrastructure/n8n-docker-custom/Dockerfile \
  -t n8n-agentcore-local \
  .

4. n8nコンテナの起動

ビルドしたイメージでn8nコンテナを起動しましょう。

docker run -d \
  --name n8n-local \
  -p 127.0.0.1:5678:5678 \
  -v ~/.aws:/home/node/.aws:ro \
  -e AWS_REGION=us-west-2 \
  -e AWS_PROFILE=default \
  -e BROWSER_IDENTIFIER=n8n_browser_prod-xxxxx \
  -e N8N_HOST=0.0.0.0 \
  -e N8N_PORT=5678 \
  -e N8N_PROTOCOL=http \
  -e N8N_SECURE_COOKIE=false \
  -e NODE_ENV=development \
  n8n-agentcore-local

BROWSER_IDENTIFIERにさきほどのBrowser IDを指定します。
あとはAWS_REGION、AWS_PROFILEそれぞれ自身の使いたいものを使用。

n8nにログインしてワークフロー登録

起動後、ブラウザで http://localhost:5678 にアクセスし、
n8nのセットアップ画面が表示されればOKです。

n8n-2.png

アカウント登録後にn8nにログインすると以下のような画面が表示されます。

n8n-3.png

次に、AgentCore Browserノードを使用するために
AWS認証情報をn8nに登録します。

左サイドバーの「+」から 「Credentials」をクリックして
検索ボックスで 「AgentCore」と入力すると
「AgentCore AWS API」がでてくるので、それを指定します。

AWS Access Key ID、AWS Secret Access Key、
Region、Browser Identifierをそれぞれ入力して保存します。

次に動作確認用の簡単なワークフローを作成します。
画面右上の「Create Workflow」をクリックしてワークフロー作成画面を開きます。
そこで「+」ボタンをクリックして検索ボックスに「AgentCore」と入力すると
AgentCore Browserノードがでてきます。

n8n-4.png

AgentCore Browserノードを選択して
以下のパラメータを設定しましょう。

n8n-5.png

Credential: AWS AgentCore Browser（作成したCredential）

Operation: Execute Actions

Target URL: https://example.com

Actions (JSON):
[
  {
    "type": "goto",
    "url": "https://example.com"
  },
  {
    "type": "getText",
    "selector": "h1"
  },
  {
    "type": "screenshot",
    "fullPage": true
  }
]

設定できたらワークフローを実行してみます。
Execute Stepボタンをおせばそのまま動かせます。
処理が成功すると、結果が表示され、スクリーンショットを確認することができます。

Other future

対応アクション

AgentCore Browserノードは SecurityValidator のスキーマに合わせて以下のアクションを実装しています。

1. Navigate (goto)

指定したURLへ遷移します。

{
  "type": "goto",
  "url": "https://example.com"
}

2. Fill (fill)

フォーム要素に値を入力します。

{
  "type": "fill",
  "selector": "input[name='email']",
  "value": "user@example.com"
}

3. Click (click)

指定したセレクタの要素をクリックします。

{
  "type": "click",
  "selector": "button.submit"
}

4. Wait For Selector (waitForSelector)

特定要素が出現するまで待機します。

{
  "type": "waitForSelector",
  "selector": "#result",
  "timeout": 5000
}

5. Wait For Navigation (waitForNavigation)

ページ遷移完了まで待機します。

{
  "type": "waitForNavigation",
  "waitUntil": "networkidle"
}

6. Get Text (getText)

要素のテキストを取得し、結果に格納します。

{
  "type": "getText",
  "selector": "h1",
  "key": "pageTitle"
}

7. Get Attribute (getAttribute)

任意属性の値を取得します。

{
  "type": "getAttribute",
  "selector": "img.logo",
  "attribute": "src",
  "key": "logoSrc"
}

8. Screenshot (screenshot)

スクリーンショットを撮影します。

{
  "type": "screenshot",
  "fullPage": true
}

これらを組み合わせればログインの自動化やレポート用キャプチャ取得といった処理を安全に構築できます。

自然言語

また、Execute Instruction を使用すると、自然言語でブラウザ操作を指示できます。
（Claude Haikuを使用してアクションに変換する）

Operation: Execute Instruction

Target URL: https://example.com

Instruction:
Navigate to the website and take a screenshot of the homepage.
Then click on the "About" link and capture the page title.

これで基本的なブラウザ自動操作をAgentCoreでさせるn8nノードができました。
このノードとデフォルトで用意してあるGoogle Driveノードを組み合わせて
AgentCore Browserで取得したスクリーンショットをGoogle Driveにアップロード、
みたいなワークフローもできます。

n8n-6.png

Cleanup

使い終わったらクリーンアップを忘れずに。

% docker stop n8n-local
% docker rm n8n-local
# イメージを削除
% docker rmi n8n-agentcore-local

AWSリソースも忘れずに。

% npx cdk destroy AgentCoreBrowserStack-prod -c environment=prod

aws cliで削除するなら以下。

# CloudFormation スタックを削除
% aws cloudformation delete-stack --stack-name AgentCoreBrowserStack-prod --region us-west-2
% aws cloudformation wait stack-delete-complete --stack-name AgentCoreBrowserStack-prod --region us-west-2

# 追加で NetworkStack / N8nEcsStack を作成した場合は以下も削除
aws cloudformation delete-stack --stack-name NetworkStack-prod --region us-west-2
aws cloudformation wait stack-delete-complete --stack-name NetworkStack-prod --region us-west-2

DATA_BUCKET=<DataBucketName>
aws s3 rm s3://$DATA_BUCKET --recursive
aws s3 rb s3://$DATA_BUCKET
aws cloudformation delete-stack --stack-name N8nEcsStack-prod --region us-west-2
aws cloudformation wait stack-delete-complete --stack-name N8nEcsStack-prod --region us-west-2

Summary

本記事では、Amazon Bedrock AgentCore Browserをn8nのカスタムノードとして作成し、
ローカル環境で動作確認する手順を解説しました。

  • AgentCore Browser は cdkで作成し、n8nはローカルで起動
  • Browser ID / Region は n8n の Credential で管理
  • フォーム入力などのブラウザ操作、スクショ撮影などをサポート

また、Bedrock(Claude Haiku)と連携して自然言語からブラウザアクションを生成して
動かすこともできます。
これをベースに機能を拡張させれば、もっとできることが広がりそうです。

Appendix: Remote n8n

今回はn8nをローカルで動かしましたが、n8nもAWSで動かしたい場合は、
以下のように追加でスタックをデプロイすればOK.

% npx cdk deploy NetworkStack-prod N8nEcsStack-prod -c environment=prod

※詳細はinfrastructure/cdk/lib/n8n-ecs-stack.ts を参照

References

この記事をシェアする

FacebookHatena blogX

関連記事

Amazon Bedrock AgentCore 정식으로 출시 되었습니다.
KeumSangwon
2025.11.05
[アップデート] Amazon Bedrock AgentCore Runtimeでzipファイルによるコードデプロイがサポートされました
神野 雄大
2025.11.05
クラスメソッド データアナリティクス通信(機械学習編) – 2025年11月号
nayu.t.s
2025.11.02
【CDK】Amazon Bedrock AgentCore L2 ConstructでStrands Agentsをデプロイしてみた
神野 雄大
2025.10.26