初めに
Claude に「アーティファクト」という、Claude 上で動く画面を作れる機能があり、しかも MCP とも連携できるという話を聞いて、興味が湧いたので使ってみることにしました。
GitHub は画面が英語なので、日本語で操作できたらいいなと前から思っていました。そこで、Claude のアーティファクトと GitHub MCP を連携させて、GitHub を日本語で操作できる画面を作りました。
この記事では、Claude と相談しながら作った流れを紹介します。完成した画面でできることは次の3つです。
- 自分のリポジトリを一覧から選ぶ
- 元にするブランチを選んで、新しいブランチを作る
- 作業ブランチとマージ先を選んで、プルリクエストを作る
アーティファクトとは
アーティファクトは、Claude が作った HTML ページを claude.ai 上に公開できる機能です。ボタンや入力欄、JavaScript を使った操作画面を、そのまま claude.ai のリンクで開けます。
公開したページは Anthropic のサーバーに置かれますが、最初は作った本人しか見られません。他の人が見られるのは、自分で共有したときだけです。
さらに、ページに「ランタイム機能」を宣言すると、普通の Web ページではできないことができます。今回使ったのは mcp です。
| 機能 | できること |
|---|---|
mcp |
見ている人の MCP サーバー（GitHub など）をページから呼び出す |
db |
ページの外にデータを保存する（MySQL などを自分で立てる必要はない） |
sample |
ページから Claude に質問する |
user |
誰がページを見ているかを知る |
downloads |
作ったファイルを閲覧者にダウンロードしてもらう |
データの保存（db）
今回は使いませんでしたが、db 機能も便利そうです。ページの外にデータを保存できる機能で、保存先は Anthropic 側で用意されています。MySQL などのサーバーを自分で立てる必要はなく、ページで db を使うと宣言するだけで使えます。
保存の形式は表形式（テーブル）ではなく、「コレクション」の中に JSON のような「ドキュメント」を入れていく形です。Firebase や MongoDB に近いイメージです。
- 共有データ：タスク一覧や投票結果など、ページを見ている全員が同じデータを読み書きできる
- 個人データ：ユーザーごとの専用の領域があり、本人以外（ページの作成者も含む）は見られない
- Claude との連携：保存したデータを、あとで Claude が会話の中で読み書きできる
ブラウザに保存する localStorage は、その人のそのブラウザにしか残りません。db はサーバー側に保存されるので、どの端末から開いても同じデータが見え、複数人で共有することもできます。
アーティファクトの作成：まずは GitHub MCP との連携
GitHub MCP サーバーとは
GitHub 公式の MCP サーバー（github/github-mcp-server）です。リポジトリの参照、ブランチ作成、プルリクエスト作成などのツールがそろっています。使い方は、自分の PC で動かす「ローカル版」と、GitHub がホストしている「リモート版」の2つがあります。
全体の構成
mcp-remote は、デスクトップアプリとリモートの MCP サーバーの間をつなぐ小さな中継プログラムです。デスクトップアプリが起動時に自動で立ち上げるので、自分で何かを起動しておく必要はありません。必要なのは Windows に Node.js が入っていることだけです。
手順1：アクセストークン（PAT）を発行する
GitHub の「Settings」→「Developer settings」→「Personal access tokens」→「Fine-grained tokens」から発行します。
- Repository access：「Only select repositories」で、操作したいリポジトリだけを選ぶ
- Permissions：Contents と Pull requests を「Read and write」にする（Metadata は自動で読み取り専用になる）
手順2：デスクトップアプリの設定ファイルに登録する
デスクトップアプリの「設定」→「開発者」→「設定を編集」で claude_desktop_config.json を開き、mcpServers を追加します。
{
"mcpServers": {
"github": {
"command": "npx",
"args": [
"-y", "mcp-remote",
"https://api.githubcopilot.com/mcp/",
"--header", "Authorization:${GITHUB_AUTH}"
],
"env": {
"GITHUB_AUTH": "Bearer ここにPAT"
}
}
}
}
設定ファイルにはトークンがそのまま保存されます。PAT の対象リポジトリと権限を絞っておくのはそのためです。
デスクトップアプリを、タスクトレイからも完全に終了して起動し直します。
動作確認：画面を作る前にツールの返り値を見る
画面を作る前に、Claude にチャットから GitHub のツールを実際に呼び出してもらい、返ってくるデータの形を確認しました。推測でデータの形を決めると動かないことがあるためです。
| やりたいこと | 使ったツール | わかったこと |
|---|---|---|
| ログイン中のユーザーを知る | get_me |
login にユーザー名が入る |
| 自分のリポジトリ一覧 | search_repositories |
一覧専用のツールはないので、user:ユーザー名 で検索して代用する |
| ブランチ一覧 | list_branches |
ブランチ名の配列が返る。コミットが1つもない空のリポジトリでは空の配列になる |
| ブランチ作成 | create_branch |
作成したブランチの情報（ref など）が返る |
| プルリクエスト一覧 | list_pull_requests |
プルリクエストの配列が返る |
画面の作成
画面は「リポジトリを選ぶ → ブランチを作る → プルリクエストを作る」の3段階で、上から順に進む作りにしました。
-
ブランチ名のチェック：スペースや使えない記号、既存のブランチと同じ名前を入力すると、その場で日本語の注意が出ます。
feature/やfix/などの種類は選択式です。 - エラーの日本語化：「同じ名前のブランチがある」「差分がないのでプルリクエストを作れない」「PAT の権限が足りない」など、GitHub の英語のエラーを日本語に置き換えます。
- 実行前の確認：ブランチ作成とプルリクエスト作成の前に、内容の確認画面を必ずはさみます。
- 用語の説明：「ブランチ」「マージ先」などの横に、短い説明を添えています。
ページから MCP を呼び出す仕組み
アーティファクトを公開するときに、使う MCP サーバーとツールを宣言します。デスクトップアプリに登録したローカルの MCP サーバーは、host: を付けた名前で指定します。
{
"mcp": {
"servers": [{
"server": "host:github",
"tools": ["get_me", "search_repositories", "list_branches",
"create_branch", "create_pull_request", "list_pull_requests"]
}]
}
}
ページの JavaScript からは、次のように呼び出します。
const mcp = await claude.use("mcp");
if (!mcp) {
// デスクトップアプリ以外で開いたときなど。案内を表示する
}
const result = await mcp.callTool("host:github", "list_branches", {
owner: "ユーザー名", repo: "リポジトリ名", perPage: 100
});
const branches = result.payload; // ツールの返り値（JSON）
失敗したときは、エラーの種類を表す code が返ってきます。「GitHub につながっていない」「確認画面でキャンセルされた」「GitHub がエラーを返した」などを code で分けて、それぞれに合った日本語の案内を出しています。
書き込み操作で通信エラーになった場合は、実際には作成されている可能性があります。そのため、自動でやり直さずに一覧を読み込み直し、状態を確認してから案内するようにしました。
使ってみて：注意点と今後
完成した画面からブランチを作成し、GitHub に反映されることを確認できました。英語の画面を行き来せずに、日本語の案内に沿って進められるのは思った以上に楽です。
おわりに
アーティファクトと MCP を組み合わせると、普段使っているサービスに、自分たち向けの画面をかぶせられることがわかりました。今回は GitHub を日本語にしただけですが、同じやり方でほかのサービスにも応用できそうです。
また、アーティファクトは組織内で共有することもできるので、便利ツールを作って共有していけば、どんどん便利になりそうだなとも思いました。