Claude Codeの新機能「Artifacts with Live Data」を試してみた——MCPコネクタで動くダッシュボードは、クライアント向け簡易ツールとして実務で使えるか
Claude Code v2.1.209で追加されたArtifactsのMCPコネクタ対応を実際に試した。GitHub連携ダッシュボードを1プロンプトで作り、公式ドキュメント通りの手順で検証した結果、フリーランスのクライアントワークで使える場面と、構造的に無理な場面が見えてきた。
エンジニアのゆとです。
7月13〜17日のClaude Codeアップデート（v2.1.207〜v2.1.212）で、Artifactsに地味だけど大きい機能が乗った。公開したArtifactが、見る人ごとにMCPコネクタを呼び出せるようになった。
これまでのArtifactsは「セッション終了時点のスナップショット」だった。作った瞬間のデータが焼き付いたページで、翌日見ても数字は変わらない。それが今回のアップデートで、ページを開くたびに最新データを取りに行く「生きたダッシュボード」になった。
これを見て真っ先に思ったのが、クライアントワークでの使い道だ。フリーランスエンジニアがクライアントに「進捗が見えるツール」を渡すとなると、これまではNext.jsなりで1から書いてどこかにデプロイする必要があった。この新機能を使えば、その工数がどこまで削れるのか。実際に手を動かして試した。
何が変わったのか：Week 29アップデートの中身
まず前提として、Artifacts自体は6月中旬（Week 25、v2.1.178〜v2.1.183）に追加された機能だ。Claude Codeのセッション出力をclaude.ai上の1枚のライブページとして公開できる。PRのレビュー資料を作ったり、調査の進捗を可視化したり、という用途で使われてきた。
今回のWeek 29アップデートで追加されたのは、その公開ページがMCPコネクタを呼び出せるようになったという一点だ。公式の言葉をそのまま引くと、こうなっている。
A published artifact can now call MCP connectors each time someone views it, so a dashboard shows live data and can take actions on demand rather than a snapshot from the session that built it.
ポイントを整理するとこうなる。
| 項目 | 内容 |
|---|---|
| 対象バージョン | Claude Code v2.1.209以降（それより前は従来通りスナップショットのみ） |
| 対象プラン | Pro / Max / Team / Enterprise |
| 呼び出せる接続先 | claude.aiアカウントに接続済みのコネクタのみ（GitHub、Slackなど） |
| 呼び出せないもの | .mcp.jsonなどローカルに設定したMCPサーバー（ページ構築時のデータ取得には使えるが、公開後のページからは呼べない） |
| 呼び出し主体 | ページを開いた閲覧者本人のアカウント（作成者のアカウントではない） |
| 更新タイミング | ページを開いたとき／一定間隔／ページ上のリフレッシュ操作。レスポンスはブラウザにキャッシュされ、再読込時はまずキャッシュを表示してから最新化する |
ここで一番効いてくるのが「呼び出し主体は閲覧者本人」という設計だ。自分が作ったGitHub連携ダッシュボードを同僚に共有すると、同僚は同僚自身のGitHub接続を使ってデータを取りに行く。同じページを見ても、閲覧者ごとに見える中身が変わりうる。ページ自体は誰の認証情報も持たない。
Artifactsの基本的な公開・共有の仕組みについては、既存の
でMCP自体のセットアップを解説しているので、まだMCPサーバーを繋いだことがない人はこちらを先に読んでおくといい。
実際に作ってみた：GitHub PRダッシュボードを1プロンプトで
言葉で説明されてもピンとこないので、公式ドキュメントの手順通りに実際に試した。使ったのはv2.1.212、GitHubコネクタは前からclaude.aiのSettings > Connectorsで繋いである状態。
打ったプロンプトはドキュメントの例文をほぼそのまま使った。
Build a dashboard artifact of open pull requests that pulls the live list
through my GitHub connector when the page loads.これだけで、Claude Codeが単一HTMLファイルを書いて公開の許可を求めてくる。「Claude wants to publish “Open pull requests” (open-prs.html) to a private page on claude.ai」という確認が来て、Yesを押すとURLが発行され、ブラウザが自動で開く（CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0にしていなければ）。
開いた直後のページは、GitHub連携の許可を求める表示が出てからPR一覧が表示される流れになっていた。ページを開くたびに毎回この許可確認が出るわけではなく、そのページで一度承認すればその読み込み中は使える、という挙動。自分の個人リポジトリで試したのでPR数自体は数件だったけど、オープンなものだけがちゃんと絞り込まれて出てきたし、ブラウザをリロードすると一瞬キャッシュの内容が出てから数秒で最新の一覧に切り替わった。ドキュメントに書いてある「キャッシュ表示→最新化」の挙動がそのまま体感できた。
見た目も悪くない。Claude Codeはv2.1.182以降、Artifact生成時に組み込みのデザインスキルを自動適用する仕様になっていて、指定しなくてもそれなりに整ったレイアウトとタイポグラフィで出てくる。プロジェクトのCLAUDE.mdにブランドカラーなどのデザイントークンを書いておけば、そちらを優先して反映してくれる。
GitHub以外のコネクタでも同じ要領で作れる。手元で持っているMCPサーバーの選定に迷っている場合は
も参考になるはずだ。ただし繰り返しになるが、公開後のページが呼べるのはclaude.ai側に登録済みのコネクタだけで、ローカルの.mcp.jsonで追加しただけのサーバーはページ構築時の下ごしらえにしか使えない。
壁にぶつかった：クライアントに見せようとしたら共有できなかった
ここからが本題だった。「クライアントに進捗ダッシュボードとして渡せるか」を確認するために、公開したPRダッシュボードをShareボタンから外部共有しようとした。
結果、公開リンクの発行ができなかった。公式ドキュメントにも明記されている制約で、コネクタを呼び出すArtifactは、どのプランでも公開リンクでの共有が一切できない。
An artifact that calls connectors can’t be shared to a public link on any plan.
Team・Enterprise契約なら組織内メンバーへの共有はできる。でもPro・Maxプラン（フリーランスの大半はここ）は、そもそも公開リンクが唯一の共有手段なので、コネクタ付きArtifactは「作った本人しか見られない」ページのまま止まる。
実際にShareボタンを押すと、通常のArtifactでは出てくる「リンクをコピー」の導線が、コネクタ付きのこのページでは出てこなかった。ドキュメントの記述通りの挙動を自分の手元でも確認できた形になる。
つまり、最初に期待していた「クライアントに渡せる生きたダッシュボード」というシナリオは、フリーランスの標準的な契約形態（自分はPro、クライアントは当然claude.aiアカウントなど持っていない）では成立しない。クライアントを自分のTeam組織に招待するという回避策は理論上あるが、それはそれで契約や請求の面倒が増えるし、クライアント側に「Anthropicのアカウントを作ってもらう」という参入障壁が生まれる。通常のクライアントワークの導線としては現実的ではない。
じゃあ実務でどこまで使えるか
「クライアントへの納品物」としては壁にぶつかったが、それで無価値というわけではない。使いどころを切り分けるとこうなる。
| 使える場面 | まだ厳しい場面 |
|---|---|
| 自分専用の状況把握ダッシュボード（担当リポジトリのPR一覧、進行中タスクの一覧） | クライアントへの公開共有（構造的に不可、Pro/Maxでは特に） |
| Team契約内での同僚向け共有（同じ組織のメンバーが見る前提） | フォームからのデータ書き込み・永続化（Artifactにバックエンドはない） |
| 打ち合わせで「今この瞬間のデータ」を見せながら話す一時的な資料 | 複数ページにまたがる本格的な社内ツール（1ファイル完結の制約） |
| 長時間タスクの進行状況を自分やチームで随時確認する用途 | 閲覧者側がコネクタを持っていない場合のフォールバック運用（見せる相手が同じ接続先を持っている前提が必要） |
一番現実的なのは「自分用の一時ダッシュボード」だ。担当プロジェクトのPR状況やIssueの進み具合を、毎回GitHubを開かずに1枚のページで確認する。これは普通に便利だし、セットアップの手間がプロンプト1行というのは強い。
フリーランスの日常的なClaude Code活用については
で全体像を整理しているので、Artifactsだけでなく他の機能との組み合わせも含めて見たい人はそちらを参照してほしい。
Retool・Streamlitとの住み分け
「じゃあRetoolやStreamlitはもう要らないのか」という話も気になったので整理しておく。
| Artifacts（MCPコネクタ付き） | Retool / Streamlit | |
|---|---|---|
| セットアップ | プロンプト1行、数十秒 | 環境構築・デプロイが必要（数時間〜） |
| バックエンド | なし（静的1ページ、フォーム保存不可） | あり（DB接続・書き込み・認証が可能） |
| 外部共有 | コネクタ利用時は不可（claude.aiアカウント必須の範囲でのみ） | 任意のドメインで公開・独自認証で誰にでも渡せる |
| ページ構成 | 単一ページのみ | マルチページ・ルーティング対応 |
| 運用コスト | Claude Codeの契約に含まれる（追加インフラ不要） | ホスティング費用・保守が発生 |
| 向いている用途 | 一時的な可視化、意思決定支援、自分やチーム内の状況確認 | 継続運用する納品物、外部顧客向けの本番ツール |
結論としては競合というより住み分けだ。Artifactsは「作って、その場で見せて、終わり」の使い捨て可視化に強い。Retool・Streamlit・自前のNext.jsは「クライアントに納品して、継続的に使ってもらう」本番ツールの領域を今のところ守っている。
ノーコード系ツールとの比較検討という意味では
でも近い視点の比較をしているので、ツール選定で迷っている人は合わせて読んでほしい。
まとめ：先行者優位はあるが「クライアント向け」はまだ先
MCPコネクタ対応で、Artifactsは「セッションの成果物」から「軽く生きているツール」に一歩近づいた。GitHub連携ダッシュボードをプロンプト1行で作れる体験自体は素直にすごい。
ただし、フリーランスがまず期待するであろう「クライアントに渡せる簡易ツール」という用途は、コネクタ付きArtifactが公開リンクで共有できないという制約に真正面からぶつかる。Pro・Maxプランでは特に、コネクタ付きページは自分専用の道具にしかならない。
今の段階での現実的な使い方は、自分やチーム内での状況確認ツールとしての活用だ。クライアント向けの納品物としては、Retool・Streamlit・自前実装がまだ必要になる。この制約が将来的に緩和されるかは注視したいところで、変化があればまたこの記事を更新する。
よくある質問
関連記事
