Storyblok MCP server for AI agents

Storyblok MCP Server connects AI tools to Storyblok, allowing you to manage your CMS using natural language. This server acts as a middleman between AI clients (like Cursor or Claude Desktop) and Storyblok, enabling seamless content management through conversational interfaces.

Installation

Prerequisites

Before installing the Storyblok MCP Server, you'll need:

Node.js installed on your system
A Storyblok account with management API access
API tokens for Storyblok
Google Generative AI API key (for AI features)

Setup Steps

Clone the repository:

git clone https://github.com/ArjunCodess/storyblok-mcp.git
cd storyblok-mcp

Install dependencies:
```
pnpm install
```
Run the server:
```
pnpm start
```

Connecting with AI Tools

Integration with Cursor

Open Cursor in the same directory as your MCP server
Right-click on the build/index.js file and select Copy Path
Navigate to Settings → MCP Tools
Click on New MCP Server

In the opened mcp.json file, paste the following configuration:

{
  "mcpServers": {
    "storyblok": {
      "command": "node PATH_YOU_COPIED",
      "env": {
        "STORYBLOK_SPACE_ID": "your_space_id",
        "STORYBLOK_MANAGEMENT_TOKEN": "your_management_token",
        "STORYBLOK_DEFAULT_PUBLIC_TOKEN": "your_public_token",
        "GOOGLE_GENERATIVE_AI_API_KEY": "your_gemini_ai_api_key"
      }
    }
  }
}

Replace PATH_YOU_COPIED with the path you copied in step 2
Add your actual Storyblok and Google AI API credentials

Available Tools and Features

Content Management

The MCP server provides tools in several categories for managing your Storyblok content:

Story Management

Fetch, create, update, and delete stories
Publish and unpublish content
Manage story versions and restore previous versions
Import stories with language settings

Tag Management

List, create, and delete tags
Add tags to stories

Component Management

Fetch, create, update, and delete components
Manage component folders

Asset Management

List, upload, and delete assets
Organize assets in folders

Advanced Features

AI Tools

Generate alt text for images
Translate story content
Create SEO-friendly meta tags
Summarize story content
Auto-tag stories using AI

Workflow Management

Create and manage content workflows
Set up workflow stages
Track workflow stage changes

Pipeline Management

Create and manage branches
Deploy branches
Compare and copy stories between branches

Example Usage

Here are some examples of how to use the MCP server with natural language commands:

Basic Content Management

"List all stories in my Storyblok space"
"Create a new blog post titled 'Getting Started with Storyblok'"
"Publish the story with ID 12345"
"Update the hero image for the homepage"

Using AI Features

"Generate alt text for all images in the latest blog post"
"Translate the About Us page to Spanish"
"Create SEO meta tags for the product page"
"Summarize the content of story ID 67890"

Workflow and Pipelines

"Move the 'Product Launch' story to the 'Ready for Review' stage"
"Create a new branch called 'feature-redesign'"
"Compare content between main and staging branches"
"Deploy the staging branch"

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "storyblok" '{"command":"node","args":["PATH_YOU_COPIED"],"env":{"STORYBLOK_SPACE_ID":"your_space_id","STORYBLOK_MANAGEMENT_TOKEN":"your_management_token","STORYBLOK_DEFAULT_PUBLIC_TOKEN":"your_public_token","GOOGLE_GENERATIVE_AI_API_KEY":"your_gemini_ai_api_key"}}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "storyblok": {
            "command": "node",
            "args": [
                "PATH_YOU_COPIED"
            ],
            "env": {
                "STORYBLOK_SPACE_ID": "your_space_id",
                "STORYBLOK_MANAGEMENT_TOKEN": "your_management_token",
                "STORYBLOK_DEFAULT_PUBLIC_TOKEN": "your_public_token",
                "GOOGLE_GENERATIVE_AI_API_KEY": "your_gemini_ai_api_key"
            }
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "storyblok": {
            "command": "node",
            "args": [
                "PATH_YOU_COPIED"
            ],
            "env": {
                "STORYBLOK_SPACE_ID": "your_space_id",
                "STORYBLOK_MANAGEMENT_TOKEN": "your_management_token",
                "STORYBLOK_DEFAULT_PUBLIC_TOKEN": "your_public_token",
                "GOOGLE_GENERATIVE_AI_API_KEY": "your_gemini_ai_api_key"
            }
        }
    }
}

3. Restart Claude Desktop for the changes to take effect