> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# MCPで接続する

> Model Context Protocol（MCP）を通じてReplit Agentを外部ツール、データソース、APIに接続する — 事前リストのサーバーにサインインするか、カスタムサーバーを追加します。

export const McpLinkGenerator = () => {
  const getLink = () => {
    if (typeof document === 'undefined') return 'https://replit.com/integrations?mcp=';
    const displayName = document.getElementById('mcp-display-name')?.value || 'My MCP Server';
    const baseUrl = document.getElementById('mcp-base-url')?.value || 'https://example.com/mcp';
    const payload = {
      displayName,
      baseUrl
    };
    const jsonString = JSON.stringify(payload);
    const encoded = btoa(unescape(encodeURIComponent(jsonString)));
    return `https://replit.com/integrations?mcp=${encoded}`;
  };
  const updateOutputs = () => {
    if (typeof document === 'undefined') return;
    const link = getLink();
    const badgeUrl = 'https://replit.com/badge?caption=Add%20to%20Replit';
    const badgeMarkdown = `[![Add to Replit](${badgeUrl})](${link})`;
    const linkEl = document.getElementById('mcp-link-output');
    const badgeMarkdownEl = document.getElementById('mcp-badge-markdown');
    if (linkEl) linkEl.textContent = link;
    if (badgeMarkdownEl) badgeMarkdownEl.textContent = badgeMarkdown;
  };
  const handleBadgeClick = e => {
    e.preventDefault();
    window.open(getLink(), '_blank');
  };
  return <div className="space-y-4">
      <div>
        <label htmlFor="mcp-display-name" className="block text-sm font-medium mb-1">Display name</label>
        <input type="text" id="mcp-display-name" placeholder="My MCP Server" onInput={updateOutputs} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
      </div>
      <div>
        <label htmlFor="mcp-base-url" className="block text-sm font-medium mb-1">Base URL</label>
        <input type="text" id="mcp-base-url" placeholder="https://example.com/mcp" onInput={updateOutputs} className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Install link</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="mcp-link-output">https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6Ik15IE1DUCBTZXJ2ZXIiLCJiYXNlVXJsIjoiaHR0cHM6Ly9leGFtcGxlLmNvbS9tY3AifQ==</code>
        </pre>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge preview</label>
        <Frame>
          <a href="#" onClick={handleBadgeClick} style={{
    cursor: 'pointer'
  }}>
            <img src="https://replit.com/badge?caption=Add%20to%20Replit" alt="Add to Replit badge" noZoom />
          </a>
        </Frame>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Badge markdown</label>
        <pre className="w-full p-3 bg-gray-100 dark:bg-gray-800 rounded-md text-sm break-all select-all cursor-text">
          <code id="mcp-badge-markdown">[![Add to Replit](https://replit.com/badge?caption=Add%20to%20Replit)](https://replit.com/integrations?mcp=eyJkaXNwbGF5TmFtZSI6Ik15IE1DUCBTZXJ2ZXIiLCJiYXNlVXJsIjoiaHR0cHM6Ly9leGFtcGxlLmNvbS9tY3AifQ==)</code>
        </pre>
      </div>
    </div>;
};

Replit Agentは[Model Context Protocol（MCP）](https://modelcontextprotocol.io)を通じて数百の外部ツールやデータソースに接続できます — AIツール統合のオープンスタンダードです。事前リストのサーバーにサインインするか、信頼できるカスタムMCPサーバーを追加してください。

## 事前リストのMCPサーバーに接続する

ReplitにはStripe、Linear、Notion、Sentryなどの人気サービス向けのMCPサーバーがキュレーションされたリストとして含まれています。接続は1回のサインインクリックで完了します。

<Frame>
  <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/mcp-servers-pane.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=4eebca26c6b8f0349c76048a6cf43ac6" alt="Replit Agent向けMCPサーバー設定パネル。Stripe、Linear、Notion、Sentry、Atlassian、Miro、PostHog、Amplitude、Mixpanel、Granola、Razorpayなどの事前リストサーバーがサインインボタン付きで一覧表示されている" width="3452" height="1988" data-path="images/replitai/mcp-servers-pane.png" />
</Frame>

<Steps>
  <Step title="インテグレーションパネルを開く">
    [replit.com/integrations](https://replit.com/integrations)にアクセスし、**Replit Agent向けMCPサーバー**までスクロールします。
  </Step>

  <Step title="サーバーを選ぶ">
    接続したいサービスを見つけます — Stripe、Linear、Notion、Sentry、Atlassian、Miro、PostHog、Amplitude、Mixpanel、Granola、Razorpayなど。
  </Step>

  <Step title="サインインする">
    サーバーの横にある**サインイン**をクリックします。そのサービスのOAuthフローが案内されます。接続が完了すると、サーバーの接続ステータスが更新され、Agentがそのツールを使用できるようになります。
  </Step>
</Steps>

完全なカタログは[MCPサーバーリファレンス](/references/mcp/overview)をご覧ください。

## カスタムMCPサーバーを追加する

事前リストのカタログに希望のサーバーがない場合は、URLで追加します。

<Frame>
  <img src="https://mintcdn.com/replit/NqvyWjOnebeS7HrG/images/replitai/mcp-connect-dialog.png?fit=max&auto=format&n=NqvyWjOnebeS7HrG&q=85&s=f5086a7c5534cf6bbcaf4a04ed03e423" alt="MCPサーバー接続ダイアログ。表示名フィールド、MCPサーバーURLフィールド、詳細設定の折りたたみセクションが表示されている" width="3452" height="1988" data-path="images/replitai/mcp-connect-dialog.png" />
</Frame>

<Steps>
  <Step title="サーバー追加ダイアログを開く">
    MCPサーバー設定パネルで\*\*+ MCPサーバーを追加\*\*をクリックします。
  </Step>

  <Step title="表示名を設定する">
    認識しやすい名前を入力します — Agentはチャットログでサーバーを参照する際にこの名前を使用します。
  </Step>

  <Step title="サーバーURLを入力する">
    MCPサーバーのHTTPSエンドポイントを貼り付けます。サーバーが認証を必要とする場合は**詳細設定**を開いてカスタムヘッダー（例：`X-API-Key`）を追加します。
  </Step>

  <Step title="テストして保存する">
    **テストして保存**をクリックします。Replitが接続を試み、サーバーが必要とするOAuthフローを案内します。保存が完了すると、接続がMCPサーバーにステータス付きで表示されます。
  </Step>
</Steps>

<Warning>
  信頼できるMCPサーバーにのみ接続してください。接続されたサーバーはAgentにツールとデータを提供できます — 未知のエンドポイントを追加する前にソースを確認してください。
</Warning>

## AgentでMCPツールを使う

サーバーが接続されると、Agentは自動的にツールリストを取得し、すべてのプロジェクトで機能が利用可能になります。サーバーを使用するには、チャットで言及するだけです：

> Notion MCPサーバーを使って最新のミーティングノートを見つけてください。

<Frame>
  <img src="https://mintcdn.com/replit/TGnQMe8czfYDHq7u/images/replitai/custom-mcp/tool-call.png?fit=max&auto=format&n=TGnQMe8czfYDHq7u&q=85&s=66724b66f8599496fe22847a17503cea" alt="AgentがチャットでカスタムMCPサーバーのツールを呼び出している" width="571" height="817" data-path="images/replitai/custom-mcp/tool-call.png" />
</Frame>

Agentはリクエストに基づいてサーバーから適切なツールを選択します。ツールに確認が必要な場合は、実行前にプロンプトが表示されます。

## インストールリンクを共有する

インストールリンクを使うと、誰でもワンクリックであなたのMCPサーバーをReplitに追加できます — ドキュメント、README、またはインテグレーションを宣伝したい場所で便利です。

以下のフォームを使ってサーバーのインストールリンクとクリック可能なバッジを生成できます：

<McpLinkGenerator />

リンク形式とバッジのカスタマイズオプションについては[インストールリンクリファレンス](/references/mcp/install-links)をご覧ください。

## 次のステップ

<CardGroup cols={2}>
  <Card title="Model Context Protocol" icon="server" href="/learn/model-context-protocol">
    MCPとは何か、どのように機能するか、AIに解放する機能について理解します。
  </Card>

  <Card title="MCPリスト" icon="folder-tree" href="/references/mcp/overview">
    ワンクリックインストールバッジ付きのMCPサーバーキュレーションリストを参照します。
  </Card>

  <Card title="Figma MCP" icon="figma" href="/references/mcp/figma">
    MCPを通じてAgentをFigmaデザインに接続します。
  </Card>
</CardGroup>