# Prompt

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

```vue
<template>
  <UPrompt 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
  </UPrompt>
</template>
```

### Icon

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

```vue
<template>
  <UPrompt 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
  </UPrompt>
</template>
```

### Actions

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

```vue
<template>
  <UPrompt description="Add a color mode toggle." icon="i-lucide-sun-moon">
    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
  </UPrompt>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProsePrompt component
 */
interface ProsePromptProps {
  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 Prompt component
 */
interface PromptSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      prompt: {
        slots: {
          root: 'relative flex items-center gap-2 border border-muted bg-muted rounded-md px-4 py-3 my-5 last:mb-0',
          icon: 'size-4 shrink-0 text-highlighted',
          content: 'flex-1 min-w-0',
          description: 'text-sm/6 text-default font-medium',
          actions: 'flex items-center shrink-0 gap-1.5'
        }
      }
    }
  }
})
```

## Changelog

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