Prismic with AI

Prismic supports AI tools like Claude Code, Codex, and Cursor to develop websites. Agents use a skill and the Prismic CLI to build and configure Prismic websites.

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

Install the skillCopy link

To start, install the Prismic skill:

npx skills add --global prismicio/skills

The skill teaches agents about Prismic and how to use the Prismic CLI.

Build websites with AICopy link

Once the skill is installed, work with your AI agent to build a website.

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

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 with Nuxt or SvelteKit, or specify which CSS library to use.

Create slicesCopy link

Your agent will use the Prismic CLI’s slice and field commands to model slices. 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:

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.

Configure your repositoryCopy link

Your agent can manage your Prismic repository using the Prismic CLI. Settings like webhooks, previews, and locales are accessible via CLI commands.

Here are some example prompts:

Preview managementCopy link

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

Remove the development content preview in Prismic.

Multi-locale supportCopy link

Which languages are supported in the Prismic repo?

Add multi-locale support, starting with French.

Remove the English locale in Prismic.

Prepare for productionCopy link

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