> ## 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 Install Links

> Learn how to generate direct install links for MCP servers.

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

Install links let users add your MCP server to Replit with a single click. Share these links in your documentation, README files, or anywhere you want to promote your integration.

## Generate a link

Use this form to generate an install link and badge for your MCP server:

<McpLinkGenerator />

## Link format

Install links use a base64-encoded JSON payload containing your server configuration:

```
https://replit.com/integrations?mcp={payload}
```

The payload includes:

* **displayName**: The name shown to users during installation
* **baseUrl**: Your MCP server's HTTPS endpoint
* **headers**: Optional authentication headers

```json theme={null}
{
  "displayName": "My MCP Server",
  "baseUrl": "https://example.com/mcp",
  "headers": [
    {
      "key": "Authorization",
      "value": "Bearer your-token"
    }
  ]
}
```

## Using badges

Add a clickable badge to your README or documentation that installs your MCP server when clicked.

```markdown theme={null}
[![Install My MCP](https://replit.com/badge?caption=Install%20My%20MCP)](https://replit.com/integrations?mcp={payload})
```

<Frame>
  ![Install MCP Badge](https://replit.com/badge?caption=Install%20MCP%20Server)
</Frame>

You can customize the badge caption (maximum 30 characters) by URL-encoding the text in the `caption` parameter.