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

# VS Code

> Connect Strata with VS Code in minutes and supercharge your AI coding experience

<img className="block dark:hidden" src="https://mintcdn.com/klavisai/xedd71oFwW99AsnY/images/knowledge-base/vs_code/VS_Code.png?fit=max&auto=format&n=xedd71oFwW99AsnY&q=85&s=ff15f5e0aa936d3574ac3bbb485a79db" alt="VS Code IDE" width="2400" height="1260" data-path="images/knowledge-base/vs_code/VS_Code.png" />

<img className="hidden dark:block" src="https://mintcdn.com/klavisai/xedd71oFwW99AsnY/images/knowledge-base/vs_code/VS_Code.png?fit=max&auto=format&n=xedd71oFwW99AsnY&q=85&s=ff15f5e0aa936d3574ac3bbb485a79db" alt="VS Code IDE" width="2400" height="1260" data-path="images/knowledge-base/vs_code/VS_Code.png" />

## Quick Setup Guide

<Steps>
  <Step title="Authorize MCP Servers to Use with Strata">
    Navigate to the [Klavis home page](https://www.klavis.ai/home) and click **"MCP Server"** in the left sidebar. You will see a list of MCP servers available in Klavis.

    <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step1.png?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=b5c8be349f9ffcb8319758d478190559" alt="Klavis home page" width="1905" height="1072" data-path="images/knowledge-base/vs_code/step1.png" />

    Click the **"Authorize"** button next to your chosen server. Once server is authorized, you will see **Green Checkmark** status.

    <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step2.png?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=002b5371f9933f7b41442a01c1101476" alt="Authorize MCP Servers" width="1900" height="1069" data-path="images/knowledge-base/vs_code/step2.png" />

    <Tip>
      You can authorize one or more servers to use with Strata
    </Tip>
  </Step>

  <Step title="Configure VS Code IDE with Strata">
    <Tabs>
      <Tab title="Via Dashboard">
        From Klavis Dashboard, click **Add to VS Code** and you will be redirected to VS Code IDE.

        <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step3.png?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=de0716b1dbd9bc379065ed660a62b9e8" alt="Copy Strata Server URL" width="1902" height="1070" data-path="images/knowledge-base/vs_code/step3.png" />

        VS Code will automatically open the **MCP** dialog with Strata Server URL pre-filled. Click **Install** to save the configuration.

        <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step4.png?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=d6289a8c2d37598e4713aad1d7e2e4ca" alt="Install Strata in VS Code" width="1777" height="999" data-path="images/knowledge-base/vs_code/step4.png" />
      </Tab>

      <Tab title="Via Code">
        Copy Your Strata URL, open **Command Palette** in VS Code settings:

        * **macOS**: `Cmd + Shift + P`
        * **Windows/Linux**: `Ctrl + Shift + P`
        * Or **Settings > Command Palette > Preferences: Open User Setting (JSON)**

        <img src="https://mintcdn.com/klavisai/xedd71oFwW99AsnY/images/knowledge-base/vs_code/step5.png?fit=max&auto=format&n=xedd71oFwW99AsnY&q=85&s=e38cd0ac59ca6b6fa12abf4b458d82b7" alt="VS Code IDE Settings" width="1280" height="720" data-path="images/knowledge-base/vs_code/step5.png" />

        Paste Your Server URL to **settings.json** file like the screenshot below

        <img src="https://mintcdn.com/klavisai/xedd71oFwW99AsnY/images/knowledge-base/vs_code/step6.png?fit=max&auto=format&n=xedd71oFwW99AsnY&q=85&s=f18190d092d81f81f79fa2d7e3e91f03" alt="Open User Setting (JSON) in VS Code" width="1280" height="720" data-path="images/knowledge-base/vs_code/step6.png" />

        <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step7.png?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=bf46cb075cc865a49000a1af22f326b7" alt="settings.json file in VS Code IDE" width="1175" height="192" data-path="images/knowledge-base/vs_code/step7.png" />
      </Tab>
    </Tabs>

    <Tip>
      You can add **Single** MCP Server URL directly here as well:

      1. Navigate to **Target Server** and click **Three Dots** next to your server
      2. Tap **Show Individual Server URL** and copy the URL
      3. Paste this URL in VS Code settings as described above
    </Tip>

    <Accordion title="🔐 OAuth Services (Most Common)">
      * Automatically redirected to OAuth authorization
      * Sign in to your account (GitHub, Google, Slack, etc.)
      * Grant necessary permissions
      * Redirected back to Klavis automatically
    </Accordion>

    <Accordion title="🔑 API Key Services">
      * Prompted to enter an API key
      * Follow service-specific instructions to generate key
      * Paste key in the provided field
      * Click **"Save"** to continue
    </Accordion>
  </Step>

  <Step title="Verify Tools Loading">
    In Github Copilot Chat, open **"Configure Tools"** (Tools icon) and scroll down to **MCP Server: klavis-strata**. You will see the list of available tools in Strata.

    <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step8.png?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=dcfcd54a386c26c7509f6e93e935091c" alt="Strata Tools loading in VS Code" width="1342" height="996" data-path="images/knowledge-base/vs_code/step8.png" />

    <Note>
      As a prerequisite, you should have **GitHub Copilot Chat** extension installed in your VS Code IDE.
    </Note>
  </Step>

  <Step title="Start Using in Github Copilot Chat inside VS Code IDE">
    <img src="https://mintcdn.com/klavisai/YJ51UjQSKXxaRLyQ/images/knowledge-base/vs_code/step9.jpg?fit=max&auto=format&n=YJ51UjQSKXxaRLyQ&q=85&s=1dfaf620879e061d58ac3bb6986ea85f" alt="Using MCP Server in Github Copilot Chat" width="1443" height="1003" data-path="images/knowledge-base/vs_code/step9.jpg" />

    Open Chat (`Cmd/Ctrl + I`) and start using natural language:

    <CodeGroup>
      ```text GitHub theme={null}
      "Create a new issue titled 'Add dark mode' with priority label"
      ```

      ```text Slack theme={null}
      "Send a message to #general: 'Standup meeting in 5 minutes!'"
      ```

      ```text Gmail theme={null}
      "Send email to john@company.com about project update"
      ```

      ```text Notion theme={null}
      "Create a new page called 'Meeting Notes' with today's date"
      ```
    </CodeGroup>

    <Tip>
      🎯 Github Copilot Chat automatically detects when to use **Strata** based on context - no need to specify explicitly!
    </Tip>
  </Step>

  <Step title="Happy Building! 🎉">
    You're all set! Your **Strata** is now integrated with Github Copilot in VS Code IDE.
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="🔧 Tools Not Appearing">
    * Double-check your Server URL for typos
    * Ensure stable internet connection
    * Verify authentication in Klavis dashboard
    * Check VS Code logs (View → Output → GitHub Copilot) for errors
    * Try completely restarting VS Code IDE
  </Accordion>

  <Accordion title="🔐 Authentication Issues">
    * Re-authenticate in the Klavis dashboard
    * Check if your OAuth tokens have expired
    * Verify API key permissions (for API key services)
    * Ensure you've granted all necessary permissions
  </Accordion>

  <Accordion title="⚡ Performance Issues">
    * Limit the number of active MCP servers
    * Check your internet connection speed
    * Restart VS Code IDE periodically
    * Contact support if issues persist
  </Accordion>
</AccordionGroup>

## Need Help?

<CardGroup cols={2}>
  <Card title="Community" icon="discord">
    Join our Discord for community support and discussions
  </Card>

  <Card title="Support" icon="headphones">
    Contact our technical support team for assistance
  </Card>
</CardGroup>

***