---
title: "Prompt"
description: "Show pre‑built AI prompts with one‑click copying and IDE integration."
canonical_url: "https://bitrix24.github.io/b24ui/docs/typography/prompt"
last_updated: "2026-05-13"
---
# Prompt

> Show pre‑built AI prompts with one‑click copying 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
```mdc
::prompt{description="Build a dashboard layout with Bitrix24 UI."}
You are a Bitrix24 UI expert. Help me build a dashboard layout with a collapsible sidebar and a sticky top navbar.

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

```
```

### Actions

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

```vue
```mdc
::prompt{description="Add a color mode toggle." actions="copy,cursor,windsurf"}
Add a color mode toggle to my Nuxt app.

Requirements:
- Use `useColorMode` from `'@bitrix24/b24ui-nuxt/composables` to manage the current mode
- Render a `B24Button` with `color="air-tertiary"` that cycles between `light`, `dark`, and `system` on click
- Update the button icon dynamically: `SunIconAir` for light, `MoonIconAir` for dark, `ScreenIcon` for system
- Add a tooltip using `B24Tooltip` that shows the current active mode

```
```

## API

### Props

```ts
/**
 * Props for the ProsePrompt component
 */
interface ProsePromptProps {
  description?: string | undefined;
  icon?: string | undefined;
  /**
   * Resolved through the icon registry (`dictionary/iconRegistry.ts`)
   * with a fallback to short aliases (`dictionary/icons.ts`).
   * Ignored when `icon` is set.
   */
  iconName?: string | undefined;
  /**
   * @default "[\"copy\"]"
   */
  actions?: ("copy" | "cursor" | "windsurf")[] | undefined;
  b24ui?: { 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({
  b24ui: {
    prose: {
      prompt: {
        slots: {
          root: 'relative flex flex-wrap 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: 'min-w-0',
          description: 'text-sm/6 text-description font-medium',
          actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
        }
      }
    }
  }
})
```

## Sitemap

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