---
title: "Prismic with AI"
description: "Learn how to use Prismic's AI features in your development workflow."
category: "concepts"
audience: developers
lastUpdated: "2026-04-18T00:21:05.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.

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 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.
```