ラベル Claude の投稿を表示しています。 すべての投稿を表示
ラベル Claude の投稿を表示しています。 すべての投稿を表示

2025年3月29日土曜日

Playwright MCPを使ってOracle APEXのアプリケーションを操作する

前回の記事「MicrosoftのPlaywrightを使ってAPEXアプリケーションのE2Eテストを行う」で作成したAPEXアプリケーションを、Microsoftから公開されているPlaywright MCPを使ってClaude Desktopアプリケーションより操作してみます。

Playwright MCPを組み込んだClaude Desktopに、以下のメッセージを送信しています。
  1. http://localhost:8181/ords/r/apexdev/demonstration-emp-dept/dashboardを開いて
  2. ユーザー名とパスワードは自分で入力します。
  3. サインインできました。
  4. Employeesの一覧を開いて
  5. SCOTTのSalaryを3000から4000に変更して
  6. いえ、これでいいです。ありがとう!

巷ですごいと噂になっていましたが、本当にすごい。

この作業を実施するにあたって行なったことは、Playwright MCPサーバーをClaude Desktopに組み込んだだけです。

Claude Desktopの設定から開発者タブを開き、設定の編集をクリックします。


claude_desktopo_config.jsonが参照されるのでエディタでそのファイルを開き、GitHubのPlaywright MCPのページに書いてある設定を追加します。



変更を保存し、Claude Desktopを再起動したらPlaywright MCPの組み込みは完了です。

特に何もせずAPEXアプリケーションのページの構造が理解できるのは、Oracle APEXがデフォルトでアクセシビリティを考慮したHTMLを生成しているからなのか、Claude 3.7 Sonnetがすごいのか、どちらかはわかりません。

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

2024年12月3日火曜日

Oracle Databaseに接続するMCPサーバーを作成しClaudeから問い合わせる

Oracle Databaseに接続するMCPサーバーを作ってみました。接続先はREST対応SQLを有効にした、Autonomous Databaseです。その他の環境でも、Oracle REST Data Servicesを構成することで、REST対応SQLを使用できるようになります。

REST対応SQLによるアクセスはHTTP/HTTPSなので、Oracle用のドライバおよびコード中ので接続の管理などは必要ありません。

MCPサーバーが接続するAutonomous Databaseの環境を準備する手順は記事「Oracle Autonomous DatabaseでREST対応SQLを基本認証で有効にする」にて紹介しています。

Claude Desktop appから、色々と問い合わせてみました。


言葉に出来ないくらいすごい。

Oracle Database向けのMCPサーバーは、Exampleとして提供されているPostgreSQLのコードを元に作成しています。


MCPサーバーの作成は、公式の以下の手順に沿って行います。作業はmacOSで行なっています。


Node.js 18以上をインストールしておきます。

Create a new projectの作業を行います。適当なディレクトリに移動し、以下のコマンドを実行します。作成するディレクトリの名前はoracle-serverとします。

npx @modelcontextprotocol/create-server oracle-server

What is the name of your MCP server? oracleと入力します。この名前でClaudeに参照先として指示を出すことができます。
What is the description of your server? にはMy first Oracle MCP Serverと入力しました。説明なので、自由に記述できます。
Would you like to install this server for Claude.app? と聞かれますが、Yesを入力するとclaude_desktop_config.jsonにエントリが追加されます。後でURL、ユーザー名、パスワードなどを追加する必要があるし、まだ出来ていないのにエントリが追加されても困るのでnを入力します。

以上でMCPサーバーの雛形が作成されます。

% npx @modelcontextprotocol/create-server oracle-server

(node:2763) ExperimentalWarning: CommonJS module /opt/homebrew/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /opt/homebrew/lib/node_modules/npm/node_modules/supports-color/index.js using require().

Support for loading ES Module in require() is an experimental feature and might change at any time

(Use `node --trace-warnings ...` to show where the warning was created)

? What is the name of your MCP server? oracle

? What is the description of your server? My first Oracle MCP Server

? Would you like to install this server for Claude.app? No

MCP server created successfully!


Next steps:

  cd oracle-server

  npm install

  npm run build  # or: npm run watch

  npm link       # optional, to make available globally


% 


cd oracle-serverを実行し、作成されたディレクトリに移動します。

cd oracle-server

このディレクトリのsrc以下に、index.tsを作成します。


MCPサーバーの本体であるindex.tsを作成したら、ビルドします。

npm install
npm run build
npm link

% npm install

(node:2127) ExperimentalWarning: CommonJS module /opt/homebrew/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /opt/homebrew/lib/node_modules/npm/node_modules/supports-color/index.js using require().

Support for loading ES Module in require() is an experimental feature and might change at any time

(Use `node --trace-warnings ...` to show where the warning was created)


> oracle-server@0.1.0 prepare

> npm run build



> oracle-server@0.1.0 build

> tsc && node -e "require('fs').chmodSync('build/index.js', '755')"



added 17 packages, and audited 18 packages in 1s


1 package is looking for funding

  run `npm fund` for details


found 0 vulnerabilities

% npm run build


> oracle-server@0.1.0 build

> tsc && node -e "require('fs').chmodSync('build/index.js', '755')"


npm link

(node:2373) ExperimentalWarning: CommonJS module /opt/homebrew/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /opt/homebrew/lib/node_modules/npm/node_modules/supports-color/index.js using require().

Support for loading ES Module in require() is an experimental feature and might change at any time

(Use `node --trace-warnings ...` to show where the warning was created)


added 1 package, and audited 3 packages in 673ms


found 0 vulnerabilities

% 


以上でOracle Databaseに接続するMCPサーバーは作成できました。

~Library/Application\ Support/Claudeに移動し、claude_desktop_config.jsにエントリを追加します。

第1引数は(index.tsからビルドされた)index.jsの位置を指定します。第2引数はREST対応SQLを呼び出すエンドポイントURL、第3引数は接続するスキーマ名、第4引数はスキーマのパスワードです。
{
  "mcpServers": {
    "oracle": {
      "command": "node",
      "args": [
        "/Users/username/Documents/oracle-server/build/index.js",
	"https://********-apexdev.adb.us-ashburn-1.oraclecloudapps.com/ords/mcp/_/sql",
	"スキーマ名",
	"パスワード"
      ]
    }
  }
}
以上の設定を行い、Claude Desktop appを起動します。

後は思いついたことをClaudeに聞きます。


OracleのMCPサーバーのログは~/Library/Logs/Claude以下にmcp-server-oracle.logとして出力されます。

今回の記事は以上です。

自分で書いたMCPサーバーのindex.tsのレビューをClaude 3.5 Sonnetにお願いしたら、丸ごと書き直されましたが、自分で書いたコードを掲載しています。

2024年11月30日土曜日

ClaudeのPostgreSQLのMCPサーバーを使ってローカルのAlloyDB Omniに問い合わせる

最近話題のClaudeのMCP(Model Context Protocol)ですが、MCPサーバーの実装サンプルにPostgreSQLがあったので動かしてみました。

このブログはOracle APEXに関する技術ブログですが、現時点ではOracle DatabaseのMCPサーバーは無く、また、MCPサーバーを組み込めるアプリもClaude Desktop appのみです。将来にOracle Databaseに接続するMCPサーバーや、MCPサーバーを組み込めるWebコンポーネントが作成されることで、Oracle APEXでも活用できるようになることを期待しています。

macOS上で行った作業を紹介します。

MCPサーバーを組み込むClaude Desktop appをインストールします。本作業ではmacOS版をインストールしましたが、Windows版もあるのでWindowsでも作業はできそうです。



PostgreSQLのサーバーですが、以前の記事でGoogle AlloyDB Omniを使ったときに簡単にインストールできたので、今回もAlloyDB Omniを使います。podmanを使用します。

後でWorldのサンプル・データベースをインストールするので、podmanのボリュームとしてpgSampleWorldを作成します。

podman volume create pgSampleWorld

% podman volume create pgSampleWorld

pgSampleWorld

% 


AlloyDB Omniのコンテナ・イメージをダウンロードします。

podman pull google/alloydbomni

% podman pull google/alloydbomni

Trying to pull docker.io/google/alloydbomni:latest...

Getting image source signatures

Copying blob sha256:9a05f2493d03e0bbb1066e3bb909096d9703c5418d053689f8f7ec5c1d7f2b60

Copying blob sha256:2fdd8bd0abec7d6bf9c9413fa4822358118e9e09fbd29407074e295e7480643f

Copying blob sha256:f5852518415488bf422f9b7f2b17ffd7d4d7185e7c8ab8bf2147deeba4634f9b

Copying blob sha256:0185c6859b00ddb146dc31ca9b6beaed53efb3407563057f05fb266b3f434287

Copying blob sha256:205213b8936196dbb62c16b3a96e0b7e220299b3a9ca113bccfd126dadb699e5

Copying blob sha256:c1e0ef7b956a07c7b090256aa16cbb0550a34d0625d1d23c5b1a76e92a58d01e

Copying blob sha256:f1c87667e7842cd5137ab5ab073fd291aab49798d524866faf5e29baf799b2ef

Copying blob sha256:f4e912a38a04c24a3b2c9357881eb1d2c4a79966b599994cf923a3b861deb717

Copying blob sha256:867c56a9d8dc8e0f8bf8540326bb5638c709e265ad3375249cc036c62b16338b

Copying blob sha256:149990bdbe96c90c9632f7494d32f308f2f410a17dc862496798163b371df491

Copying blob sha256:7b43d926df6c0192fef4a132f46301cb25c933a70475037b5817c9ee977cf7f9

Copying blob sha256:4f4fb700ef54461cfa02571ae0db9a0dc1e0cdb5577484a6d75e68dc38e8acc1

Copying blob sha256:5fe5be224054609d6669eb71c74f8414c654ed0495c9298a32aec1bd29ac4ef3

Copying blob sha256:b5897c548647a8d823411b5f365fccd16994b35efcd75164b5fc82d77c396ebe

Copying blob sha256:2cc17a1ffe78834f475a35e67e612c3af76ac44d459e0ab42339f0fb2347feb7

Copying blob sha256:8714a15a9f79d2f01947ddb11b2760a05d897325efc39ff988dc4e073cf7a93c

Copying blob sha256:94947c0ccc56de03ab622a35e70c99ab4636dae5dae427dfba5df79b2a84177f

Copying blob sha256:215fbeb3c59b120bf53d3081b76272a835b13ae7a77dd072d59e70cfcda3bb07

Copying blob sha256:5e6b93867b6c54a5b48c6497faf8bf50214ea208d0be670cea6db9d9f23482fd

Copying blob sha256:6bf938e955c48891853605a1636950a912b1c81b9749205ba17c26241e005702

Copying blob sha256:92a15b9c822ec96fc09ed2ceacfec6f0a20058f9dc2c601c490985ec306826f7

Copying blob sha256:a503bc9e96a17982d6a2ae33314b3127dc7bf9acb4db2ac1ebbb899b32147aeb

Copying blob sha256:4c80b84ecf5976c85858871790f90a50816f48ceefccab5c843d2c0bde955036

Copying blob sha256:e01e5606c56fe7fc61177d8118a6274a5fbb146c881f00de6a8bc4780412c6df

Copying blob sha256:09e9c6b61a697d1af8b69f1aa5f2d048adfbbfd705ca5752943cd49772d884e3

Copying blob sha256:0bf7b01fb1e47ec1361fadec05df0a950da5a4c46b49779eb34d0e091e165a5e

Copying blob sha256:d220fb7d6aeb40b0998b710f1a4b61c2ce10876ed6e8dd5c8cc0009b5eb07289

Copying blob sha256:5ed9845c51464bbab10c8deb0bd80b0bc484e2064fa4076176cb5a4421169557

Copying config sha256:fe0702e3d2389cf3cdf28f1f6c4342b3da53981820f5c9fba1249a7efc351eac

Writing manifest to image destination

fe0702e3d2389cf3cdf28f1f6c4342b3da53981820f5c9fba1249a7efc351eac

% 


AlloyDB Omniのコンテナを作成します。名前はmy-omniとしました。POSTGRES_PASSWORDに設定した値は、MCPサーバーの構成ファイルに書き込むので忘れないようにします。

podman run --name my-omni -e POSTGRES_PASSWORD=<パスワード> -v pgSampleWorld:/var/lib/postgresql/data -p 5432:5432 -d google/alloydbomni

% podman run --name my-omni -e POSTGRES_PASSWORD=********** -v pgSampleWorld:/var/lib/postgresql/data -p 5432:5432 -d google/alloydbomni

dc8cb2273f0d1e25de431f3f7960e301afcc17dea88940e56791e754852e3129

% 


コンテナmy-omniが実行されていることを確認します。

podman ps

% podman ps

CONTAINER ID  IMAGE                                COMMAND     CREATED        STATUS        PORTS                   NAMES

dc8cb2273f0d  docker.io/google/alloydbomni:latest  postgres    3 minutes ago  Up 3 minutes  0.0.0.0:5432->5432/tcp  my-omni

% 


PostgreSQLのworldのサンプル・データベースをダウンロードします。



ダウンロードしたworld-1.0.tar.gzを解凍します。

tar xzvf world-1.0.tar.gz

 % tar xzvf world-1.0.tar.gz 

x dbsamples-0.1/

x dbsamples-0.1/world/

x dbsamples-0.1/world/world.sql

x dbsamples-0.1/world/README

%       


展開したファイルに含まれているworld.sqlを実行します。

cd dbsamples-0.1/world
podman exec -i my-omni psql -U postgres < ./world.sql

% cd dbsamples-0.1/world 

world % podman exec -i my-omni psql -U postgres < ./world.sql

BEGIN

SET

CREATE TABLE

CREATE TABLE

CREATE TABLE

COPY 4079

COPY 239

COPY 984

ALTER TABLE

ALTER TABLE

ALTER TABLE

ALTER TABLE

ALTER TABLE

COMMIT

ANALYZE

ANALYZE

ANALYZE

 world % 


以上でPostgreSQLの準備はできました。

Claude Desktop appにPostgreSQLのMCPサーバーを組み込みます。以下を参照します。

https://github.com/modelcontextprotocol/servers/tree/main/src/postgres

~/Library/Application\ Support/Claude以下にclaude_desktop_config.jsonというファイルを作成し、以下を記述します。[パスワード]の部分はAlloyDB Omniのコンテナ作成時に与えたパスワードに置き換えます。

{
  "mcpServers": {
    "postgres": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-postgres",
        "postgresql://postgres:[パスワード]@localhost:5432/postgres"
      ]
    }
  }
}

% cd ~/Library/Application\ Support/Claude

Claude % cat claude_desktop_config.json 

{

  "mcpServers": {

    "postgres": {

      "command": "npx",

      "args": [

        "-y",

        "@modelcontextprotocol/server-postgres",

        "postgresql://postgres:*********@localhost:5432/postgres"

      ]

    }

  }

}

Claude % 


Claude Desktop Appを起動します。すでに起動している場合は再起動します。

チャットを入力する画面の右下にトンカチのアイコンが表示されます。postgresのMCPサーバーだけであれば、1になっているはずです。

ClaudeSettings...を開きます。


Developerを開き、MCPサーバーとしてpostgresが認識されていることを確認します。途中の作業を失念してしまいましたが、もし、Developerがないときは、メニューのどこかに(Help?)Enable Developer Modeというコマンドがあるはずなので、それを実行してDeveloper Modeに変更します。


Claudeに問い合わせを行います。

「私のpostgresから、どのような情報を問い合わせることができますか?」

MCPサーバーへの接続の承認が求められます。Allow for This Chatをクリックします。


Claudeがデータベースに問い合わせを発行して、回答してくれます。


「東京の人口を教えてください。」

MCPサーバーpostgresへ送信されたSELECT文とその結果も回答に含まれています。View Result from query from postgres(local)をクリックすると表示されます。


すごい。

MCPサーバーでは、TypeScriptとPython向けのSDKが提供されています。


Oracle Database向けのMCPサーバーがあれば、嬉しいのですが。

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