はじめに

フロントエンド開発において、UIの挙動を確認するための「テストデータ作成」は意外と時間のかかる作業です。

このチュートリアルでは、NILTO MCP と Gemini CLI を連携させ、簡単な指示だけで「フリマサイトのよくある質問」100件を一括生成する手順を紹介します。面倒な単純作業をAIに任せて、開発効率を向上させましょう。

事前準備1：NILTOのスペース・モデルを設定

今回は架空のフリマサイトのサポートサイトとして「よくある質問」を作成します。
そのため「よくある質問」に必要なスペース「フリマサイトサポート」とモデル「よくある質問カテゴリ」、「よくある質問」を作成します。

スペースの作成

「組織 > スペース > 新規作成」からフリマサイトサポートのスペースを作成します。

モデルの作成

以下の構成でモデルを作成します。

よくある質問カテゴリの構成

よくある質問の構成

これでスペースとモデルの準備ができました。

事前準備2：NILTO MCPとの連携

Gemini CLIでNILTO MCPを使用するための設定をします。

MCPアクセストークンの取得

NILTOのMCPサーバーを利用するにはアクセストークンが必要になります。

スペースのサイドメニューからMCPアクセストークンを選択し、MCPサーバーを有効にするボタンを選択します。

するとアクセストークンが生成されるため、トークンをコピーします。

MCPサーバーの設定

次に、今回利用するMCPサーバーをGemini CLIに認識させるための設定を行います。

プロジェクトのルートディレクトリにある .gemini/settings.json ファイルに以下の内容を記述します。<YOUR_ACCESS_TOKEN>と書かれている箇所には、先ほどコピーしたトークンを貼り付けます。

{
  "mcpServers": {
    "nilto": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.nilto.com/mcp",
        "--header",
        "X-NILTO-MCP-ACCESS-TOKEN:<YOUR_ACCESS_TOKEN>"
      ]
    }
  }
}

MCPサーバーの起動確認

MCPサーバーの設定が完了したら、Gemini CLIを起動し、サーバーが正しく認識されているかを確認します。

プロジェクトのルートディレクトリで、Gemini CLIを起動してください。

gemini

起動後、チャット内で以下のコマンドを入力します。

/mcp list

このコマンドにより、.gemini/settings.jsonに設定したサーバーの一覧が表示されます。niltoが表示されれば、正しく設定が読み込まれています。

NILTO MCPでよくある質問カテゴリを作成する

よくある質問を作成する前によくある質問のカテゴリを作成します。

Gemini CLIで以下のように指示をしてよくある質問カテゴリを4つ作成します。

NILTOのフリマサイトサポートのよくある質問カテゴリを4件作成して

下書き・公開などのステータスの確認と作成するカテゴリ案が提案されます。
今回はステータスは公開、カテゴリ案はOKと回答します。

作業が完了したようなので、NILTOの管理画面で確認してみます。

よくある質問カテゴリが4件作成されていることを確認できました。

NILTO MCPでよくある質問100件を一括作成する

では本題となるフロントエンド開発用のテストデータとして、よくある質問100件の作成を以下の内容で指示します。

NILTOのフリマサイトサポートのよくある質問をリアルな内容でカテゴリ別に25件ずつ、合計100件作成して

これでテストデータとしてよくある質問100件の作成処理が開始されます。
作成完了までしばらく待機します。

すべてのテストデータ作成が完了しました。

NILTOの管理画面を確認してみます。

無事100件作成されていることが確認できました！

フロントエンドに組み込んで確認する

では作成したテストデータを、NILTOのDeveloperAPIを利用して取得し、実際にフロントエンドに組み込んで表示してみます。

問題なく表示できました。

まとめ

NILTO MCP を活用し、自然言語の指示だけで100件ものテストデータを瞬時に用意することができました。

これまで手作業で行っていたデータ入力時間をゼロにできるだけでなく、AIが生成する「リアルな内容」によって、より本番に近い環境での動作検証が可能になります。

今回は「よくある質問」を作成しましたが、ブログ記事やニュースリリースなど、他のモデルでも同様に応用可能です。

ぜひこの快適な開発フローを、実際のプロジェクトでも活用してみてください。

NILTO MCPの詳細は以下をご覧ください。

NILTO MCP特設ページ