Editor AI Menu

Pro

An AI command menu for the editor — a prompt input, a list of writing actions, and a result preview with Accept, Try again, and Discard controls. Calls a configurable completion endpoint for real AI, with a labelled demo mode when none is set.

Open issues Report a bug

Version: v1.3.0
Stability: stable
License: Commercial license
Related: Editor Toolbar; AI Prompt; Turn Into Menu

Demo mode — results are placeholder text. Pass an `endpoint` to call your AI provider.

previews.components.editor-ai-menu.default.blade.php Blade

<div class="w-full flex justify-center p-6">
    <x-ui.editor-ai-menu />
</div>

Installation

terminal

php artisan ui:add pro/editor-ai-menu

Note

This component ships an Alpine behavior module at resources/js/ui/editor-ai-menu.js. Import it once from your bundle so it registers on alpine:init:

resources/js/ui/index.js JS

import './editor-ai-menu.js';

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

editor-ai-menu.md

# Brok UI: Editor AI Menu (`editor-ai-menu`)

An AI command menu for the editor — a prompt input, a list of writing actions, and a result preview with Accept, Try again, and Discard controls. Calls a configurable completion endpoint for real AI, with a labelled demo mode when none is set.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add pro/editor-ai-menu
```

## Usage

```blade
<div class="w-full flex justify-center p-6">
    <x-ui.editor-ai-menu />
</div>
```

## Use when

- Use when users need rich structured authoring, annotation, or collaborative editing controls.
- Offering AI writing commands, such as rewrite, expand, or summarize, inside the editor from a prompt field and a grouped action list.

## Avoid when

- Do not use rich editor affordances for simple one-line or plain-text tasks.
- No AI provider is available and a placeholder demo experience is not acceptable; without endpoint the menu runs in a clearly labelled demo mode with canned text. For a full chat-style assistant instead of inline commands, use ai-prompt.

## Anti-patterns

- Rich editors for one-line or easily validated input

## Rules

- Use the `<brok:editor-ai-menu>` tag (or `<x-ui.editor-ai-menu>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/editor-ai-menu

Ask about Editor AI Menu in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

No documented props. Pass normal Blade attributes through the component root.

Slots

default —

Data slots

Stable hooks for CSS overrides and browser tests.

No data-slot selectors found in the registry source.

Behavior

Arrow keys walk the action list and Enter runs the highlighted action; running an action POSTs to endpoint, sending token as a bearer credential, and streams the response into a result panel word by word.
The result panel replaces the action list and offers Accept, Try again, or Discard; accepting dispatches editor-insert with the resulting HTML, which an ancestor editor inserts at the caret.
Installs a JavaScript behavior module when the registry item includes resources/js/ui files.

Guidance

Rich authoring and editing

Create or revise structured rich content.

Use when

Use when users need rich structured authoring, annotation, or collaborative editing controls.
Offering AI writing commands, such as rewrite, expand, or summarize, inside the editor from a prompt field and a grouped action list.

Avoid when

Do not use rich editor affordances for simple one-line or plain-text tasks.
No AI provider is available and a placeholder demo experience is not acceptable; without endpoint the menu runs in a clearly labelled demo mode with canned text. For a full chat-style assistant instead of inline commands, use ai-prompt.

Use instead

Textarea or plain field for simple content

Anti-patterns

Rich editors for one-line or easily validated input

Anatomy: root

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

Escape discards an in-progress result or, with no result, resets the highlighted action; the prompt field auto-focuses and is a proper labelled text input.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

Source available with Pro

This preview shows the real Pro component, while its installable source is delivered only through the authenticated registry. Activate a license, then use the installation command above.

Open the authenticated source endpoint

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.3.0
Status: Stable
License: pro
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated

Preview