Prismic with AI

Prismic provides AI-powered developer features and integrates with your AI tool of choice. We recommend using these features to build faster, more consistently, and with less manual effort.

Convert slice designs to models

Convert slice designs to content models automatically using Slice Machine. The slice name and its fields are inferred from the uploaded design.

How to convert a slice design to a model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a slice

  In Slice Machine, navigate to the page type you want to update using the sidebar.

  In the page type’s Slices section, click the Add button and choose Generate from image.

  

• Upload your slice’s design

  Upload your slice’s design as an image in the file picker that appears.

  

  Once processed, click the “Add to page” button to use your newly created slice.

• (Optional) Customize your slice

  Click through to your newly created slice. You can edit its fields, add variations, and customize it the way you would any other slice.

Code with Prismic’s MCP server

Prismic’s Model Context Provider (MCP) server allows you to code slices using AI editors, including Cursor, Windsurf, and Claude Code.

The MCP server inspects your project setup and shares the following details with your AI code assistant:

• Your slice models and their field configurations

• How to use Prismic SDKs specifically for your content

• The framework being used (Next.js, Nuxt, SvelteKit)

• Styling approach and conventions (Tailwind CSS, CSS modules, etc.)

• Prismic SDK configuration and setup

• TypeScript configuration and usage patterns

• Existing slice component structure and patterns

How to connect Prismic’s MCP server

• Add Prismic’s MCP Server to your code editor

  How you add Prismic’s MCP server depends on which code editor you are using.

  CursorWindsurfClaude CodeOthers

  Click the following button to add the MCP server to Cursor:

  Add to Cursor

  Alternatively, you can add the following config to your mcp_config.json file:

  {
    "mcpServers": {
      "prismic": {
        "command": "npx",
        "args": ["-y", "@prismicio/mcp-server@latest"]
      }
    }
  }

• Use a model optimized for coding

  For optimal results, configure your editor to use the latest version of your preferred model.

• Start using the MCP server

  Direct your editor to a slice component file and ask it for coding assistance.

  For example:

  • “Code this slice.”
  • “How do I display an image field?”
  • “How do I use rich text fields?”