> ## 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는 AI 도구 통합을 위한 오픈 표준인 [Model Context Protocol (MCP)](https://modelcontextprotocol.io)을 통해 수백 개의 외부 도구와 데이터 소스에 연결할 수 있습니다. 사전 등록된 서버에 로그인하거나 신뢰하는 커스텀 MCP 서버를 추가하세요.

## 사전 등록된 MCP 서버 연결하기

Replit은 Stripe, Linear, Notion, Sentry 등 인기 서비스를 위한 큐레이션된 MCP 서버 목록을 제공합니다. 연결은 단 한 번의 로그인 클릭으로 완료됩니다.

<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="Stripe, Linear, Notion, Sentry, Atlassian, Miro, PostHog, Amplitude, Mixpanel, Granola, Razorpay 등 사전 등록된 서버와 각 서버의 로그인 버튼이 나열된 Replit Agent용 MCP 서버 설정 패널" width="3452" height="1988" data-path="images/replitai/mcp-servers-pane.png" />
</Frame>

<Steps>
  <Step title="Integrations 패널 열기">
    [replit.com/integrations](https://replit.com/integrations)로 이동하여 **MCP Servers for Replit Agent**로 스크롤하세요.
  </Step>

  <Step title="서버 선택">
    연결하려는 서비스를 찾으세요 — Stripe, Linear, Notion, Sentry, Atlassian, Miro, PostHog, Amplitude, Mixpanel, Granola, Razorpay 등이 있습니다.
  </Step>

  <Step title="로그인">
    서버 옆의 **Sign in**을 클릭하세요. 해당 서비스의 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 서버 URL 필드, 확장 가능한 고급 설정 섹션이 있는 MCP 서버 연결 대화상자" width="3452" height="1988" data-path="images/replitai/mcp-connect-dialog.png" />
</Frame>

<Steps>
  <Step title="서버 추가 대화상자 열기">
    MCP 서버 설정 패널에서 **+ Add MCP server**를 클릭하세요.
  </Step>

  <Step title="표시 이름 설정">
    알아보기 쉬운 이름을 입력하세요 — Agent가 채팅 로그에서 서버를 참조할 때 이 이름을 사용합니다.
  </Step>

  <Step title="서버 URL 입력">
    MCP 서버의 HTTPS 엔드포인트를 붙여넣으세요. 서버에 인증이 필요하다면 **Advanced settings**를 열어 커스텀 헤더(예: `X-API-Key`)를 추가하세요.
  </Step>

  <Step title="테스트 및 저장">
    **Test & save**를 클릭하세요. Replit이 연결을 시도하고 서버가 요구하는 OAuth 흐름을 안내합니다. 저장이 완료되면 MCP 서버 목록에 상태와 함께 연결이 표시됩니다.
  </Step>
</Steps>

<Warning>
  신뢰하는 MCP 서버에만 연결하세요. 연결된 서버는 Agent에 도구와 데이터를 제공할 수 있습니다 — 익숙하지 않은 엔드포인트를 추가하기 전에 소스를 검토하세요.
</Warning>

## Agent에서 MCP 도구 사용하기

서버가 연결되면 Agent가 자동으로 도구 목록을 가져와 모든 프로젝트에서 기능을 사용할 수 있게 합니다. 서버를 사용하려면 채팅에서 언급하기만 하면 됩니다:

> Use the Notion MCP server to find the most recent meeting notes.

<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>