Claude Media
Claude Code ArtifactsのMCP連携で公開後もライブデータを更新する
Claude CodeMCPClaude連携チュートリアル

Claude Code ArtifactsのMCP連携で公開後もライブデータを更新する

Claude Code ArtifactsはMCPコネクタを宣言でき、公開後も開くたびに最新データを取得します。仕組み・作り方・共有範囲の制約を解説します。

読了目安 約11分

Claude Code Artifactsは、セッションの作業結果をclaude.ai上の非公開Webページとして公開する機能です。v2.1.209以降ではページにMCPコネクタの呼び出しを宣言でき、誰かがページを開くたびに接続先から最新データを取り直します。セッションを閉じた後もダッシュボードやステータスボードが動き続けます。

Claude Code ArtifactsのMCP連携とは

Claude Code ArtifactsのMCP連携とは、公開済みのページが表示のたびにMCPコネクタを呼び出し、セッションが終わった後も最新データを反映し続ける仕組みです。通常のArtifactはセッションが取得した時点の内容を固めた静的ページですが、コネクタ呼び出しを宣言したページだけは、開かれるたびに外部から値を取り直します。

v2.1.209より前のバージョンでは、セッションが集めたデータをそのまま埋め込んだページとして公開され、ライブ更新はされません。Artifactsの公開自体はもっと前から使えており、コネクタ呼び出しによるライブ更新だけがv2.1.209以降の追加です。

要件内容
プラン内容Pro / Max / Team / Enterprise
Claude Codeバージョン内容v2.1.209以降(Artifactsの公開自体はデスクトップアプリならv1.13576.0以降も可)
ログイン方式内容/loginでのclaude.aiアカウント認証(APIキー・ゲートウェイトークン・クラウドプロバイダーの認証情報でのセッションは公開不可)
モデルプロバイダ内容Anthropic API(Bedrock・Google Cloud's Agent Platform・Microsoft Foundry経由は非対応)
組織ポリシー内容CMEK・HIPAA・ゼロデータ保持のいずれも有効でないこと

組織ポリシーの制約はコネクタ連携の有無に関わらず、Artifacts自体にかかります。

Claude.aiのArtifactsとは何が違うのか

同じ「Artifacts」という名前でも、claude.aiの会話内で生成されるClaude ProjectsのArtifactsとClaude Code Artifactsは別物です。前者はチャットの応答としてその場に描画されるコード・文書のプレビューです。後者はClaude CodeのCLIセッションからHTMLまたはMarkdownファイルとして書き出され、claude.aiの専用URLに公開される独立したWebページです。

両者に共通するのは、コネクタ呼び出しのオン・オフを切り替える組織の管理者トグルです。claude.aiの会話内で作られたArtifactsも、Claude Code Artifactsも、同じ「Enable artifact connectors」で扱われます。片方だけ止める設定はありません。

ライブデータ対応のArtifactを作る手順

ページに宣言させたいコネクタと、取得したいデータをプロンプトで具体的に名指しします。

GitHubコネクタ経由でオープンなプルリクエスト一覧を取得し、ページを開くたびに最新化されるダッシュボードArtifactを作って
手順

依頼から閲覧までの流れ

  1. 1

    コネクタとデータを名指しする

    「〇〇コネクタ経由で」「ページを開くたびに」のように、取得元と更新タイミングを書きます。名指ししないと、Claudeはセッション内で集めた値をそのまま固定ページに埋め込みます。

  2. 2

    Claudeが宣言つきで公開する

    ページが呼んでよいコネクタは公開時に宣言され、宣言にないコネクタは呼べません。宣言を含む公開には確認が入ることがあります(次節)。

  3. 3

    閲覧者が許可する

    最初のコネクタ呼び出しの前に、claude.aiが閲覧者へ許可を求めます。

  4. 4

    ロード時に取得し、再取得する

    ページは開いたときに取得し、一定間隔や更新ボタンで取り直せます。応答は閲覧者のブラウザーにキャッシュされ、再度開くとキャッシュから先に表示してから最新の結果に差し替わります。

公開時の確認はいつ出るか

プロンプトを入力して新しいArtifactを公開させる場合、プランモード以外では通常は確認なしで通ります。ただしコネクタ呼び出しやファイルダウンロードのような実行時の能力を宣言する公開は例外で、許可の確認か分類器のチェックを経ます。プランモードでは、各Artifactの最初の公開の前に必ず確認が出ます。

ローカルのMCPサーバーは公開後のページから呼べない

ローカルの.mcp.jsonに登録したMCPサーバーは、Claudeがページを作る過程でのデータ取得には使えます。ただし公開後のページからは呼び出せません。ライブ更新の対象になるのは、claude.aiアカウントに登録したコネクタだけです。

手元のclaude mcpで扱うサーバーは、claude.aiのコネクタとは別の系統です。MCPと他の拡張機構の役割分担はSkillsとMCPの違いにあります。v2.1.287でclaude mcp --helpを実行すると、サブコマンドの先頭は次のように表示されます(抜粋)。

claude mcp --help
Usage: claude mcp [options] [command]
 
Configure and manage MCP servers
 
Commands:
  add [options] <name> <commandOrUrl> [args...]  Add an MCP server to Claude Code.
 
  Examples:
    # Add HTTP server:
    claude mcp add --transport http sentry https://mcp.sentry.dev/mcp

「手元では動くのに公開ページでは空欄」という場合は、接続先がどちらの系統かを見ます。

公開済みページを別セッションから直す

公開したページは、ターミナルでCtrl+]を押せば、そのセッションで最後に扱ったArtifactを開き直せます。別セッションから改修するときは、URLをClaudeに渡すか、/artifactsの一覧から選んでセッションに添付します。どちらも無いと新しいArtifactが別に作られます。

/artifactsはv2.1.208以降で使え、自分のものと共有されたものを一覧します。一覧ではoでブラウザー、cでリンクコピー、Enterでセッションへの添付です。Enterが添付になったのはv2.1.216からで、それ以前はブラウザーで開く動作でした。

https://claude.ai/code/artifact/5fbea6f3-... のダッシュボードに、GitLabコネクタのIssue件数も追加して

閲覧者ごとにデータが変わる仕組み

コネクタ呼び出しの主体は、ページを公開した本人ではなく、そのとき見ている人のアカウントです。

くらべる

公開した人と閲覧者の役割

宣言する側

公開した人

ページが呼んでよいコネクタを宣言します。自分のコネクタの認証情報がページに渡ることはありません。

実行される側

閲覧者

自分のアカウントに接続したコネクタで取得します。コメント投稿やIssue更新のような副作用のある操作も、押した人のアカウントで動きます。

2人が同じダッシュボードを開いても、接続先の権限が違えば見える中身が変わります。

社内に配るときは、コネクタが必要なセクションに「〇〇コネクタが必要です」というフォールバック表示を入れるよう頼んでおきます。未接続の閲覧者が、空白ではなく接続すべきものを知れます。

共有範囲の制約と、ライブ部分が空になる原因

連携ページの共有は、プランと組織設定の範囲で組織内にも公開リンクにも広げられます。ただし公開リンクの先でサインインしていない人や、組織の外から開いた人には、コネクタ呼び出しは実行されません。その人にはライブ部分のないページが表示されます。

TeamとEnterpriseでは、公開リンクはOwnerが「External sharing」を有効にするまでオフです。組織内共有は、特定の人またはメンバー全員を指定できます。

ページを開いてもライブ部分が空のままのときは、次の4つを順に見ます。

原因見分け方対処
閲覧者がコネクタを未接続見分け方フォールバック表示が出ている対処claude.aiのSettings > Connectorsで接続して再読み込み
許可を拒否した見分け方拒否はそのページを開いている間続く対処再読み込みで許可を聞き直す
組織がコネクタ呼び出しを無効化見分け方全員のライブ部分が一律で空対処Ownerが「Enable artifact connectors」を確認
ページが呼ぶツール名がコネクタに無い見分け方作者本人でも空対処Claudeにツール名の修正と再公開を頼む

4つ目は、少数のツールだけを公開するゲートウェイ型のコネクタで、背後の個別ツール名をページが直接呼んだときに起きます。v2.1.265以降は、公開時にそのコネクタのツールがセッションで使える場合、ページが宣言したツール名を突き合わせます。合わない名前があれば警告し、1つも合わなければ公開を拒否します。v2.1.265より前は、確認なしで公開されていました。

通常のArtifactとの使い分け

用途向いている種類理由
一度きりのPR説明・レポート向いている種類通常のArtifact理由再取得が要らず、公開リンクの閲覧者にも全部見える
開くたびに数字が変わってほしいダッシュボード向いている種類コネクタ連携理由表示のたびに接続先を呼び直す
社外の不特定多数に見せたい資料向いている種類通常のArtifact理由ライブ部分が出ない(前節)
社内メンバーに常に最新を見せたい向いている種類コネクタ連携(Team・Enterprise)理由組織内共有とライブ更新を両立できる

共有したページへのコメントとClaudeの自動返信

組織内に共有したページには、共有された人がコメントを付けられます(v2.1.221以降でClaudeがコメントを読めます)。公開リンクだけでアクセスする人はコメントを見ることも付けることもできません。

編集権限のある人が「Send to Claude」を押すか@claudeで呼ぶと、そのスレッドが有効化され、Claudeが返信や解決をできます。v2.1.228以降は、ページを公開したセッションが動いている間、Claudeが自動で返信し、コメントが求めればページも直します。

自動返信が走るのは、権限モードが確認なしの投稿を許すときです。確認が要る場合、プランモード以外ではComments are waiting on Artifact: <name>と表示され、プランモードでは待機します。

自動返信は、1つのArtifactにつき1時間に60件のコメントまたはスレッド有効化を処理すると止まります。止めたいときは、アイドル中のプロンプトでCtrl+Cを1回押すか、/tasksで該当タスクを止めます。Ctrl+Cで止めた返信は、次のメッセージを送ると再開します。Ctrl+X Ctrl+Kを3秒以内に2回押すと、バックグラウンドのサブエージェントと一緒に全Artifactの自動返信が、そのセッションの残りの間止まります。

Artifactsを止める・管理する設定

自分のセッションだけで止めるなら、/configの「Artifacts」をオフにするか、設定ファイルに次を書きます。

{
  "enableArtifact": false
}

環境変数CLAUDE_CODE_DISABLE_ARTIFACT=1や、permissions.denyへのArtifact追加でも止まります。プロジェクトの.claude/settings.jsonに書く場合はv2.1.242以降が必要で、trueを書いても再有効化にはなりません。

ページが外部に出せるものにも制約があります。ページはGoogle Fontsと許可された5つのCDN以外から読み込めず、fetch・XHR・WebSocketの宛先もページ自身のオリジンとGoogle Fontsのホストだけです。コネクタ呼び出しは、ページではなくclaude.aiが通信を行います。

組織管理者向けの設定

TeamとEnterpriseのOwnerは、claude.aiの「Organization settings > Artifacts」で、Artifacts全体のオン・オフを切り替えます。公開リンクの許可(External sharing)も同じ画面です。コネクタ呼び出しは同じ画面ではなく「Organization settings > Capabilities」の「Enable artifact connectors」です。Enterpriseでロールベースのアクセス制御を使っていれば、ロールごとにArtifactsの権限を絞れます。

保持期間は「Organization settings > Data and privacy」で、本人だけに見えているものと共有済みのもので別々に設定できます。公開・共有・削除は監査ログにclaude_artifact_*として残ります。Compliance APIの/v1/compliance/code/artifacts系のエンドポイントなら、一覧・取得・削除ができます。外向き通信を制限している組織は、*.claudeusercontent.comを許可リストに足します。

まとめ

ライブ更新を足すかどうかは、見る人が組織内でサインインしているか、自分のコネクタを接続しているかで決まります。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →