Storyblok MCP Client

Faster CMS Integration

Storyblok MCP Client is a tool that connects @storyblokcom, a headless CMS, with an AI agent through Model Context Protocol (MCP), enabling AI agents to interact with the CMS using human language 🙊

This makes it super easy to pull Storyblok content straight into the client app (eg. Cursor IDE) without manual API calls or extra setup.

📢 In this article: I’ll walk you through setting up the Storyblok MCP Client in the Cursor IDE, including:

Creating a Storyblok Personal Access Token
Configuring Cursor IDE’s MCP Server
Create new Storyblok space from Cursor IDE chat prompt and fetching component type definitions.

⚡ TL;DR

📦 NPM Package: @slvrio/storyblok-mcp-client
🔗 GitHub Repo: Storyblok MCP Client

So, Storyblok MCP ... wtf? 🤨

Working with a headless CMS usually means managing API calls and dealing with custom integrations. Storyblok MCP Client (server) flips all that on its head, letting AI agents access Storyblok content directly and interact with it using human language in chat prompts. 🙌

How It Works

Storyblok MCP Client (server) acts as a bridge between Storyblok’s API and AI agents, providing additional context to the AI agents through MCP tools. ⚡

✨ Available Tools (as of `v.0.0.1`)

spaces_create — Create a new Storyblok space.
spaces_get — Retrieve a list of Storyblok spaces.
components_get — Fetch all components within a space.
component_get — Retrieve a specific component by ID.
typedefs_get — Generate TypeScript type definitions for components.

Setup

Let's get started with setting up everything we need for the Storyblok MCP Client!

Create a Storyblok Personal Access Token (PAT)
Configure Cursor IDE’s MCP Server
Create a new space directly from Cursor IDE’s chat prompt and fetch Storyblok component type definitions

Let’s walk through each step to get everything up and running smoothly! 😎

1. 🔑 Create a Storyblok Personal Access Token (PAT)

First of all make sure to create an account at Storyblok.com, if you dont have one.

Navigate to: My Account 👉 Account Settings 👉 Personal access token
Click on Generate new token, fill in the fields:
- Name: Any name
- Expiration: Select token expiration date (default 30days)
Click Generate & Copy token

Note. Please copy this personal access token now. It will be visible only once

View high resolution screenshot here

2. ⚙️ Configure Cursor IDE’s MCP Server

Open Cursor IDE settings
Navigate to the MCP tab
Click on Add new MCP server
Fill in the fields:
- Name: Any name
- Type: command
- Command: npx -y @slvrio/storyblok-mcp-client --token=<YOUR_STORYBLOK_PAT_FROM_STEP_1>
Click Save

View high resolution screenshot here

⚠️ Cursor v0.47.8

In Cursor v0.47.8, MCP server configurations are managed in mcp.json.

To setup Storyblok MCP Client, simply add the following config under the mcpServers object:

"Storyblok": {
  "command": "npx",
  "args": [
    "-y",
    "@slvrio/storyblok-mcp-client",
    "--token=<YOUR_STORYBLOK_PAT_FROM_STEP_1>"
  ]
}

Note. You can also define the STORYBLOK_PERSONAL_API_TOKEN as environment variable, if set you can omit --token argument in the command.

View high resolution screenshot here

3. 🤖 Let's Chat

3.1 Create new Storyblok space

To create a new space, go to the chat (cmd+i), type the following prompt, and press Enter:

Create new storyblok space with name "Hello, world!"

Tool spaces_create

View high resolution screenshot here

Once the space is created, you'll see the metadata, including the Space ID

To view and list all your Storyblok spaces, type:

List my storyblok spaces

Tool spaces_get

3.2 View available Storyblok components

To view the components for your Storyblok space, type the following prompt and press Enter:

List all components for space #<SPACE_ID>

Tool components_get
Note: The SPACE_ID is conditionally required. You can either:

Use the Space ID from Step 1 and pass it with prompt text,

Set the STORYBLOK_SPACE_ID environment variable,

Or pass the --space_id argument directly in the command.

View high resolution screenshot here

3.3 Typescript. Fetch Storyblok component type definitions

To generate TypeScript type definitions for your Storyblok components, type the following prompt and press Enter:

Fetch ts types for components in storyblok space #<SPACE_ID>

Tool typedefs_get

This will fetch the type definitions, making it easier to integrate Storyblok components into your TypeScript-based project. 📦

Uff, that's it! With Storyblok MCP Client, we’ve enabled natural language interactions with the Storyblok API directly in the Cursor IDE chat. We’ve explored how to set up the MCP server, manage Storyblok spaces, and fetch component types.

Thanks for reading! 🙌

Yevheni Kshevitskyi @kshevitsky