Visual headless CMS
## Storyblok MCP Server: Visual Headless CMS The **Storyblok MCP Server** integrates Storyblok into Google Antigravity, enabling visual content editing with real-time preview, nested components, and multi-site management directly from your development environment. ### Why Storyblok MCP? - **Visual Editor**: True WYSIWYG editing with component-based architecture - **Real-Time Preview**: Instant preview of changes before publishing - **Nested Components**: Unlimited nesting of reusable components - **Multi-Site**: Manage multiple sites from a single space - **Field Plugins**: Extend the editor with custom field types ### Key Features #### 1. Story Management ```python # Get story by slug story = await mcp.get_story( slug="home", version="published", # or "draft" resolve_relations="blog_post.author" ) print(f"Title: {story['content']['title']}") # List stories stories = await mcp.get_stories( starts_with="blog/", sort_by="created_at:desc", per_page=10, filter_query={"category": {"in": "technology"}} ) ``` #### 2. Content Operations ```python # Create story story = await mcp.create_story( name="New Article", slug="new-article", parent_id=123, # folder ID content={ "component": "blog_post", "title": "New Article", "body": "Article content...", "author": "author_uuid" } ) # Update story await mcp.update_story( story_id=story["id"], content={ "component": "blog_post", "title": "Updated Title", "body": "Updated content..." } ) # Publish story await mcp.publish_story(story_id=story["id"]) ``` #### 3. Component Management ```python # List components components = await mcp.get_components() for comp in components: print(f"Component: {comp['name']} ({comp['id']})") # Get component schema schema = await mcp.get_component(component_id=123) for field in schema["schema"]: print(f"Field: {field} - {schema['schema'][field]['type']}") ``` #### 4. Asset Operations ```python # Upload asset asset = await mcp.upload_asset( file_path="./images/hero.jpg", filename="hero.jpg" ) print(f"URL: {asset['filename']}") # List assets assets = await mcp.get_assets( folder_id=123, per_page=25 ) ``` ### Configuration ```json { "mcpServers": { "storyblok": { "command": "npx", "args": ["-y", "@anthropic/mcp-storyblok"], "env": { "STORYBLOK_API_TOKEN": "your-api-token", "STORYBLOK_SPACE_ID": "your-space-id", "STORYBLOK_OAUTH_TOKEN": "your-oauth-token" } } } } ``` ### Use Cases **Marketing Websites**: Enable marketers to build pages visually while developers maintain component library. **Multi-Site Management**: Manage multiple brand sites or regional sites from a single Storyblok space. **E-commerce Content**: Combine with commerce platforms for rich product pages and landing pages. **Documentation Sites**: Build documentation with nested navigation and versioned content. The Storyblok MCP enables visual content management within your development environment.
{
"mcpServers": {
"storyblok": {
"mcpServers": {
"storyblok": {
"env": {
"STORYBLOK_TOKEN": "your-access-token"
},
"args": [
"-y",
"storyblok-mcp-server"
],
"command": "npx"
}
}
}
}
}