BrowserUseを実行するためのセットアップ方法

以下では、Gemini API (google-generativeai, langchain-google-genai) と browser-use を組み合わせて活用するための手順や実行方法をご紹介します。仮想環境の作成からサンプルコードの実行例までを網羅した内容になっていますので、ぜひ参考にしてください。

はじめに

今回の目的は、Google Generative AI (Gemini) と LangChain の連携に加えて、ブラウザ自動操作エージェントである browser_use を利用する方法を解説することです。
以下の内容は Python の仮想環境(venv もしくは virtualenv)を使用することを前提としています。仮想環境を使うことで、プロジェクトごとにパッケージ管理を分離でき、環境汚染を防ぐことができます。

my_project/
├── .env                   # APIキーなどの環境変数を設定
├── run_agent.py           # 実行コード (例のスクリプトを配置)
├── requirements.txt       # インストールが必要なライブラリ一覧(任意)
├── myenv/                 # venv または virtualenv で作成した仮想環境のディレクトリ
│   ├── bin/               # (macOS/Linux)実行ファイルが入る
│   ├── Scripts/           # (Windows)実行ファイルが入る
│   ├── include/           
│   ├── lib/
│   └── ...
└── ...

仮想環境の準備

venv の場合(Python 3.3以降)

Python が標準で備えている venv モジュールを使う手順です。

python3 -m venv myenv

コマンド実行後、フォルダ構成として myenv ディレクトリが作成されます。
myenv の部分は任意の名前に変更できます。

virtualenv の場合

あらかじめ virtualenv のインストールが必要です。

pip install virtualenv
virtualenv myenv

こちらも myenv は任意のディレクトリ名に置き換えて構いません。

仮想環境のアクティベート(有効化)

macOS / Linux の場合

source myenv/bin/activate

Windows の場合

myenv\Scripts\activate

アクティベートに成功すると、ターミナルやコマンドプロンプトの先頭に (myenv) のような表示が追加されます。

必要なライブラリのインストール

仮想環境が有効になっている状態で、以下のコマンドを実行します。

pip install -U google-generativeai langchain-google-genai browser-use python-dotenv
playwright install

各ライブラリの役割

  • google-generativeai: Google の Gemini API を利用するためのライブラリ。
  • langchain-google-genai: LangChain フレームワークから Gemini API を呼び出すための拡張ライブラリ。
  • browser-use: ブラウザ操作を自動化するエージェント機能を提供するライブラリ。
  • python-dotenv: .env ファイルから環境変数を読み込むために利用。

browser-use をインストールすると、依存しているライブラリ(aiohttp, beautifulsoup4, pyppeteer など)も自動的にインストールされます。また、langchain-google-genai には langchain が含まれるため、個別に langchain をインストールする必要はありません。

Python コード例

以下のサンプルコードは、引数で受け取ったタスクを Google Generative AI (Gemini) に投げかけ、結果を出力すると同時に、browser-use エージェントによるブラウザ操作が組み合わされたタスクを実行できます。

import argparse
import asyncio
from browser_use import Agent
from langchain_google_genai import ChatGoogleGenerativeAI
import os
from dotenv import load_dotenv  # .env ファイルを読み込むため

# .env ファイルを読み込む
load_dotenv()

# 環境変数 GOOGLE_API_KEY が設定されているか確認
if not os.environ.get("GOOGLE_API_KEY"):
    raise ValueError("環境変数 GOOGLE_API_KEY が設定されていません。")


def parse_args():
    parser = argparse.ArgumentParser(description="Run AI agent with a custom task.")
    parser.add_argument("--task", type=str, required=True, help="Task for the AI agent.")
    return parser.parse_args()


async def main():
    args = parse_args()

    agent = Agent(
        task=args.task,
        llm=ChatGoogleGenerativeAI(
            model="gemini-1.5-pro",
            convert_system_message_to_human=True,
            temperature=0,  # 出力多様性(創造性)の調整
        ),
    )
    result = await agent.run()
    print(result)


if __name__ == "__main__":
    asyncio.run(main())

.envファイルについて

上記のコードでは、.env ファイルに GOOGLE_API_KEY を設定し、python-dotenv を使って読み込む想定です。
.env ファイルはプロジェクト直下などに作成し、以下のように API キーを記述してください。

GOOGLE_API_KEY=YOUR_GOOGLE_API_KEY

YOUR_GOOGLE_API_KEY はご自身のキーに置き換えてください。

実行方法

仮想環境をアクティブにした状態で、上記コードを run_agent.py というファイル名で保存している場合、以下のように実行できます。

python run_agent.py --task "ChatGPTのモデルの情報を調べてください。"

実行例では、"ChatGPTのモデルの情報を調べてください。" というタスクを渡しています。
結果として、バックエンドでは Gemini API を用いた応答が実行され、ターミナル上に結果が表示されます。

仮想環境から抜ける方法

作業が終了したら、次のコマンドで仮想環境から抜けられます。

deactivate

まとめ

これで、Gemini API と browser_use の環境構築から実行までが完了します。LangChain をはじめとした関連ライブラリは自動的にインストールされるため、追加のインストールは不要です。ぜひこれをベースにさまざまなタスクを自動化・エージェント化してみてください。

OpenAIのAPIを使ったシンプルな実装方法はこちらのサイトを確認してください。

GitHubで詳細を確認することも可能です。

APIウェブアプリケーションの作り方


概要

今回、ウェブアプリケーションを作成する上で使用するAPIはGoogleが提供するGemini 1.5 Proです。


Gemini 1.5 Pro は次世代の大規模言語モデル(LLM)で、優れた自然言語生成能力を持っています。この記事では、Gemini 1.5 Pro APIを利用したシンプルなウェブアプリケーションを構築する手順を解説します。

この記事で学べること
  • Gemini 1.5 Pro API を使うための設定方法
  • 簡単なバックエンド(Node.js + Express)とフロントエンドの実装
  • APIリクエスト・レスポンスを通じてAIとやり取りする仕組みの構築

Gemini 1.5 Pro API の準備

Gemini API のアクセスを取得

  1. Gemini 1.5 Pro を提供する公式プラットフォーム(例: Google Cloud Platform や独自のAPIポータル)にサインアップします。
  2. アクセス権を取得し、APIキーまたは認証情報(JSON形式のサービスアカウントなど)を発行します。
  3. 管理画面で使用制限やレートリミットを確認しておきます。

OPEN AIやDeep Seekなど、他社のAPIでもほとんど同じようにアプリケーションを実装できます。

API ドキュメントの確認

Gemini 1.5 Pro API のエンドポイントや利用方法を確認します。

たとえば、以下のようなエンドポイントがあるかもしれません:

• POST /v1/models/gemini-1.5-pro/completions (テキスト生成用)

• POST /v1/models/gemini-1.5-pro/chat (チャット用)

開発環境の準備

STEP
プロジェクトディレクトリの作成
mkdir my-gemini-app
cd my-gemini-app
STEP
Node.jsプロジェクトの初期化
npm init -y
STEP
必要なパッケージのインストール
npm install express axios dotenv
  • express: シンプルなWebサーバーフレームワーク
  • axios: HTTPリクエストを送るためのライブラリ
  • dotenv: .env ファイルに環境変数を管理するためのライブラリ

サーバーサイドの実装


index.js ファイルを作成し、以下のコードを記述します。

require('dotenv').config(); // .env ファイルから環境変数を読み込む
const express = require('express');
const axios = require('axios');

const app = express();
const port = 3000;

// 環境変数から API キーを取得
const GEMINI_API_KEY = process.env.GEMINI_API_KEY;
const GEMINI_API_URL = 'https://api.gemini-platform.com/v1/models/gemini-1.5-pro/completions'; // 仮のURL

// JSON リクエストボディのパース
app.use(express.json());

// フロントエンド用の静的ファイルを配信
app.use(express.static('public'));

// 動作確認用エンドポイント
app.get('/', (req, res) => {
  res.send('Hello from Gemini 1.5 Pro app!');
});

// 質問を受け付けて Gemini API に送信するエンドポイント
app.post('/ask', async (req, res) => {
  try {
    const userQuestion = req.body.question;

    if (!userQuestion) {
      return res.status(400).json({ error: 'No question provided' });
    }

    // Gemini 1.5 Pro API 呼び出し
    const response = await axios.post(
      GEMINI_API_URL,
      {
        prompt: userQuestion,
        max_tokens: 100,
        temperature: 0.7,
      },
      {
        headers: {
          'Authorization': `Bearer ${GEMINI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );

    const answer = response.data.choices[0].text.trim();
    res.json({ answer });
  } catch (error) {
    console.error('--- Gemini API Error ---');
    if (error.response) {
      console.error('Status:', error.response.status);
      console.error('Data:', error.response.data);
    } else {
      console.error('Message:', error.message);
    }
    res.status(500).json({ error: 'エラーが発生しました' });
  }
});

// サーバー起動
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

フロントエンドの実装

public/index.html の作成

フロントエンドでGemini 1.5 Proに質問を送信する簡単なフォームを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Gemini 1.5 Pro Chat App</title>
</head>
<body>
  <h1>Gemini 1.5 Pro Chat App</h1>
  <form id="questionForm">
    <input type="text" id="questionInput" placeholder="質問を入力してください">
    <button type="submit">送信</button>
  </form>
  <div id="answer"></div>

  <script>
    document.getElementById('questionForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const question = document.getElementById('questionInput').value;

      const response = await fetch('/ask', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ question }),
      });

      const data = await response.json();
      document.getElementById('answer').innerText = data.answer || data.error;
    });
  </script>
</body>
</html>

必要な環境変数の設定


.env ファイルを作成し、以下のように記述します。

GEMINI_API_KEY=your-gemini-api-key


取得した Gemini APIキー をここに記載します。

サーバーの起動と動作確認

STEP
サーバーの起動
node index.js
STEP

ブラウザで http://localhost:3000 にアクセス。

STEP
フォームに質問を入力して送信ボタンを押す

Gemini 1.5からAPI経由で回答が表示されます。

まとめ

node.jsとExpressを使い、APIを使用したシンプルなアプリケーションを作成できました。

私はChatGPTやGeminiに質問しながら作成したので、かなり短時間で学習できました。

この機能をベースにしてさらに機能を追加することもできるので、ぜひチャレンジしてみてください。

AIツールを活用して簡単にウェブサイトを構築する方法

近年加速するAIツール


AI技術は近年、驚くべきスピードで進化しています。特にOpenAIがGPT-4をリリースした2023年以降、多くのAIツールが登場し、さまざまな分野で活用されるようになりました。その中でも、Webサイトの構築に特化したAIツールは大きな注目を集めています。2025年現在、AIを活用したWebサイト構築は、技術に詳しくない人でも簡単に実現できるまでに進化しています。

使用したツール


今回のWebサイト構築では、以下の2つのAIツールを使用しました。


Image FXでは、サイトデザインのイメージ画像を生成しました。このツールでは、プロンプト(指示文)を入力するだけで、直感的で高品質なデザイン案を生成してくれます。私は最初、プロンプトを「Startup Company Website」と設定しましたが、希望通りの画像を得るために合計4回修正を行いました。最終的には、モダンで洗練された企業向けのウェブサイトデザインが完成しました。

次に、V0を使用して、Image FXで作成した画像を基にWebサイトのソースコードを生成しました。このツールの強みは、生成したデザインをそのまま忠実にHTMLやCSSコードへ変換できる点です。以下のプロンプトを使用しました:

「添付画像を忠実に再現したWEBサイトを作成してください。」

V0にはプレビュー機能が搭載されているため、生成されたコードを即座に実行して確認できます。デザインが想定通りに反映されているか、細部まで確認することができました。

作成した簡易的なサイト

画像デザインとは少し異なる部分もありますが、AIツールを使用したことで、わずか10分程度で簡単なWebサイトを構築することができました。ヘッダー、ロゴ、背景画像などの要素を追加することで、さらに完成度を高めることが可能です。

実際、これほど短時間でWebサイトを形にできるのはAIツールならではの魅力です。従来の手作業でのコーディングやデザイン作業と比較して、驚異的な効率性を実感しました。

【SWELL】GlassmorphismデザインのCSSカスタマイズ

Glassmorphism

ここ数年で流行りつつあるデザインに、「Glassmorphism」というものがあります。

このデザインは、リッチなウェブサイトやアプリの表現として使われていることが多いようです。

AppleのVision Pro のアプリはこのGlassmorphismのデザインが至る所で使用されており、独特の美しさを醸し出しています。

当サイトでもこの美しいデザインを取り入れたいと考えており、Wordpressのテーマ「SWELL」をカスタマイズして実装していきます。

ヘッダーカスタマイズの実装方法を解説

早速ですが、SWELLのヘッダーのカスタマイズ方法を解説していきます。

(既に実装済みなので、手順のみ紹介していきます。)

STEP
カスタマイズを選択
STEP
追加CSSをクリック
STEP
CSSを追加

テーマのカスタマイズですが、意外と簡単に実装することができます。

追加したCSSはこちらのサイトを参考にして、CSSのクラス名をSWELLで実装できるように変更しています。

ヘッダー以外のデザインも行いたい場合は以下のCSSのクラス名を変更して使用すると実装可能です!

/* Glassmorphism */
/* 背景 */
.bg {
  width: 100%;
  padding: 60px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ガラス本体 */
.glass {
	margin-top: 15px;
  width: 100%;
  max-width: 600px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.04); /* 背景色 */
  border: 1px solid rgba(255, 255, 255, 0.35); /* ボーダー */
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  -webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */
  backdrop-filter: blur(15px);
}
/* ガラス内の要素 */
.glass {
  text-align: center;
  color: #fff;
  font-family: "Heebo", sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.06em;
}
.glass p {
  margin-top: 20px;
  color: #fff;
  font-size: 14px;
	font-weight:Normal;
}

Glassmorphismの実装箇所

Glassmorphismのデザインをサイトに取り入れる際、難しいと思った点が2つあります。

  1. ガラスデザインの取り入れすぎはNG
  2. 透明度の調整

1.ガラスデザイン取り入れすぎはNG

このガラスデザインは密集した場所に複数設置してしまうと、やや鬱陶しいと感じてしまいます。

CSSで「border」の値を調整して、やや存在感を薄くすると問題が解決されるかもしれません。

2.透明度の調整

ガラスデザイン特有の悩みですが、透明度を調整する際に薄くしすぎてしまうと自分がサイト内で際立たせたいものの存在感が無くなってしまいます。

これには十分注意して下さい。

高度なカスタマイズ

詳細は省略しますが、当サイトのSELLlテーマをさらにカスタマイズしたのでカスタムCSSコードを貼っておきます。

<div class="bg">        <div class="glass">              <h1>IT LIFE</h1>              <p>Let's start learning to code</p>        </div>  </div>
#post_slider .p-postList__item{
	transform: perspective(0);
  backface-visibility: hidden;
}

/*メインビジュアル下の空白削除 */
.top #content {
  padding-top: 0 !important;
  margin-bottom: 0;
}

#header {
	margin: 0 auto;
}


.p-breadcrumb.-bg-on {
    background-color: black;
}


/*ヘッダーフォント*/
.ttl {
	font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
}
.ttl:hover {
	color: #147CE5;
}
.c-gnav>.menu-item>a .ttl {
	font-size: 13px;
}


/* Glassmorphism */
/* 背景 */
.bg {
  width: 100%;
  padding: 60px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
	position: relative;
}
/* ガラス本体 */
.glass {
	margin-top: 15px;
  width: 100%;
  max-width: 600px;
  padding: 30px;
  background-color: rgba(255, 255, 255, ); /* 背景色 */

  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  -webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */
  backdrop-filter: blur(99px);
}
/* ガラス内の要素 */
.glass {
  text-align: center;
  color: #fff;
  font-family: "Heebo", sans-serif;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.06em;
}
.glass p {
  margin-top: 20px;
  color: #fff;
  font-size: 14px;
	font-weight:Normal;
}

/*.glass :: before {
	 content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	filter: blur(3px);
	Z-index: -1;
}*/


.bg {
	content: ""; /* 必須 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.5rem;
background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);

}

/*スマホサイズ メイン */
@media screen and (max-width:600px) {
	.bg {
		padding: 30px 30px;
		border-radius: 2.0rem;
	}
	.glass {
		margin-top: 0px;
	}
	
}



/* ヘッダー */
.-txt .c-headLogo__link{
			font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.l-header__inner{
		background-color: rgba(50, 50, 50, 0.70); /* 背景色 */
	  border: 1.5px solid rgba(255, 255, 255, 0.08); /* ボーダー */
  border-right-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.2);
	border-radius: 30px; 
	color: black;   
	-webkit-backdrop-filter: blur(20px); /* ぼかしエフェクト */
  backdrop-filter: blur(5px);
	position: fixed;/*fixedで固定*/
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* ヘッダーホバーアニメーション */
.l-header__inner:hover {
	/*background-color: rgba(255, 255, 255, 0.23);*/
	transition: background-color 0.8s
}

/* ヘッダー追従 */
.l-header__inner {
	width:100%;
	color:white;
	margin: 0 auto;
}


/*メニューカスタマイズ*/
.c-gnav .sub-menu {
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.65); /* 背景色 */
		  border: 1px solid rgba(255, 255, 255, 0.35); /* ボーダー */
	border-radius: 8px; 
}


/*ヘッダー幅*/
@media screen and (min-width:960px) {
    /* ヘッダーメイン*/

	.-txt .c-headLogo__link{
			font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-style: normal;
	}
	.-series .l-header__logo  {
    padding: 0;
	}
	.l-header__inner {
		margin: 9px;
	}
	
	.l-header__inner.l-container {
	max-width: 900px;
	margin-left: calc((100% - 900px) /2);
	margin-right: calc((100% - 900px) /2);
	height: 65px;
 }
	
	
	.c-gnav .sub-menu:before {
		border-radius: 8px
	}
}

@media screen and (max-width:720px) {
	.l-header__inner.l-container {
		max-width: 100%;
		
	}
}

@media screen and (min-width:600px) {
		.-txt .c-headLogo__link{
			font-family: "SF Pro JP", "SF Pro Text", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 20px;
		font-style: normal;
	}
}



/*moreボタン*/
a.btn_text:hover{
	background-color: rgba(255, 255, 255, 0.20);
	border: 0.25px solid rgba(255, 255, 255, 0.35);
}

button.c-fixBtn.c-plainBtn.hov-bg-main:{
	background-color: rgba(255, 255, 255, 0.30);
	border: 0.25px solid rgba(255, 255, 255, 0.35);
}

.c-fixBtn:hover {
	background-color: rgba(255, 255, 255, 0.30);
	
}


button.c-tabList__button:hover{
	background-color: rgba(255, 255, 255, 0.30);
	border: 0.25px solid rgba(255, 255, 255, 0.35);
	border-radius: top 8px;
}

.is-style-default>.c-tabList .c-tabList__button:hover, .is-style-default>.c-tabList .c-tabList__button[aria-selected=true] {
	background-color: white;
	border: 0.25px solid rgba(255, 255, 255, 0.35);
	color: black;
	border-radius: 8px;
}

.is-style-default>.c-tabList .c-tabList__button:hover, .is-style-default>.c-tabList .c-tabList__button:hover {
	background-color: rgba(255, 255, 255, 0.30);
	border: 0.25px solid rgba(255, 255, 255, 0.35);
	color:white;
	border-radius: top 8px;
}





カスタマイズの参考にしたサイト

https://web-dev.tech

https://sgs-prog.com

https://motoki-design.co.jp/wordpress