---
title: "ProsePrompt"
description: "Display pre-built AI prompts with one-click copy and IDE integration."
canonical_url: "https://ui.nuxt.com/docs/typography/prompt"
last_updated: "2026-05-28"
---
# ProsePrompt

> Display pre-built AI prompts with one-click copy and IDE integration.

## Usage

Use the `prompt` component to display a pre-built AI prompt that users can copy to their clipboard or open directly in their IDE. The `description` prop is shown as the visible label, while the default slot contains the prompt text that gets copied.

```mdc
::prompt{description="Build a dashboard layout with Nuxt UI."}
You are a Nuxt UI expert. Help me build a dashboard layout with a collapsible sidebar and a sticky top navbar.

Requirements:
- Use `UDashboardPanel`, `UDashboardSidebar`, and `UDashboardNavbar`
- Use semantic color tokens like `bg-elevated` and `text-muted` for theming
- The sidebar should include navigation links with icons using `UNavigationMenu`
- The navbar should display a breadcrumb, a search button, and a user dropdown menu
- The layout must be fully responsive and collapse the sidebar on mobile
::
```

### Icon

Use the `icon` prop to display an icon next to the description.

```mdc
::prompt{description="Create a form with validation." icon="i-lucide-file-pen-line"}
Create a registration form using Nuxt UI with Zod schema validation.

Requirements:
- Use `UForm` with a Zod schema for validation
- Add `UFormField` wrapping each input: name (`UInput`), email (`UInput` type email), role (`USelect` with options Admin, Editor, Viewer)
- Include a submit `UButton` with loading state
- Display inline error messages below each field
- On successful submit, show a `UToast` notification
::
```

### Actions

Use the `actions` prop to control which buttons are displayed. Defaults to `["copy"]`. Available actions are `copy`, `cursor` and `windsurf`.

```mdc
::prompt{description="Add a color mode toggle." icon="i-lucide-sun-moon" actions="copy,cursor,windsurf"}
Add a color mode toggle to my Nuxt app.

Requirements:
- Use `useColorMode` from `@nuxtjs/color-mode` to manage the current mode
- Render a `UButton` with `variant="ghost"` that cycles between `light`, `dark`, and `system` on click
- Update the button icon dynamically: `i-lucide-sun` for light, `i-lucide-moon` for dark, `i-lucide-monitor` for system
- Add a tooltip using `UTooltip` that shows the current active mode
::
```

## API

### Props

```ts
/**
 * Props for the ProseProsePrompt component
 */
interface ProseProsePromptProps {
  description?: string | undefined;
  icon?: any;
  /**
   * @default "[\"copy\"]"
   */
  actions?: ("copy" | "cursor" | "windsurf")[] | undefined;
  ui?: { root?: ClassNameValue; icon?: ClassNameValue; content?: ClassNameValue; description?: ClassNameValue; actions?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the ProsePrompt component
 */
interface ProsePromptSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {}
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/ProsePrompt.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/prose-prompt.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.