2025年4月1日火曜日

ChainlitのアプリケーションよりPlaywright MCPを呼び出してOracle APEXのアプリケーションを操作する

以前の記事で、Claude DesktopにPlaywright MCPを組み込んでOracle APEXのアプリケーションを操作してみました。MCPサーバーの組み込みがClaude Desktopに限定されている点で、自由度が今ひとつと思っていたところ、株式会社ヘッドウォータース様が公開している以下の記事を見つけました。

Azure OpenAIでMCPを使ったデモアプリを試す
https://zenn.dev/headwaters/articles/223f212b4c1cd6

Microsoftから公開されているAzure OpenAIのサンプルのひとつにMCPとのインテグレーションが含まれていて、それを動かしたことを記事にされています。

記事に含まれるスクリーンショットより、デモアプリケーションはChainlitで作成していることが分かります。ChainlitであればPythonが動けばどこでも実行できそうです。Azure OpenAI向けですが、少し修正してOpenAIで動作させました。

Azure OpenAI MCP Integration
https://github.com/monuminu/AOAI_Samples/tree/main/mcp_aoai

以前の記事と同じ操作を行なっています。サインイン後にダッシュボードのページに移動しなかったり、ユーザー名の入力がうまくできなかったりしましたが、概ねアプリケーションの操作はできています。


以下、作業の手順を紹介します。作業はmacOS 15.3.2で行なっています。

最初に作業ディレクトリを作成して、移動します。

mkdir mcp_aoai
cd mcp_aoai

% mkdir mcp_aoai

% cd mcp_aoai

mcp_aoai % 


必須の作業ではありませんが、仮想環境を作成します。このサンプル・アプリケーションのPrerequisitesは、Python 3.8以上になっています。

python3 -V
python3 -m venv mcp_aoai
source mcp_aoai/bin/activate

mcp_aoai % python3 -V            

Python 3.13.2

mcp_aoai % python3 -m venv mcp_aoai

mcp_aoai % source mcp_aoai/bin/activate

(mcp_aoai) mcp_aoai % 


必要なパッケージをインストールします。

pip install chainlit openai python-dotenv aiohttp

(mcp_aoai) mcp_aoai % pip install chainlit openai python-dotenv aiohttp


Collecting chainlit

  Using cached chainlit-2.4.400-py3-none-any.whl.metadata (6.3 kB)

Collecting openai

  Using cached openai-1.70.0-py3-none-any.whl.metadata (25 kB)

Collecting python-dotenv

  Using cached python_dotenv-1.1.0-py3-none-any.whl.metadata (24 kB)

Collecting aiohttp

  Using cached aiohttp-3.11.12-cp313-cp313-macosx_11_0_arm64.whl.metadata (7.7 kB)

Collecting aiofiles<25.0.0,>=23.1.0 (from chainlit)

  Using cached aiofiles-24.1.0-py3-none-any.whl.metadata (10 kB)

Collecting asyncer<0.0.8,>=0.0.7 (from chainlit)

  Using cached asyncer-0.0.7-py3-none-any.whl.metadata (6.6 kB)

Collecting click<9.0.0,>=8.1.3 (from chainlit)


[中略]


o-5.12.1 pyyaml-6.0.2 regex-2024.11.6 requests-2.32.3 simple-websocket-1.1.0 six-1.17.0 sniffio-1.3.1 sse-starlette-2.2.1 starlette-0.41.3 syncer-2.0.3 tenacity-8.5.0 tiktoken-0.9.0 tokenizers-0.21.1 tomli-2.2.1 tqdm-4.67.1 traceloop-sdk-0.39.0 typing-extensions-4.13.0 typing-inspect-0.9.0 typing-inspection-0.4.0 uptrace-1.31.0 urllib3-2.3.0 uvicorn-0.34.0 watchfiles-0.20.0 wrapt-1.17.2 wsproto-1.2.0 yarl-1.18.3 zipp-3.21.0


[notice] A new release of pip is available: 25.0 -> 25.0.1

[notice] To update, run: pip install --upgrade pip

(mcp_aoai) mcp_aoai % 


Azure OpenAI MCP Integrationのリポジトリに含まれるapp.pyをダウンロードします。


ダウンロードしたapp.pyに以下の変更を加えます。インポートするモジュールをAzureOpenAI、AsyncAzureOpenAIからOpenAI、AsyncOpenAIに変更し、モデルの指定を環境変数OIPENAI_MODEL、APIキーを環境変数OPENAI_API_KEYとして与えるようにします。
8c8
< from openai import AzureOpenAI, AsyncAzureOpenAI
---
> from openai import OpenAI, AsyncOpenAI
17,21c17,19
<         self.deployment_name = os.environ["AZURE_OPENAI_MODEL"]
<         self.client = AsyncAzureOpenAI(
<                 azure_endpoint=os.environ["AZURE_OPENAI_ENDPOINT"],
<                 api_key=os.environ["AZURE_OPENAI_API_KEY"],
<                 api_version=os.environ["OPENAI_API_VERSION"]
---
>         self.deployment_name = os.environ["OPENAI_MODEL"]
>         self.client = AsyncOpenAI(
>                 api_key=os.environ["OPENAI_API_KEY"]

環境変数OPENAI_MODELとOPENAI_API_KEYを設定します。あまりお金がかからないように、使用するモデルは廉価版のgpt-4o-miniを選択しています。

export OPENAI_MODEL=gpt-4o-mini-2024-07-18
export OPENAI_API_KEY=OpenAIのAPIキー

(mcp_aoai) mcp_aoai % export OPENAI_MODEL=gpt-4o-mini-2024-07-18

(mcp_aoai) mcp_aoai % export OPENAI_API_KEY=OpenAIのAPIキー

(mcp_aoai) mcp_aoai %                                             


以上で準備は完了です。

アプリケーションを実行します。

chainlit run app.py

(mcp_aoai) mcp_aoai % chainlit run app.py

2025-04-01 11:12:09 - Your app is available at http://localhost:8000

2025-04-01 11:12:10 - Translated markdown file for ja not found. Defaulting to chainlit.md.


ブラウザが開きます。コンセントのアイコンをクリックして、MCPサーバーの設定を開きます。


MCPサーバーとしてPlaywright MCPを追加します。

NameはPlaywright MCP、Typeはstdioを選択します。Commandに以下を記述します。

npx -y @playwright/mcp@latest

確認をクリックします。


My MCPsにPlaywright MCPが追加されます。緑のインジケータが点いて、14個のツールが登録されます。


コンセントのアイコンにMCPサーバーが１個登録されていることが、アクセントとして表示されます。


あとはChainlitのチャット・インターフェースを通して、Oracle APEXのアプリケーションを操作します。


今回の記事は以上になります。

完
投稿者 時刻:
ラベル: , , , ,