Skip to content

Port.io を Claude / Claude Code on the web に接続してみた

公開:

シェア

Port.io を Claude / Claude Code on the web に接続してみた
この記事の操作
Markdownで見る

Chrome(最新版)のBuilt-in AIが必要です。

Chrome(最新版)のBuilt-in AIが必要です。

Claude のコネクタディレクトリを眺めていると、いつのまにか Port IO が並んでいました。Port.io は普段から自分のリポジトリやサービスをエンティティとして登録しているので、これを Claude から直接触れるとなると話が変わってきます。Claude Code の MCP 設定をいじることなく、Claude 側のコネクタ機能だけで接続できるようなので試してみました。

Claude のコネクタディレクトリから Port IO を探す

まずは Claudeの「ディレクトリ」を開きます。「コネクタ」タブで「port」と検索すると、「Anthropic & パートナー」のセクションに Port IO のカードが表示されました。同じく Rapid7 Bulk Export も並んでいたので、このディレクトリは Anthropic と直接連携しているパートナーのコネクタが集まっている場所のようです。

Port IO のカードを開くと、提供されるツールが 12 個と表示されます。list_blueprintslist_entitieslist_scorecardslist_actionsrun_actionsearch_port_knowledge_sourcesload_skillupsert_blueprint など、Port.io の主要機能がそのままツールとして並んでいます。作成者は Port IO 自身です。あとは右上の「連携/連携させる」ボタンを押すだけのはずでした。

サーバー URL を Port のドキュメントから持ってくる

連携ボタンを押すと、インストールのダイアログが立ち上がります。1 つ目のステップが「Port IO からサーバー URL を取得」、2 つ目が「サーバー URL をここに貼り付けてください」となっていて、最初は URL が空欄です。ここで「port.io」リンクから公式ドキュメントへ飛び、自分の Port のリージョンに合わせた MCP サーバー URL を取得する仕組みです。

ドキュメントには EU と US のタブがあり、それぞれの URL が記載されています。US リージョンの場合は https://mcp.us.port.io/v1、EU リージョンの場合は https://mcp.port.io/v1 です。自分が US リージョンか EU リージョンかは、Port のアプリの URL に「US」が含まれているかどうかで判別できると書かれていました。今回は US リージョンのアカウントなので、US の URL をコピーします。

取得した URL をダイアログに貼り付けて「続ける」を押します。

Port 側で OAuth 認証する

続けるを押すと、Port 側の「Authorize App」画面が開きます。今ログインしている Port アカウントに対して、Claude が「Port Production US account」へのアクセスを要求している、という確認画面です。許可される範囲は Profile(プロフィールとメール)と Allow offline access の 2 つで、Accept を押すと認証が完了します。トークンを払い出してコピペするタイプではなく、ブラウザの OAuth セッションをそのまま使う方式です。

公式ドキュメントによると、この OAuth で確立したセッションは最大 30 日まで保持されます(15 日間アイドルだと切れます)。複数組織を切り替えて使う場合は、ブラウザで該当組織にログインした状態で認証フローを通す必要があり、認証後にブラウザのセッションを切り替えても、すでに接続済みの組織は変わりません。

接続後のツール一覧と Claude Code on the web からの呼び出し

Accept を押すと Claude のコネクタ画面に戻り、Port IO が「接続済み」になりました。コネクタ詳細を開くと「読み取り専用ツール 18 個」が並んでおり、それぞれに「承認が必要」というデフォルト設定がついています。Describe User DetailsGet Integration Event LogsGet Integration Kinds with ExamplesGet Integration Port App Config SchemaGet Integration Sync Metrics など、Port のソフトウェアカタログを読むためのツールがひととおり揃っています。コネクタの一覧には GitHub 連携や Google Drive、Linear と並んで Port IO が表示されています。

Claude のコネクタはそのまま Claude Code on the web からも使えます。試しに「自分の wordpress-skills リポジトリが Port に登録されているか調べて」と頼んだら、Port_IO: list entities ツールを使って githubRepository と service の 2 つの blueprint を並行確認してくれました。

接続できました。blueprints とリポジトリエンティティを並行確認します。

githubRepository ブループリントで wordpress-skills を検索します。
Port_IO: list entities を使用しました

登録されています。service エンティティとのリンクも確認します。
Port_IO: list entities を使用しました
blueprintIdentifier: service
include: ["$identifier","$title","github_repository"]
query: {"combinator":"or","rules":[
  {"operator":"contains","property":"$identifier","value":"wordpress"},
  {"operator":"contains","property":"$title","value":"wordpress"}
]}
{"entities":[],"hasMoreEntities":false}

Port.io 登録状況
登録済み: githubRepository エンティティとして存在

| 項目           | 値                                                |
|----------------|---------------------------------------------------|
| Identifier     | wordpress-skills                                  |
| URL            | https://github.com/hideokamoto/wordpress-skills   |
| Default Branch | main                                              |
| Language       | Astro                                             |
| Visibility     | public                                            |
| Last Push      | 2026-06-04T15:31:46Z                              |

githubRepository としては登録されているが、service エンティティにはまだリンクしていない、ということまで一発で分かりました。Port の UI を開いて blueprint 同士のリレーションを掘っていく作業を、自然言語で代行させられます。各ツール呼び出しは「承認が必要」設定のおかげで、実行前に何のツールをどんな引数で呼ぶのかを確認してから許可できます。

使ってみた所感

Cursor や VSCode で MCP 設定ファイルを書く方式と違い、URL を貼って OAuth を 1 回通すだけで Claude と Claude Code on the web の両方から Port を呼べるようになりました。MCP サーバーの設定を Claude Code のローカル設定に持たせるか、Claudeのコネクタ側に持たせるかで、複数デバイスでの体験が大きく変わってきそうです。

https://docs.port.io/ai-interfaces/port-mcp-server/overview-and-installation/?region=us&mcp-setup=claude

Hidetaka Okamoto profile photo

Hidetaka Okamoto

Developer Experience Engineer

Developer Experience Engineer。AWSやCloudflare上へのサーバーレスなアプリ開発を得意とする開発者。元Stripe Developer Advocate / AWS Samurai 2017など、サービスの使い方や活用Tipsを紹介するコンテンツ作成や登壇などを得意とする。

⭐ この記事への反応

はてなアカウントでスターを付けることができます

関連記事

empirical-prompt-tuningスキルはClaude Codeなしでも動いた

mizchiさん公開のempirical-prompt-tuningスキルを実際に試した記録。Claude Code向けに見えるが、Web版のSonnet 4.6でもスキルのレビューは機能する。skill-creatorと組み合わせ、Webアプリからスキル品質を上げる手順まで紹介。

Claude の Skill は、古い会話では動かないかもしれないらしい

Claude.ai でカスタム Skill を作成してアップロードしたものの、既存の会話で使おうとすると「Skill のファイルが見つかりません」というエラーが発生することがあります。 初めて作ったスキルが動かない Cl […]

Claude Projectの過去チャットが見つからない? 知っておくべき「検索の壁」と2つの対処法

Claudeでよくプロジェクト機能を使っています。プロジェクトの中にファイルとして計画や調査データを残したり、プロジェクトの中にあるメモリを利用したりして、コンテキストを限定させることがメインです。ただ、プロジェクトでセ […]

ClaudeとPort.ioを接続して、GitHubリポジトリの登録状況を確認してみた

Anthropicのコネクタディレクトリを眺めていたら、Port IOが追加されているのに気づきました。Port.ioはソフトウェアカタログやサービスの依存関係を管理するツールで、業務でも触れる機会があるので、さっそくC […]