Toolbar Buttons

Kirby Copilot provides a copilot button for the Kirby writer and textarea fields.

Open the prompt dialog by clicking the Copilot button in the toolbar. The selected text (if any) will be appended to the user prompt before sending it to the AI model. Follow the selected text section for more information.

This feature is useful when you need to generate content based on existing text, or when you want to generate content for a specific part of the text. It is also useful for nested fields such as writer fields in blocks.

Shortcuts

To open the prompt dialog programmatically, use the following keyboard shortcuts:

• Cmd + . (macOS) or
• Ctrl + . (Windows/Linux).

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 markers in the field configuration, followed by the copilot button.

fields:
  text:
    label: Text
    type: writer
    toolbar:
      inline: false
    marks:
      # These are the default marks
      - bold
      - italic
      - underline
      - strike
      - code
      - "|"
      - link
      - email
      - "|"
      - clear
      # Append the Copilot button to the toolbar
      - "|"
      - copilot

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.

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

Selected Text

When you select text in the writer or textarea field and then click the Copilot button, the selected text will be passed to the prompt dialog.

Before the instruction is sent to your AI provider, the selected text is added to the user prompt.

For example, if this is your user prompt:

Shorten the selected text to 200 characters.

Then, the selected text will be added to the prompt, resulting in this final prompt:

Shorten the selected text to 200 characters.

<selected_text>
(Your selected text will be here)
</selected_text>