Integrate SpotterCode with your IDE

Table of Contents

Before you begin
Integrate SpotterCode with Cursor
Integrate SpotterCode with Visual Studio Code
Integrate SpotterCode with Claude Code
Verify the integration
Additional resources

Connecting your IDE to ThoughtSpot’s SpotterCode is easy. All you need is the SpotterCode MCP Server URL. This guide will walk you through the process of adding SpotterCode to your IDE.

Before you begin🔗

Ensure that your IDE is AI-native and supports chat sessions with AI models.
Ensure that you have the necessary permissions to configure MCP servers on your IDE.
Ensure that the latest version of Node.js is installed in your environment. This is required for building embedding code with the SDK.
Ensure that you have access to a ThoughtSpot instance and can view the objects and resources that you want to embed or access via the REST API.

Integrate SpotterCode with Cursor🔗

To add the MCP server URL to your Cursor settings, go to Cursor Settings > Tools and MCP. Cursor opens the mcp.json file.
Add the SpotterCode MCP Server URL as a remote MCP server. For information about configuring MCP servers in Cursor, refer to the Cursor Documentation.
```
{
  "mcpServers": {
    "SpotterCode": {
      "url": "https://spottercode.thoughtspot.app/mcp"
    }
  }
}
```
Click Save and close the mcp.json file. This will install the SpotterCode MCP server and tools for the AI models on Cursor to execute.

Integrate SpotterCode with Visual Studio Code🔗

Although you can configure the MCP server in Visual Studio Code, to start a chat session with the AI agent, you’ll need GitHub Copilot or a similar extension.

To add an MCP Server to Visual Studio Code, you can use the Extensions view, the MCP: Add Server command via command palette, or directly edit the mcp.json file in your workspace configuration.

{
  "servers": {
    "SpotterCode": {
      "url": "https://spottercode.thoughtspot.app/mcp",
      "type": "http"
    }
  }
}

After you add the MCP server URL, the SpotterCode MCP server will be available in the Extensions view. For more information about configuring MCP servers in Visual Studio Code, refer to Visual Studio Code Documentation.

Integrate SpotterCode with Claude Code🔗

To enable SpotterCode in Claude Code, you can add the SpotterCode MCP server URL using the claude mcp add command via Claude CLI. If you are using Claude Desktop, you can add the URL directly to the Claude configuration JSON file:

{
  "mcpServers": {
    "SpotterCode": {
      "url": "https://spottercode.thoughtspot.app/mcp",
    }
  }
}

For more information about adding MCP servers to Claude Code, see Claude Code Documentation.

Verify the integration🔗

To verify the integration:

Open your application project in your IDE.

If the integration is successful, you’ll see SpotterCode in the MCP servers list.
Verify the available SpotterCode skills.

For example, Cursor shows the MCP skills of MCP connectors in the Tools & MCP page. Check if the SpotterCode MCP skills are listed under SpotterCode. As you hover over each skill, you can view the description and input schema used for agentic interactions. You can also disable the MCP skills that you don’t want the AI model to use.
Initiate a chat session and ask a question related to ThoughtSpot embedding, REST APIs, or the SDKs.

In the following example, a chat session with Cursor AI is initiated with the prompt, "I want to embed a ThoughtSpot Liveboard in my React application. Use the available tools to get this information and generate the embed code". Notice how the AI agent uses the SpotterCode skills to get the required information:
Verify that the AI Agent is able to discover SpotterCode skills and is using these skills to generate a response.
Review the response returned for your prompt and verify the results.

The following example shows how Cursor AI scaffolds the embed code using the SpotterCode skills. Notice that the AI agent identifies and lists the minimum configuration settings, such as the ThoughtSpot host URL, Liveboard ID, and authentication attributes, required to complete the embedding.
When you are prompted to provide additional information, specify these details to continue with the embedding as shown in the following example:
Try additional prompts such as adding custom styles, hiding UI menu actions, and more.

Additional resources🔗

For prompt examples, see Prompt examples and best practices.
For troubleshooting tips and workarounds, refer to the Troubleshooting section.