「Add to Kiro」ボタンを使って Kiro ユーザーへ MCP サーバー設定の共有を行ってみた
いわさです。
先日、Kiro Power を紹介する記事を書きました。
Kiro Power を作成して GitHub などで共有することで MCP ツールを含むステアリングファイルなどの一式をパッケージ化して共有することができます。
ただし、MCP サーバー設定だけ手軽に共有したい場合もあります。
JSON 設定を共有すればまぁ良いのですが、導入する人がより簡単に使える方法がないか調べてみると「Add to Kiro」というボタンが存在することに気がつきました。
今回こちらを使って Kiro IDE ユーザーに MCP サーバー設定を共有してみたので紹介します。
Add to Kiro ボタンとは
Kiro の公式ドキュメントである以下のページにいくつかの MCP サーバーが紹介されているのですが、「Add to Kiro」というボタンが並んでいますね。
Kiro をお使いの方は上記ボタンを試していただきたいのですが、こちらを押すと Kiro IDE が開いて自動で MCP サーバーが追加されます。グローバル設定として。
これまでは JSON ファイルを開いて編集を頑張る必要があったのですがこれはなかなかお手軽です。
この Add to Kiro ボタンですが、我々が独自で MCP 設定を用意してボタン化することができます。
Add to Kiro ボタンを作ってみる
今回は以前記事で紹介した Playwright MCP サーバーを共有してみます。
先ほどの公式ドキュメントに Add to Kiro ボタンリンクを用意する方法は紹介されています。
仕組みとしては生成された URL が Kiro 公式が提供するパブリックな MCP 起動ページに遷移し、そこの Open ボタンにカスタム URL スキームが設定されていて Kiro IDE が起動し MCP が自動設定されるという形です。
ということでまずは URL を生成する必要があります。
Add to Kiro のリンクは以下の URL 形式となっています。
https://kiro.dev/launch/mcp/add?name=<サーバー名>&config=<URL エンコードした JSON 設定>
nameは MCP サーバーの表示名称で、configが MCP 設定となる JSON 値を URL エンコードしたものです。ただのエンコードで暗号化やハッシュ化ではないので注意してください。この機能を使って配布する時、環境変数などの秘匿情報を含まないようにしましょう。
Playwright MCP サーバーの設定は以下です。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
手動で URL エンコードしても良いですが、公式ドキュメントでコードを使ったリンクの生成方法があったのでこちらを今回は使います。
const name = 'playwright';
const config = {
command: 'npx',
args: ['@playwright/mcp@latest'],
disabled: false,
autoApprove: []
};
const encodedName = encodeURIComponent(name);
const encodedConfig = encodeURIComponent(JSON.stringify(config));
console.log(`https://kiro.dev/launch/mcp/add?name=${encodedName}&config=${encodedConfig}`);
コマンドを実行するとリンクが生成されましたね。
% node hoge.mjs
https://kiro.dev/launch/mcp/add?name=playwright&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40playwright%2Fmcp%40latest%22%5D%2C%22disabled%22%3Afalse%2C%22autoApprove%22%3A%5B%5D%7D
こちらのリンクをクリックしてみると...
おお、起動画面に遷移しました。
そしてそのまま Kiro IDE に Playwright の MCP サーバー設定が追加されました。これは楽だ。
ちなみに起動ページの Open Kiro ボタンは次のようなカスタム URL スキームとなっていました。
Add to Kiro ボタンを設置する
あとは Add to Kiro ボタン化する方法ですが、パブリックな配置用ボタン画像（https://kiro.dev/images/add-to-kiro.svg）が提供されているのでそれを使うだけという感じです。
今回は Backlog Wiki にマークダウンで以下を配置してみました。
[](https://kiro.dev/launch/mcp/add?name=playwright&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22%40playwright%2Fmcp%40latest%22%5D%2C%22disabled%22%3Afalse%2C%22autoApprove%22%3A%5B%5D%7D)
プレビューしてみると、こんな感じで Add to Kiro ボタンを設置することが出来ています。
さいごに
本日は「Add to Kiro」ボタンを使って Kiro ユーザーへ MCP サーバー設定の共有を行ってみました。
Kiro Power でもいいかなと最初思っていましたが Power の作成が必要なので、GitHub などで MCP サーバーのリンク集を用意しておいて Add to Kiro ボタンを配置しておくというやり方は良さそうです。
あとはエンタープライズ版をご利用の場合は IAM Identity Center で使用可能な MCP サーバーの制限とカタログ化が出来るのでこちらを使ってもらうのもありですね。
