---
title: "Toolbar Buttons"
description: "Select text in writer or textarea fields and use AI to fix grammar, summarize, rewrite, or extend – right from the toolbar."
canonical_url: "https://kirby.tools/docs/copilot/usage/toolbar-buttons"
---

# Toolbar Buttons

> Select text in writer or textarea fields and use AI to fix grammar, summarize, rewrite, or extend – right from the toolbar.

Kirby Copilot provides a `copilot` button for writer and textarea fields. Click it to open the prompt dialog and generate content directly within the field – especially useful for nested fields like writer fields in blocks.

If you select text before opening the dialog, the selection is automatically appended to your prompt. See the [selected text](#selected-text) section for details.

<prose-video height="540" poster="/screencasts/kirby-copilot-writer-features-poster.jpg" src="/screencasts/kirby-copilot-writer-features.mp4" width="908">



</prose-video>

<callout color="info" icon="i-ri-information-line" to="#predefined-user-prompts">

You can define custom user prompts that are pre-filled when the dialog opens.

</callout>

## Writer Fields

If you only want to add the Copilot button to the toolbar without removing the default marks, you must first define all default marks in the field configuration, followed by the `copilot` button.

<warning>

`marks` replaces Kirby's defaults instead of extending them, and it does more than hide toolbar buttons: a mark you leave out is removed from the editor itself. Existing bold, italic, or link formatting is then stripped from the field the next time it is saved – links lose their target entirely. List every mark you want to keep.

</warning>

<preview alt="Copilot button in writer field toolbar" height="306" src="/img/copilot-field-writer.png" width="1074">



</preview>

```yaml [pages/default.yml]
fields:
  text:
    label: Text
    type: writer
    toolbar:
      inline: false
    marks:
      # These are the default marks
      - bold
      - italic
      - underline
      - strike
      - code
      - sup
      - sub
      - "|"
      - link
      - email
      - "|"
      - clear
      - "|"
      # Append the Copilot button to the toolbar
      - copilot
      # Enable inline suggestions
      - copilot-suggestions
```

<tip>

When defining custom marks, include `copilot-suggestions` to enable [inline suggestions](/docs/copilot/usage/inline-suggestions). Without it, suggestions are silently disabled because Kirby filters marks based on your blueprint.

</tip>

## Textarea Field

Similarly, you can add the Copilot button to the toolbar of a `textarea` field. The configuration is the same as for the writer field, but with buttons instead of marks.

<preview alt="Copilot button in textarea field toolbar" height="378" src="/img/copilot-field-textarea.png" width="1074">



</preview>

```yaml [pages/default.yml]
fields:
  text:
    label: Text
    type: textarea
    buttons:
      # These are the default buttons
      - headlines
      - "|"
      - bold
      - italic
      - code
      - "|"
      - link
      - email
      - file
      - "|"
      - ul
      - ol
      - "|"
      # Append the Copilot button to the toolbar
      - copilot
```

<tip>

This can be useful for generating meta descriptions based on the main content of a page, or for generating a summary of a text block. See the [Field Placeholders](/docs/copilot/prompt-dialog/placeholders) guide to learn how to reference other fields as context in your prompts.

</tip>

## Shared Usage

### Keyboard Shortcuts

<table>
<thead>
  <tr>
    <th>
      Action
    </th>
    
    <th>
      Shortcut
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Open prompt (writer & textarea field)
    </td>
    
    <td>
      <kbd value="meta">
        
      </kbd>
      
       <kbd value=".">
        
      </kbd>
      
       (macOS) / <kbd value="CTRL">
        
      </kbd>
      
       <kbd value=".">
        
      </kbd>
      
       (Windows/Linux)
    </td>
  </tr>
  
  <tr>
    <td>
      Cancel generation
    </td>
    
    <td>
      <kbd value="escape">
        
      </kbd>
    </td>
  </tr>
</tbody>
</table>

<tip>

The shortcuts work in every `writer` and `textarea` field, even if you have not added the Copilot button to the toolbar.

</tip>

### Selected Text

When you select text in a writer or textarea field before clicking the Copilot button, the selection is sent ahead of your prompt. Formatting (bold, italic, links, etc.) is preserved in the selection and in the generated output when replacing text. This makes [prompt templates](/docs/copilot/prompt-dialog/templates) like **Fix Grammar** or **Make Concise** especially useful: correct errors or shorten text while keeping all your formatting intact.

For example, if this is your user prompt:

```txt
Shorten the selected text to 200 characters.
```

The selection is wrapped and placed ahead of your prompt:

```txt
<selection>
(Your selected text will be here)
</selection>

Shorten the selected text to 200 characters.
```

<note>

The [Default System Prompt](/docs/copilot/configuration/system-prompt#default-system-prompt) instructs the AI model on how to process the selected text.

</note>

### Append vs Replace

Select text before opening the dialog and it offers an **Append/Replace** toggle. The toggle applies to the selection, not to the whole field – without a selection there is nothing to choose from, and the generated text is inserted at the cursor.

- **Replace** (default): overwrites the selection as the text streams in.
- **Append**: inserts the text after the selection, separated by a space.

### Predefined User Prompts

Define a custom `userPrompt` for writer and textarea fields to pre-fill the Copilot dialog when the toolbar button is clicked.

```yaml [pages/default.yml]
fields:
  text:
    label: Text
    type: writer
    marks:
      - bold
      - italic
      - "|"
      - copilot
      - copilot-suggestions
    copilot:
      userPrompt: Check grammar and improve writing style. Keep the original meaning and tone.
```

The custom prompt can be edited before generating content.

---

Every page of this site as Markdown: <https://kirby.tools/sitemap.md>