Claude Media
Claude Code webのURLパラメータでプロンプトとリポジトリを事前入力する

Claude Code webのURLパラメータでプロンプトとリポジトリを事前入力する

claude.ai/codeのURLにprompt・repositories・environmentを付けて、新規セッションの入力欄を埋めて開く方法です。prompt_urlの条件やエンコードの落とし穴も扱います。

claude.ai/codeのURLにクエリパラメータを足すと、新しいセッションのプロンプト・リポジトリ・環境があらかじめ選ばれた状態でフォームが開きます。Issueトラッカーのボタンやランブックのリンクに仕込めば、クリック一つで「この課題をClaude Codeに渡す」入口になります。

使えるパラメータは4つです。

パラメータ役割別名
prompt役割入力欄に事前入力するテキスト別名q
prompt_url役割プロンプト本文を取得するURL(長文用)別名なし
repositories役割事前選択するリポジトリ(owner/repoのカンマ区切り)別名repo
environment役割事前選択する環境の名前またはID別名なし

最小のリンクを作る

公式の例は次の形です。プロンプトとリポジトリが選ばれた状態でフォームが開きます。

https://claude.ai/code?prompt=Fix%20the%20login%20bug&repositories=acme/webapp

値はそれぞれURLエンコードします。空白は%20、改行は%0Aです。リポジトリはowner/repoの形で書き、複数ならカンマで区切ります。別名のqとrepoは、それぞれpromptとrepositoriesと同じ働きなので、リンクを短くしたいときはこちらでも書けます。

前提として、claude.ai/codeにGitHubが接続済みで、Claude GitHub Appが対象のリポジトリに入っている必要があります。公開リポジトリは接続だけでクローンできますが、非公開リポジトリはAppのインストールが条件です。リンクを開いても、そのリポジトリが選択肢に出ない人には事前選択は効きません。選択肢に出ないときの切り分けはClaude Code webのトラブルシューティングにまとめています。

値は手でエンコードしない

プロンプトに#や&が入ると、手書きのURLはすぐ壊れます。#42の#はフラグメントの開始と解釈され、&は次のパラメータの区切りになるためです。リンクを生成する側のコードではencodeURIComponentを通します。

const prompt = "Fix the login bug\nSee issue #42 & add a test";
 
const url =
  "https://claude.ai/code" +
  "?prompt=" + encodeURIComponent(prompt) +
  "&repositories=" + encodeURIComponent("acme/webapp");

手元のNode.jsでこのプロンプトを変換すると、Fix%20the%20login%20bug%0ASee%20issue%20%2342%20%26%20add%20a%20testになります。空白は%20、改行は%0A、#は%23、&は%26です。/も%2Fに変換されます。

URLSearchParamsやURL.searchParams.setは、空白を%20でなく+にします。Pre-fill sessions節の例はすべて%20で書かれていて、+の扱いは同節に書かれていません。encodeURIComponentの出力を使えば、節の例と同じ形で渡せます。

長いプロンプトはprompt_urlに逃がす

Issueの本文やスタックトレースを丸ごと渡すと、URLが長くなりすぎます。そのためのprompt_urlは、プロンプト本文を返すURLを指定します。

https://claude.ai/code?prompt_url=https%3A%2F%2Fexample.com%2Fprompts%2Fissue-42.txt&repositories=acme/webapp

守る条件は2つです。

  • 取得先のURLはクロスオリジンのリクエストを許可していること(CORSの設定が要ります)
  • promptも同時に付けると、prompt_urlは無視されること

取得はブラウザー側で起きるので、CORSを許可していない社内サーバーのテキストは読み込めません。Pre-fill sessions節に書かれているprompt_urlの条件は、クロスオリジンの許可とpromptとの併用時の扱いの2つだけで、プロンプトの最大文字数や取得に失敗したときの画面は載っていません。長文を扱うリンクは、配る前に自分のアカウントで開き、入力欄にテキストが入るかを一度確かめてください。

Issueトラッカーのボタンにする

公式が挙げている用途が、Issueトラッカーに置く「Claude Codeで開く」ボタンです。Issueのタイトルと本文をプロンプトに入れ、リポジトリを固定します。テンプレートを作る側のスクリプトは次のようになります。

function claudeCodeLink({ repo, number, title, body }) {
  const prompt =
    `Resolve issue #${number}: ${title}\n\n${body}`;
  return (
    "https://claude.ai/code" +
    "?repositories=" + encodeURIComponent(repo) +
    "&prompt=" + encodeURIComponent(prompt)
  );
}

この関数は説明用の例で、公式のサンプルコードではありません。本文が長いIssueでは、promptの代わりに本文を返すエンドポイントを用意してprompt_urlにするのが現実的です。

組織で環境を分けている場合は、environmentに名前かIDを入れます。環境はネットワークアクセスや環境変数、セットアップスクリプトを束ねた設定なので、「このリポジトリはこの環境で動かす」をリンク側で固定できます。

environmentに渡す値の決め方

environmentには、環境の名前かIDを渡します。名前は、claude.ai/codeで入力欄の上にあるクラウドのアイコンに表示されていて、選択メニューのCloudから一覧できます。

環境が1つしかないなら、environmentを付ける意味はほとんどありません。Pro・Maxでは初回のオンボーディングでDefaultという環境が作られます。Team・Enterpriseでも、OwnerがQuick setupを有効にしていれば同じです。DefaultはTrustedのネットワークアクセスで、環境変数もセットアップスクリプトも持たず、環境がこれだけなら全セッションがここで動きます。

付ける価値が出るのは、環境を複数作ってからです。たとえば、社内のパッケージレジストリに届くカスタムのネットワーク設定の環境と、既定のままの環境を使い分けるときです。リンクごとに環境を固定すれば、押した人が選び間違えません。

配る相手が複数人なら、環境の種類にも気をつけます。

  • 自分で作った環境は、既定では作った本人にしか見えません。他の人に配るリンクに載せる環境は、環境の編集画面のWho can use itで共有しておくか、次のOrganizationの見出しに並ぶ共有環境を使います
  • Team・Enterpriseでは、Ownerが管理画面のCloud environmentsで作った環境や、個人の環境を共有に切り替えた環境が、選択メニューのOrganizationの見出しに並びます。チーム向けのリンクにはこちらの名前を使います
  • 環境はアーカイブできます。アーカイブした環境では新しいセッションを始められないため、名前やIDをリンクに埋めたあとでアーカイブしたら、リンクも作り直します

リンクを開いたあとの流れ

事前入力が済んでいるのは、プロンプト・リポジトリ・環境の3つだけです。ブランチを指定するパラメータは4つの中にないので、リポジトリごとのブランチセレクターで選びます。複数のリポジトリをrepositoriesに並べれば、1つのセッションで横断して作業できます。

送信までの流れは、Start a task節の手順と同じです。

  1. リポジトリセレクター(入力欄の下)と、リポジトリごとのブランチセレクターを確認する
  2. 権限モードを選ぶ。選べるのはAuto・Accept edits・Planで、Autoは組織が許可していて、選んだモデルが対応しているときだけ出る
  3. プロンプトを確認して送信する。Claudeがリポジトリをクローンし、セットアップスクリプトがあれば実行してから作業を始める

セッションごとにブランチが分かれるので、同じリンクを何度押しても、前のタスクの完了を待たずに並べて走らせられます。

埋め込み先ごとの書き方

リンクを置く場所で、作り方が変わります。

ランブックやテンプレートのように中身が固定の場所には、エンコード済みの固定リンクを貼ります。

https://claude.ai/code?prompt=Run%20the%20failing%20test%20and%20fix%20it&repositories=acme/webapp&environment=Default

これはパラメータの組み合わせを示す例です。リポジトリ名や環境名は、実際に配る相手の環境に合わせて差し替えます。

Issueごとに中身が変わる場所では、前節の関数のように、番号やタイトルを受け取ってリンクを組み立てる側が要ります。社内のIssueトラッカーなら、ボタンを描画するときにこの関数を呼ぶ形です。

どちらの場合も、リンクを貼る前に、自分のアカウントで一度開きます。入力欄の文面、選ばれたリポジトリ、環境名の3つを見れば、エンコードの崩れや名前の違いがその場で分かります。

事前選択が効かないときの切り分け

リンクの形が合っていても、受け手の側の状態で選択が空振りすることがあります。症状から原因を絞ります。

  • リポジトリが選択肢に出ない: 非公開リポジトリは、Claude GitHub Appがそのアカウントか組織に入っていて、インストールの対象に含まれているときだけ出ます。/web-setupで接続した人は、gh repo view OWNER/REPOが通るかで、GitHub CLIのログインから見えているかを確かめられます
  • 画面にGitHubのログインボタンしか出ない: クラウドセッションにはGitHub接続が要ります。Team・Enterpriseでは、OwnerがOrganization settingsのConnectorsでGitHubコネクタを有効にするまで、接続の手順で止まります
  • 「Claude Code isn't available on your account」と出る: 選択中の組織の席にClaude Codeが含まれていません。別の組織に所属していれば、Switch organizationで切り替えます
  • 環境が選ばれない: 受け手の選択メニューに、その名前の環境があるかを確認します。共有していない個人用の環境は、作った本人にしか見えません
  • prompt_urlの本文が入らない: 取得先のCORS設定と、同じリンクにpromptが残っていないかを見ます

claude-cli://のDeep Linksとの違い

URLからClaude Codeを開く仕組みは、もう一つあります。Claude Code Deep Linksのclaude-cli://です。見た目は似ていますが、開く場所が違います。

比較軸claude.ai/codeのクエリclaude-cli://open
開く先claude.ai/codeのクエリブラウザーのクラウドセッションclaude-cli://openローカルの新しいターミナル
プロンプトclaude.ai/codeのクエリprompt(別名q)、長文はprompt_urlclaude-cli://openq(最大5,000文字)
場所の指定claude.ai/codeのクエリrepositories(別名repo、複数可)claude-cli://opencwdまたはrepo(1つ)
環境の指定claude.ai/codeのクエリenvironmentclaude-cli://openなし

Deep Linksは、クリックしたマシンのローカルクローンで開くのに対し、こちらはAnthropicが管理するVM上にリポジトリをクローンして動きます。ローカルの未コミット変更を使いたいならclaude-cli://、手元のPCを占有させずに回したいならclaude.ai/codeのリンクが向きます。クラウド環境の仕組みはClaude Code Webのクラウド環境の解説で詳しく扱っています。

使うときの注意

  • Pre-fill sessions節が説明しているのは、入力欄とセレクターの初期値だけです。権限モードの選択と送信は受け手が行う前提で、リンクの説明文を書きます
  • クラウドセッションは権限モードにManualとBypassがありません。リンク経由でも同じです
  • リンクの受け手は、claude.aiにサインインし、GitHubを接続している必要があります
  • リンクはプロンプトを平文でURLに載せます。機密情報はURLに入れず、取得先側でアクセス制御をかけたうえでprompt_urlを使う構成にします

まとめ

リンクの形はhttps://claude.ai/code?prompt=…&repositories=owner/repoだけです。生成コードでencodeURIComponentを通す、長文はprompt_url(CORS必須、prompt併用時は無視)に逃がす、この2点を押さえれば、Issueやランブックからクラウドセッションへの入口を一本のリンクで作れます。

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