#Swiper Studio MCP Server

#Overview

The Swiper Studio MCP (Model Context Protocol) Server lets AI assistants programmatically create, edit, and manage Swiper slider projects. Connect your favorite AI coding tool and build sliders with natural language - create slides, add content, configure effects, upload images, take screenshots, and set responsive breakpoints.

#Key Features

Full Project Management - Create, update, and delete slider projects
Slide Content Editing - Add text, images, videos, and nested block layouts
22 Swiper Effects - Configure any effect with full parameter control
Responsive Breakpoints - Mobile-first design with per-breakpoint overrides for project, slides, and child elements
Visual Verification - Take screenshots at any device size to verify your work
File Upload - Upload images and videos directly to the CDN
Reference Documentation - Built-in docs the AI can query for available options

#Server Information

Protocol: MCP (Model Context Protocol) via JSON-RPC 2.0
Transport: Streamable HTTP (POST/GET)
Endpoint: https://studio.swiperjs.com/mcp
Authentication: OAuth 2.0 with PKCE (auto-handled by MCP clients)

#Setup Instructions

#Claude Code

claude mcp add --transport http swiper-studio https://studio.swiperjs.com/mcp

On first use, Claude Code will open a browser window for OAuth authentication. Sign in with your Swiper Studio account and click Allow to grant access.

Verify the connection:

claude mcp list

Or within Claude Code, use the /mcp command to check server status.

Scopes:

# Local (default) - only you, current project
claude mcp add --transport http swiper-studio https://studio.swiperjs.com/mcp

# Project - shared with team via .mcp.json
claude mcp add --transport http swiper-studio --scope project https://studio.swiperjs.com/mcp

# User - available across all your projects
claude mcp add --transport http swiper-studio --scope user https://studio.swiperjs.com/mcp

Remove the server:

claude mcp remove swiper-studio

#Cursor

Open Cursor Settings, navigate to Tools & MCP, and add a new MCP server. Or edit your .cursor/mcp.json:

{
  "mcpServers": {
    "swiper-studio": {
      "url": "https://studio.swiperjs.com/mcp"
    }
  }
}

#VS Code

Create a .vscode/mcp.json file in your workspace:

{
  "servers": {
    "swiper-studio": {
      "type": "http",
      "url": "https://studio.swiperjs.com/mcp"
    }
  }
}

Or use the Command Palette: MCP: Add Server and select HTTP transport with the URL https://studio.swiperjs.com/mcp.

#Codex (OpenAI)

codex mcp add swiper-studio --url https://studio.swiperjs.com/mcp

Or edit ~/.codex/config.toml:

[mcp_servers.swiper-studio]
url = "https://studio.swiperjs.com/mcp"

#OpenCode

Add to your opencode.jsonc:

{
  "mcp": {
    "swiper-studio": {
      "type": "remote",
      "url": "https://studio.swiperjs.com/mcp",
      "enabled": true
    }
  }
}

#Authentication

Swiper Studio MCP uses OAuth 2.0 with PKCE for secure authentication. This is handled automatically by MCP clients:

On first connection, your MCP client opens a browser window
Sign in with your Swiper Studio account (email, Google, GitHub, or SSO)
Click Allow on the consent screen to grant access
The MCP client receives an access token and stores it for future sessions

An active Swiper Studio subscription is required. Tokens refresh automatically - you only need to authenticate once.

#Available Tools

Swiper Studio MCP provides 24 tools organized into 6 categories.

#Project Tools

Tool	Description
`create_project`	Create a new project with optional initial settings (effect, navigation, pagination, etc.)
`get_project`	Get full project details including all settings and slide list
`update_project`	Update Swiper params - effect, speed, direction, navigation, pagination, autoplay, and more
`update_project_style`	Update slider container styles - size, padding, aspect ratio, font
`delete_project`	Delete a project and all its assets

#Slide Tools

Tool	Description
`add_slide`	Add a new slide with background color, media, layout, and padding
`update_slide`	Update slide properties - background, media, layout, borders
`delete_slide`	Remove a slide (minimum 1 must remain)
`list_slides`	List all slides with summary info
`duplicate_slide`	Deep clone a slide with all children and new IDs
`set_slide_breakpoint`	Set responsive breakpoint styles for a slide (bg, layout, borders, padding)

#Content Tools

Tool	Description
`add_text`	Add text with font size, color, alignment, bold/italic, and animations
`add_image`	Add an image with sizing, borders, and animations
`add_video`	Add a video with sizing, borders, loop, and animations
`add_block`	Add a container block or clickable link. Nest content inside with `parent_id`
`update_child`	Update any child element's properties
`remove_child`	Remove a child element
`get_slide_children`	Get the full children tree for a slide
`set_child_breakpoint`	Set responsive breakpoint styles for a child element (per type)

#Responsive Tools

Tool	Description
`set_breakpoint`	Set responsive overrides at a screen width (768, 812, 1024, 1280, 1920)
`remove_breakpoint`	Remove a responsive breakpoint

#Utility Tools

Tool	Description
`get_slide_screenshot`	Capture a screenshot at any device size (phone, tablet, laptop, desktop)
`get_upload_token`	Generate a temporary token for uploading files to the project CDN
`get_reference`	Get built-in documentation on child types, layout, animations, effects, breakpoints, and more

#Core Concepts

#Project Hierarchy

Project
  -> Slides (ordered list)
    -> Children (text, image, video, block)
      -> Nested children (blocks can contain more children)

#Mobile-First Design

Base project parameters apply at the smallest viewport (375px). Use set_breakpoint to override project params, set_slide_breakpoint for per-slide styles, and set_child_breakpoint for per-child styles at larger screen widths:

Breakpoint	Typical Device
768	Tablet portrait
812	Phone landscape
1024	Tablet landscape
1280	Laptop
1920	Desktop

#Layout System

Children are positioned with flexbox, not absolute positioning. Each slide and block has:

content_direction - "row" or "column"
content_position - 12 values like "center", "left-top", "space-between-center"
content_gap - spacing between children in px

#Creating Links

There is no standalone link element. To create a clickable link:

Add a block with element: "link" and link_href
Nest text or images inside using parent_id

#Colors

All colors use hex format: #rrggbb or #rrggbbaa (with alpha).

#Sizing

Element dimensions use a type + value system:

auto - sized by content
relative - percentage of parent (0-100)
fixed - exact pixel value

#Usage Examples

#Create a Simple Slider

You: Create a 3-slide image slider with navigation arrows and autoplay

AI will:
1. create_project({ title: "Image Slider", navigation: { enabled: true }, autoplay: { enabled: true, delay: 3000 } })
2. update_slide({ slide_id, bg_color: "#1a1a2e", image_url: "https://..." })
3. add_slide({ bg_color: "#16213e", image_url: "https://..." })
4. add_slide({ bg_color: "#0f3460", image_url: "https://..." })
5. get_slide_screenshot({ project_id })

#Build a Card Layout

You: Create a slide with three product cards side by side

AI will:
1. update_slide({ content_direction: "row", content_position: "center", content_gap: 24 })
2. For each card:
   a. add_block({ content_direction: "column", bg_color: "#ffffff10", border_radius: 16,
        padding_horizontal: 24, padding_vertical: 24, width_type: "fixed", width_fixed: 300 })
   b. add_image({ parent_id: <block>, url: "https://...", width_type: "relative", width_relative: 100 })
   c. add_text({ parent_id: <block>, content: "Product Name", font_size: 20, font_bold: true })
   d. add_text({ parent_id: <block>, content: "$29.99", font_size: 16, color: "#60a5fa" })

#Add Entry Animations

You: Add animated text that fades in with staggered timing

AI will:
1. add_text({ content: "Welcome", font_size: 48, animation: { type: "fade", delay: 0 } })
2. add_text({ content: "To Our Store", font_size: 32, animation: { type: "fade", delay: 300 } })
3. add_text({ content: "Shop Now", font_size: 18, animation: { type: "zoom", delay: 600 } })

20+ animation types are available including fade, zoom, slide, scale, blur, rotate, and text-specific ones like typewriter, letter-blur, letter-fade, letter-scale, and number-roll.

#Upload and Use Custom Images

You: Upload my product photo and add it to the slider

AI will:
1. get_upload_token({ project_id })
2. Save and execute the upload script:
   node upload.js <token> <project_id> /path/to/photo.jpg
3. add_image({ slide_id, url: "<returned_cdn_url>", fill: "cover" })

The upload token is valid for 30 minutes. Supported formats: JPG, PNG, GIF, WebP, SVG, MP4, WebM, MOV.

#Configure Swiper Effects

You: Set up a creative 3D card flip effect with shadow

AI will:
1. update_project({
     effect: "creative",
     speed: 800,
     creative_effect: {
       limit_progress: 2,
       prev: { translate: ["-120%", "0%", -500], rotate: [0, 0, -15], opacity: 0, shadow: true },
       next: { translate: ["120%", "0%", -500], rotate: [0, 0, 15], opacity: 0, shadow: true }
     }
   })

Available effects: slide, fade, cube, flip, coverflow, cards, panorama, carousel, shutters, slicer, gl, tinder, material, cards-stack, expo, super-flow, creative.

#Responsive Design with Breakpoints

You: Make the slider full-screen portrait on mobile, 16:9 on desktop

AI will:
1. update_project_style({ size_type: "aspect-ratio", aspect_ratio: [9, 16] })
   // Base params = mobile (375px)

2. set_breakpoint({ width: 768, size_type: "aspect-ratio", aspect_ratio: [16, 9] })
   // Override for tablet and up

3. get_slide_screenshot({ device: "phone-portrait" })
   // Verify mobile

4. get_slide_screenshot({ device: "desktop" })
   // Verify desktop

#Preview at Different Screen Sizes

You: Show me how this looks on mobile vs desktop

AI will:
1. get_slide_screenshot({ device: "phone-portrait" })   // 375x812
2. get_slide_screenshot({ device: "tablet-landscape" })  // 1024x768
3. get_slide_screenshot({ device: "desktop" })           // 1920x1080

Available device presets: phone-portrait (375x812), phone-landscape (812x375), tablet-portrait (768x1024), tablet-landscape (1024x768), laptop (1280x800), desktop (1920x1080), responsive (based on slider style settings).

#Full Portfolio Slideshow

Here is a complete example building a multi-slide portfolio with uploaded logos, custom backgrounds, animated content, clickable links, and responsive breakpoints:

You: Build a portfolio slideshow for my 5 projects with their logos, dark theme,
     creative transitions, and links to each website

AI will:
1. create_project({ title: "Portfolio", effect: "creative", speed: 800,
     loop: true, navigation: { enabled: true }, pagination: { enabled: true },
     autoplay: { enabled: true, delay: 4000, pause_on_mouse_enter: true },
     creative_effect: {
       prev: { translate: ["-120%", 0, -500], rotate: [0, 0, -15], opacity: 0, shadow: true },
       next: { translate: ["120%", 0, -500], rotate: [0, 0, 15], opacity: 0, shadow: true }
     }
   })
2. update_project_style({ size_type: "aspect-ratio", aspect_ratio: [9, 16], font_family: "Inter" })
3. set_breakpoint({ width: 768, size_type: "aspect-ratio", aspect_ratio: [16, 9] })

4. get_upload_token({ project_id })
5. Upload logos via the upload script

6. For each project slide:
   a. add_slide / update_slide({ bg_color: "#0f0f1a", content_position: "center", content_gap: 24 })
   b. add_image({ url: "<logo_cdn_url>", height_type: "relative", height_relative: 15,
        animation: { type: "zoom", delay: 0 } })
   c. add_text({ content: "Project Name", font_size: 56, font_bold: true,
        animation: { type: "fade", delay: 200 } })
   d. add_text({ content: "Description text...", font_size: 20, color: "#ffffffaa",
        animation: { type: "fade", delay: 400 } })
   e. add_block({ element: "link", link_href: "https://example.com", link_target: "_blank",
        animation: { type: "fade", delay: 600 } })
   f. add_text({ parent_id: <link_block>, content: "example.com", color: "#60a5fa" })

7. get_slide_screenshot({ slide_index: 0, device: "phone-portrait" })
8. get_slide_screenshot({ slide_index: 0, device: "desktop" })

#Built-In Reference

AI assistants can call get_reference to access documentation on any topic without leaving the conversation:

Topic	What It Covers
`demo_images`	Built-in library of free images (nature, models, gradients, workspace, movies) with URLs
`child_types`	All 4 content types with full property lists and how to create links
`layout_system`	Flexbox positioning - directions, 12 position values, nesting
`animations`	All 20+ animation types, text-only animations, animation params
`effects`	All 16 Swiper effects with descriptions and effect-specific params
`swiper_params`	Every core param and module param with sub-properties
`color_format`	Hex format, alpha, common color values
`sizing`	Width/height type system (auto, relative, fixed), max-width for blocks
`slide_content`	Slide properties - backgrounds, media, layout, borders
`breakpoints`	Responsive system, available breakpoints, breakpointable params
`file_upload`	Upload flow with embedded Node.js upload script
`examples`	Common workflow patterns and step-by-step recipes