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

# VS Code

> Connect Surfer to GitHub Copilot in VS Code and run your first request.

export const Prompt = ({text}) => {
  const copyIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>';
  const checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>';
  const copy = event => {
    const button = event.currentTarget;
    if (!navigator.clipboard) return;
    navigator.clipboard.writeText(text).then(() => {
      button.innerHTML = checkIcon;
      button.setAttribute('aria-label', 'Copied');
      clearTimeout(button.resetTimer);
      button.resetTimer = setTimeout(() => {
        button.innerHTML = copyIcon;
        button.setAttribute('aria-label', 'Copy prompt');
      }, 2000);
    }).catch(() => {});
  };
  return <div className="surfer-prompt not-prose">
      <div className="surfer-prompt-meta">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
          <circle cx="12" cy="7" r="4" />
        </svg>
        <span>Prompt</span>
      </div>
      <div className="surfer-prompt-bubble">
        <p className="surfer-prompt-text">{text}</p>
        <button type="button" className="surfer-prompt-copy" aria-label="Copy prompt" onClick={copy}>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
            <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
          </svg>
        </button>
      </div>
    </div>;
};

Add Surfer through VS Code's MCP configuration and use it in an agent chat.

## Before you start

You need your own Surfer account on a [plan that includes MCP](/mcp/credits-and-limits#plans-that-include-mcp).

Open VS Code with GitHub Copilot enabled. Your organization's policy must allow MCP servers.

## Connect Surfer

<Steps>
  <Step title="Add the server configuration">
    Create `.vscode/mcp.json` in your workspace and add:

    ```json theme={"system"}
    {
      "servers": {
        "surfer": {
          "type": "http",
          "url": "https://mcp.surferseo.com/mcp"
        }
      }
    }
    ```

    If the file already contains servers, add `surfer` inside the existing `servers` object.

    For a configuration available across workspaces, run **MCP: Open User Configuration** from the Command Palette and add the same entry there.
  </Step>

  <Step title="Start the server">
    Run **MCP: List Servers** from the Command Palette, select `surfer`, and start it. Review and accept VS Code's trust prompt. VS Code opens your browser for the Surfer sign-in.
  </Step>

  <Step title="Authorize Surfer">
    1. Sign in with your Surfer account in the browser window that opens.
    2. Choose the organization to connect, if you belong to more than one.
    3. Select **Authorize**, then return to your client.

    If the browser signs you in to the wrong Surfer account, follow [Disconnect or switch accounts](/mcp/authentication#disconnect-or-switch-accounts).
  </Step>

  <Step title="Enable Surfer in chat">
    Open Chat in agent mode. Use the tools picker to enable the Surfer tools you want to use.
  </Step>
</Steps>

<Accordion title="Add the server without editing JSON">
  Run **MCP: Add Server** from the Command Palette. Follow the prompts to add an
  HTTP server named `surfer` with the URL `https://mcp.surferseo.com/mcp`.
  Choose **Workspace** or **Global** for where to save the configuration.
</Accordion>

## Verify the connection

Run **MCP: List Servers** and check that `surfer` is running. If some tools are missing from chat, check the [client tool limit](/mcp/credits-and-limits#limits-your-client-adds).

Ask your assistant:

<Prompt text="List my Surfer workspaces" />

Your assistant lists the workspaces in the organization you authorized. Each workspace has a name, type, location, and state. Choose an active workspace for content tasks.

Continue with [Skills](/mcp/skills) for guided workflows or [Use cases](/mcp/use-cases) for example requests. If the request fails, see [Troubleshooting](/mcp/troubleshooting).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.