---
title: "Prismic with AI"
description: "Learn how to use Prismic's AI features in your development workflow."
category: "concepts"
audience: developers
lastUpdated: "2026-10-13T23:04:37.000Z"
---

Prismic supports AI tools like [Claude Code](https://claude.com/product/claude-code), [Codex](https://openai.com/codex/), and [Cursor](https://cursor.com/) to develop websites. Agents use a [skill](#install-the-skill) and the [Prismic CLI](https://prismic.io/docs/cli.md) to build and configure Prismic websites, and the [Prismic MCP server](https://prismic.io/docs/mcp.md) to manage content.

We recommend using the latest **Claude** or **GPT** models when building websites with Prismic.

> Prismic's documentation is written for humans and AI agents. The skill teaches your agent to read Prismic's documentation as it builds.

# Install the skill

To start, install the Prismic [skill](https://agentskills.io/):

```sh
npx skills add --global --yes prismicio/skills
```

The skill teaches agents about Prismic and how to use the [Prismic CLI](https://prismic.io/docs/cli.md).

# Build websites with AI

Once the [skill is installed](#install-the-skill), work with your AI agent to build a website.

You can start a new Prismic website with a prompt like this:

```md filename=Prompt
Build a new Next.js website using Prismic as the CMS. Use the Prismic docs
to guide you:

npx prismic docs list
npx prismic docs view nextjs

I need a singular "Homepage" page type, a repeatable "Page" page type, and
a singular "Settings" custom type for global website settings.

Before you start, ask me about the design and what slices I'll need.
```

Customize the prompt based on your needs. For example, replace [Next.js](https://prismic.io/docs/nextjs.md) with [Nuxt](https://prismic.io/docs/nuxt.md) or [SvelteKit](https://prismic.io/docs/sveltekit.md), or specify which CSS library to use.

## Create slices

Your agent will use the [Prismic CLI](https://prismic.io/docs/cli.md)'s `slice` and `field` commands to model [slices](https://prismic.io/docs/slices.md). Once modeled, your agent can build React, Vue, or Svelte components for slices depending on your website's framework.

You can create a new slice with a prompt like this:

```md filename=Prompt
Create a Call to Action slice with a heading, a short description, and a
CTA button link. Use the Prismic docs to guide you:

npx prismic docs view slices

Make it available to the Homepage and Page types.
```

If you have designs available, provide it to the agent to infer fields and the component's code.

[Learn more about slices](https://prismic.io/docs/slices.md)

## Configure your repository

Your agent can manage your Prismic repository using the [Prismic CLI](https://prismic.io/docs/cli.md). Settings like webhooks, previews, and locales are accessible via CLI commands.

Here are some example prompts:

### Preview management

```md
Add a content preview for the staging domain: https://staging.example.com
```

```md
Remove the development content preview in Prismic.
```

### Multi-locale support

```md
Which languages are supported in the Prismic repo?
```

```md
Add multi-locale support, starting with French.
```

```md
Remove the English locale in Prismic.
```

### Prepare for production

```md
The production website is deployed to https://example.com. Configure the Prismic
repository for that domain.
```

## Write content

Your agent writes content with the [Prismic MCP server](https://prismic.io/docs/mcp.md). [Connect it](https://prismic.io/docs/mcp.md#connect-to-the-mcp-server) first.

Here are some example prompts:

```md
Fill the website with sample content for every page type, then publish it.
```

```md
Write a blog post announcing our new pricing page. Don't publish it yet.
```

# Migrate to Prismic

Your agent can migrate content from a different CMS to Prismic. It exports your content, models it with the [Prismic CLI](https://prismic.io/docs/cli.md), and imports it with the [Prismic MCP server](https://prismic.io/docs/mcp.md).

You can start a migration with a prompt like this:

```md filename=Prompt
Migrate the blog from https://example.com to a new Next.js website with
Prismic. The site uses WordPress. Keep the existing URLs. Follow the
migration guide: npx prismic docs view migration
```

[Learn how to migrate to Prismic with AI](https://prismic.io/docs/migration.md)

# Use the MCP server in your app

[Vercel Connect](https://vercel.com/docs/connect) lets apps deployed on Vercel use the [Prismic MCP server](https://prismic.io/docs/mcp.md) on behalf of their users. For example, a Slack bot can draft a blog post into a release for the editor who asked. Each user signs in to Prismic once, and no Prismic credentials live in your project.

1. **Create a connector**

   In a [linked](https://vercel.com/docs/cli/link) Vercel project, run:

   ```sh
   vercel connect create mcp.prismic.io --name prismic
   vercel env pull
   ```

   Vercel registers its OAuth client with Prismic and attaches the connector, `mcp.prismic.io/prismic`, to your project. `vercel env pull` lets you use it in local development.

2. **Install the packages**

   ```sh
   npm install @vercel/connect ai @ai-sdk/mcp
   ```

3. **Connect to the MCP server**

   Create an MCP client with `connectAuthProvider`:

   ```ts
   import { createMCPClient } from "@ai-sdk/mcp";
   import { connectAuthProvider } from "@vercel/connect/ai-sdk";

   const mcpClient = await createMCPClient({
     transport: {
       type: "http",
       url: "https://mcp.prismic.io/mcp",
       authProvider: connectAuthProvider(
         "mcp.prismic.io/prismic",
         { subject: { type: "user", id: slackUserId } },
         { consent: "eager" },
       ),
     },
   });

   const tools = await mcpClient.tools();
   ```

   `slackUserId` is the ID your app already has for the person making the request. Vercel Connect keeps one Prismic sign-in per ID, so the client acts with that person's Prismic access.

   Pass `tools` to an AI SDK function like `generateText`. To ask users to sign in to Prismic, follow [Vercel's consent guide](https://vercel.com/docs/connect/frameworks/ai-sdk-and-mcp).

Prismic sign-ins expire after 90 days. Users then sign in again. Scheduled jobs, like a weekly content audit, can use a fixed ID such as `content-audit`, but someone must sign in again every 90 days.