Cursor IDE Configuration

This guide shows you how to connect BlokMCP to Cursor - the AI-powered code editor that combines development with MCP capabilities.

Overview

Cursor is a fork of VS Code with deep AI integration and MCP support. It's perfect for developers who want to combine code editing with Storyblok content management in a single workspace.

What you'll need:

Cursor installed (download here)
Your BlokMCP API key (from dashboard)
Basic familiarity with JSON configuration files

Step 1: Open Cursor Settings

There are several ways to open the Cursor settings where you'll configure MCP servers:

Method 1: Command Palette

Open Command Palette:
- macOS: Cmd + Shift + P
- Windows/Linux: Ctrl + Shift + P
Type: Preferences: Open User Settings (JSON)
Press Enter

Method 2: Settings UI

Open Settings:
- macOS: Cmd + ,
- Windows/Linux: Ctrl + ,
Click the Open Settings (JSON) icon in the top right corner

Method 3: Direct File Access

macOS:

~/.cursor/User/settings.json

Windows:

%APPDATA%\Cursor\User\settings.json

Linux:

~/.config/Cursor/User/settings.json

Step 2: Add MCP Server Configuration

In your settings.json file, add the MCP server configuration.

If you don't have any MCP servers configured:

Add this to your settings.json:

{
  "mcp": {
    "servers": {
      "storyblok": {
        "url": "https://mcp.blokmcp.com",
        "headers": {
          "X-Api-Key": "sb_mcp_your_api_key_here"
        }
      }
    }
  }
}

If you already have MCP servers configured:

Add the BlokMCP configuration to your existing mcp.servers object:

{
  "mcp": {
    "servers": {
      "existing-server": {
        "url": "https://existing-server.com"
      },
      "storyblok": {
        "url": "https://mcp.blokmcp.com",
        "headers": {
          "X-Api-Key": "sb_mcp_your_api_key_here"
        }
      }
    }
  },
  "other-settings": "..."
}

Important: Replace sb_mcp_your_api_key_here with your actual API key from the BlokMCP dashboard.

Step 3: Reload Cursor

After saving the settings:

Open Command Palette (Cmd/Ctrl + Shift + P)
Type: Developer: Reload Window
Press Enter

Or simply:

Close and reopen Cursor

Step 4: Verify the Connection

After reloading, verify that BlokMCP is connected:

Open the Cursor AI chat panel
Type @ in the chat input
You should see @storyblok as an available context
Or start a new chat and ask:

List my Storyblok tools

You should see BlokMCP tools like fetch_stories, get_story, etc.

Step 5: Test Your Setup

Try a simple conversation to test the connection:

@storyblok Show me my recent stories

Or:

@storyblok What components are available in my space?

Cursor should respond with information from your Storyblok space.

Advanced Configuration

Multiple Storyblok Spaces

If you have multiple Storyblok spaces, you can create separate MCP server configurations for each:

{
  "mcp": {
    "servers": {
      "storyblok-production": {
        "url": "https://mcp.blokmcp.com",
        "headers": {
          "X-Api-Key": "sb_mcp_your_api_key_here",
          "X-Storyblok-Space-Id": "123456"
        }
      },
      "storyblok-staging": {
        "url": "https://mcp.blokmcp.com",
        "headers": {
          "X-Api-Key": "sb_mcp_your_api_key_here",
          "X-Storyblok-Space-Id": "789012"
        }
      }
    }
  }
}

Then in Cursor, you can use:

@storyblok-production for production space
@storyblok-staging for staging space

Workspace-Specific Configuration

You can also configure MCP servers per workspace (project):

Open your project in Cursor
Create .cursor/settings.json in your project root
Add the MCP configuration there

This is useful when:

Different projects use different Storyblok spaces
You want project-specific API keys for team collaboration
You're working on multiple Storyblok projects

Example .cursor/settings.json:

{
  "mcp": {
    "servers": {
      "storyblok": {
        "url": "https://mcp.blokmcp.com",
        "headers": {
          "X-Api-Key": "sb_mcp_project_specific_key",
          "X-Storyblok-Space-Id": "123456"
        }
      }
    }
  }
}

Use Cases for Cursor + BlokMCP

Cursor's code editor + BlokMCP combination is perfect for:

1. Component Development

@storyblok Show me the schema for the "blog_post" component

Then continue working on your Vue/React components based on the schema.

2. Content Seeding

@storyblok Create 10 sample blog posts for testing

While you're developing your frontend.

3. Schema Migrations

@storyblok Add a new "author_bio" field to all blog posts

And update your code accordingly.

4. Debugging Content Issues

@storyblok Why is this story not publishing?

Get diagnostics without leaving your IDE.

5. Bulk Operations

@storyblok Update all stories in the "blog" folder to use the new component schema

Troubleshooting

MCP Server Not Appearing

Check these:

Is the JSON syntax correct? Look for:
- Missing commas between entries
- Missing quotes around keys/values
- Unclosed braces {}
Did you reload Cursor after saving settings?
Is your API key correct?

Solution:

Use a JSON validator to check syntax
Check the Cursor developer console for errors:
- Help → Toggle Developer Tools
- Look for MCP-related errors in the console