ProsePrompt - Bitrix24 UI

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.

Prompt 2.15+

Use the prompt prop to set the text that gets copied. The description prop is shown as the visible label.

description

Build a dashboard layout with Bitrix24 UI.

::prompt{description="Build a dashboard layout with Bitrix24 UI."}
---
prompt: |
  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
---
::

The prompt can also be written in the default slot. Its rendered text is then copied, with block elements turned into line breaks; use the prompt prop to copy the text exactly as written.

Actions

Use the actions prop to display additional buttons. The copy button is always displayed. The available actions are cursor, windsurf and claude.

actions

Add a color mode toggle.

::prompt{description="Add a color mode toggle." actions="cursor,claude"}
---
prompt: |
  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

Prop	Default	Type
`description`		`string`
`prompt`		`string` The prompt to copy, kept as written. The default slot is copied as plain text when not set.
`icon`		`IconComponent` Icon component to render. Pass an imported component, not a string; for string names use `iconName` instead.
`iconName`		`IconComponent` Resolved through the icon registry (`dictionary/iconRegistry.ts`) with a fallback to short aliases (`dictionary/icons.ts`). Ignored when `icon` is set.
`actions`	`[]`	`("copy" \| "cursor" \| "windsurf" \| "claude")[]` The `copy` action is always displayed, list any additional actions to show alongside it.
`b24ui`		`{ root?: SlotClass; icon?: SlotClass; content?: SlotClass; description?: SlotClass; actions?: SlotClass; }`

Slots

Slot	Type
`default`	`{}`

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/prompt.ts

export default {
  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-label',
    content: 'min-w-0',
    description: 'text-sm/6 text-description font-medium',
    actions: 'flex flex-wrap items-center gap-1.5 ms-auto'
  }
}

Kbd

Show all available hotkeys with their properly formatted keys.

Steps

Turn your headings into clear, sequential instructions.