---
title: "Port.io を Claude / Claude Code on the web に接続してみた"
date: 2026-07-08
categories:
  - "Claude"
  - "Port.io"
url: "https://hidetaka.dev/ja/writing/dev-notes/connect-port-io-to-claude-and-claude-code-on-the-web"
---

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

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/b1f51fcc0a66ef844c9bb94c17c2d142-20260605094324.png)

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

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

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/6e7b500e43b61d60b49cf9631a00697d-20260605094341.png)

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

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/88ade51ebfdbcffd656e7394985df611-20260605094349.png)

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/f6a29ad31d17d9e998af85551f39cb00-20260605094406.png)

## サーバー 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 をコピーします。

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/52fba8c0ca22124fb20948def7b86860-20260605094416.png)

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

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/7734cb42883ae9e29711039aabc824e1-20260605094424.png)

## Port 側で OAuth 認証する

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

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

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/eed22768f19b0fc63ace357147c9d4a1-20260605094812.png)

![](https://wp-api.wp-kyoto.net/wp-content/uploads/2026/06/08efd4fc8758f429e7b239b5d7887afd-20260605125843.png)

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

Accept を押すと Claude のコネクタ画面に戻り、Port IO が「接続済み」になりました。コネクタ詳細を開くと「読み取り専用ツール 18 個」が並んでおり、それぞれに「承認が必要」というデフォルト設定がついています。`Describe User Details`、`Get Integration Event Logs`、`Get Integration Kinds with Examples`、`Get Integration Port App Config Schema`、`Get 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](https://docs.port.io/ai-interfaces/port-mcp-server/overview-and-installation/?region=us&mcp-setup=claude)