---
title: "Prismic with AI"
description: "Learn how to use Prismic's AI features in your development workflow."
category: "concepts"
audience: developers
lastUpdated: "2025-12-08T20:47:40.000Z"
---
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 designs to slices
Prismic provides two ways to convert designs to slices:
* **Figma**: Convert a Figma frame to a slice via the [Figma to Prismic slice](https://www.figma.com/community/plugin/1567955296461153730) plugin.
* **Slice Machine**: Convert a design to a slice using Slice Machine's **Generate from image** option.
## Convert a Figma design to a slice
Convert a Figma frame to a slice using the [Figma to Prismic slice](https://www.figma.com/community/plugin/1567955296461153730) plugin. The plugin sees your design and builds a content model and component to match.
1. **Install the Figma plugin**
In Figma, open the **Actions** K menu and select the **Plugins & widgets** tab.
Search "Figma to Prismic slice," select the plugin, and click **Save**.
> You only need to install the plugin once.
2. **Select a frame**
In your design, select the frame you want to convert to a slice.
3. **Export the slice**
Open the **Actions** K menu, search for "Figma to Prismic Slice," and select the plugin.
In dialog that appears, click the **Export Slice** button.
4. **Open Slice Machine**
In your Prismic project, start Slice Machine to begin editing content models.
```sh
npx start-slicemachine --open
```
5. **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**.
> You can also add a slice from the **Slices** tab of the left sidebar.
6. **Paste the Figma export**
Click the **Paste from Figma** button or press V.
Once processed, click the **Generate slices** button to add your newly created slice.
7. **(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.
## Convert a slice design to a slice
Convert a design to a slice using [Slice Machine](https://prismic.io/docs/slice-machine.md)'s **Generate from image** option. The slice name and its fields are inferred from the uploaded design.
1. **Open Slice Machine**
In your Prismic project, start Slice Machine to begin editing content models.
```sh
npx start-slicemachine --open
```
2. **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**.
> You can also add a slice from the **Slices** tab of the left sidebar.
3. **Upload your slice's design**
Upload your slice's design as an image in the file picker that appears.
> You can upload multiple slice designs at a time.
Once processed, click the **Generate slices** button to add your newly created slice.
4. **(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 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
1. **Add Prismic's MCP Server to your code editor**
How you add Prismic's MCP server depends on which code editor you are using.
* **Cursor:**
{/* We need to declare a variable to prevent Prettier from formatting the button */}
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](https://docs.cursor.com/context/model-context-protocol#manual-configuration):
```json
{
"mcpServers": {
"prismic": {
"command": "npx",
"args": ["-y", "@prismicio/mcp-server@latest"]
}
}
}
```
* **Claude Code:**
Run the following command in your terminal:
```sh
claude mcp add prismic -- npx -y @prismicio/mcp-server@latest
```
* **Others:**
Add the following MCP server to your editor's MCP server configuration:
* **Name**: prismic
* **Command**: `npx`
* **Arguments**: `["-y", "@prismicio/mcp-server@latest"]`
2. **Use a model optimized for coding**
For optimal results, configure your editor to use the latest version of your preferred model.
> We recommend **Claude Sonnet 4.5**, **GPT-5.1**, or later versions.
3. **Start using the MCP server**
Direct your editor to a [slice component file](https://prismic.io/docs/slices.md#slice-components) 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?"