AI Floating Toolbar

Select any text and get instant AI-powered actions with the floating toolbar. Customize built-in actions and add your own.

AI Floating Toolbar

The AI Floating Toolbar is your instant AI assistant that appears right when you need it. Select any text on a webpage and a sleek toolbar pops up with one-click AI actions โ€” no need to open the sidebar or type a prompt.

floating toolbar

How It Works

  1. Select text on any webpage (minimum 10 characters)
  2. Toolbar appears automatically near your selection
  3. Click an action to instantly transform, analyze, or translate
  4. View results in a floating popover

Thatโ€™s it! No typing, no context switching โ€” just select and act.

Built-in Actions

Toolbar (always visible)

ActionWhat it does
SummarizeCreates a concise summary of the selected text
ExplainBreaks down complex concepts into simple terms
TranslateTranslates text to your chosen language
RephraseRewrites text for better clarity and flow

More Menu

Click the More button to access additional actions:

Transform

  • Simplify โ€” Makes complex text easier to understand
  • Expand โ€” Adds more detail and context to brief text

Change Tone

  • Make Formal โ€” Converts casual text to professional language
  • Make Casual โ€” Makes formal text more conversational

Fix & Improve

  • Fix Grammar โ€” Corrects grammar, spelling, and punctuation errors

All built-in actions can be renamed, repositioned, or disabled โ€” see Customizing Actions below.

Using the Toolbar

Basic Usage

  1. Highlight any text on a webpage
  2. A small BraceKit icon appears near your selection
  3. Click the icon to expand the full toolbar
  4. Click any action to execute it

Translation

When you click Translate:

  1. A language dropdown appears
  2. Select your target language (12 languages available)
  3. Click Go to translate

Supported languages: English, Spanish, French, German, Chinese, Japanese, Korean, Indonesian, Portuguese, Russian, Arabic, Hindi

Changing AI Model

You can switch between AI models directly from the toolbar:

  1. Click the model indicator (shows current provider/model)
  2. Select from available providers
  3. Choose a model from the dropdown
  4. Your selection is saved for future use

Note: Only providers with configured API keys appear in the selector.

Working with Results

After executing an action, results appear in a floating popover:

Available Actions

ButtonFunction
RegenerateGet a different result for the same action
CopyCopy the result to your clipboard
ApplyReplace the original text (only in editable fields)
CloseDismiss the popover

Drag to Reposition

The results popover can be dragged:

  1. Click and hold the header area
  2. Drag to any position on the page
  3. Release to drop

The popover automatically stays within viewport boundaries.

Applying Results

When you select text in an editable area (input field, textarea, or contenteditable element), the Apply button appears. Click it to replace your original selection with the AI-generated result.

Perfect for:

  • Editing emails
  • Improving document text
  • Fixing grammar in forms

Customizing Actions

Open Settings โ†’ Chat โ†’ Text Selection AI to fully customize which actions appear in the toolbar and how they behave.

Managing Built-in Actions

Every built-in action can be customized:

What you can doHow
Enable / DisableToggle the switch on the right of each action row
Rename labelClick the pencil icon, edit the label, click Save
Change positionIn edit mode, switch between Toolbar and More menu
Change categoryIn edit mode, pick a different category for grouping

To undo all customizations on a built-in action, click the โ†บ reset icon that appears on hover.

Adding Custom Actions

You can create your own AI actions with a custom prompt:

  1. Scroll to Custom Actions in the settings panel
  2. Click the + button
  3. Fill in the form:
    • Label โ€” the button text shown in the toolbar (e.g. ELI5, Roast, Bullet points)
    • Position โ€” Toolbar โ€” always visible or More โ€” in dropdown menu
    • Category โ€” groups your action in the More menu (optional)
    • Prompt Template โ€” your full prompt; use {{text}} as the placeholder for the selected text
  4. Click Add Action

Example prompt templates:

Explain the following text like I'm 5 years old:

{{text}}
Convert the following text into a bulleted list of key points. Return only the list:

{{text}}
Roast the following text in a humorous way:

{{text}}

Editing and Removing Custom Actions

  • Expand prompt โ€” click the chevron (โ–พ) to preview the full prompt template
  • Edit โ€” click the pencil icon to modify label, prompt, position, or category
  • Delete โ€” click the ร— icon to remove the action permanently

Changes take effect the next time you select text on a page (the toolbar reloads its action list on each use).

Tips & Tricks

Get Better Results

  1. Select complete sentences โ€” AI works best with full thoughts, not fragments

  2. Include context โ€” When explaining code, select enough surrounding code for context

  3. Use specific actions โ€” โ€œSimplifyโ€ works better than โ€œRephraseโ€ for making text easier to read

  4. Regenerate if needed โ€” Not happy with the result? Click Regenerate for a fresh take

  5. Write precise custom prompts โ€” End your prompt template with Return ONLY the result, nothing else. to get clean output without meta-commentary

Productivity Shortcuts

  • Click outside the toolbar to dismiss it quickly
  • Press Escape to close the results popover
  • Minimum selection is 10 characters โ€” adjust in settings if needed

Best Use Cases

For Research:

  • Summarize long articles instantly
  • Translate foreign language sources
  • Explain technical documentation

For Writing:

  • Rephrase awkward sentences
  • Fix grammar and typos
  • Adjust tone for your audience

For Learning:

  • Explain complex concepts
  • Simplify difficult passages
  • Translate for language learning

Settings

Configure the floating toolbar in Settings โ†’ Chat:

SettingDescriptionDefault
Enable ToolbarTurn the floating toolbar on/offOn
Minimum Selection LengthMinimum characters to trigger toolbar10
Built-in ActionsEnable/disable, rename, or reposition each built-in actionโ€”
Custom ActionsAdd, edit, or remove your own AI actionsโ€”

Troubleshooting

Toolbar Doesnโ€™t Appear

  • Selection too short โ€” Select at least 10 characters (adjustable in settings)
  • Feature disabled โ€” Check Settings โ†’ Chat โ†’ Text Selection AI
  • Incompatible page โ€” Some pages (Chrome Web Store, extension pages) donโ€™t allow content scripts
  • Code blocks excluded โ€” Toolbar intentionally doesnโ€™t appear inside code blocks

Custom Action Not Appearing

  • Check position setting โ€” Make sure the action is set to Toolbar (not More menu) if you expect it in the main grid
  • Reload the page โ€” Action list is loaded fresh on each selection; a page reload may be needed after the first time you add an action
  • Disabled accidentally โ€” Built-in actions can be toggled off; check the settings panel

Results Not Showing

  • API key missing โ€” Ensure your provider has a configured API key
  • Rate limited โ€” Wait 1 second between requests
  • Network error โ€” Check your internet connection

Wrong Theme (Too Light/Dark)

The toolbar automatically detects the page theme. If it looks wrong:

  • The page may use non-standard theming
  • Try refreshing the page