---
title: "View Button & Field Configuration"
description: "Per-blueprint controls for the view button and writer/textarea toolbar – set defaults, lock prompts, scope to specific fields."
canonical_url: "https://kirby.tools/docs/copilot/configuration/local"
---

# View Button & Field Configuration

> Per-blueprint controls for the view button and writer/textarea toolbar – set defaults, lock prompts, scope to specific fields.

Kirby Copilot supports configuration through Panel view buttons and individual writer/textarea fields, providing fine-grained control over AI generation behavior.

<callout color="info" icon="i-ri-information-line" to="/docs/copilot/usage/section">

For section configuration, see the dedicated **Copilot Section** documentation.

</callout>

## View Button Configuration

The Copilot view button can be added to any Panel view (site, page, file, user) alongside the default buttons like the preview button or settings dropdown. Configure its behavior with props in your blueprints:

<code-group>

```yaml [site.yml]
buttons:
  copilot:
    label: AI Assistant
    userPrompt: Generate homepage content including a headline, intro paragraph, and three key features with descriptions.
    theme: blue-icon
  open: true
  preview: true
  languages: true
```

```yaml [pages/default.yml]
buttons:
  copilot:
    label: AI Assistant
    userPrompt: |
      Write a complete landing page for "{title}": a compelling headline, introduction, three benefit sections, and a call-to-action.
    theme: blue-icon
  open: true
  preview: true
  settings: true
  languages: true
  status: true
```

```yaml [files/default.yml]
buttons:
  copilot:
    label: AI Assistant
    userPrompt: Generate image metadata including a descriptive title, alt text, caption, and relevant tags based on the visual content.
    theme: blue-icon
  open: true
  settings: true
  languages: true
```

</code-group>

<warning>

`buttons` and `marks` replace Kirby's defaults instead of extending them, so every entry you want to keep has to be listed. The defaults differ per view: `open`, `preview`, `languages` for the site, plus `settings` and `status` for pages, and `open`, `settings`, `languages` for files – there is no preview button for files. For `marks` the stakes are higher, because an omitted mark is removed from the writer itself, not just from its toolbar: existing bold, italic, or link formatting is stripped from the field the next time it is saved.

</warning>

The view button opens a prompt dialog that allows you to generate content for a single field or multiple fields at once:

<preview alt="Copilot Panel view button" src="/img/kirby-copilot-view-button.png">



</preview>

## Available Properties

<tip>

Only `systemPrompt` and `logLevel` can be set [globally](/docs/copilot/configuration/global) – `label`, `userPrompt`, `icon`, and `theme` are blueprint-only. Blueprint values override the global ones.

</tip>

### `label` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

Custom label for the view button. The default depends on the Panel language (e.g., "Copilot" for English).

```yaml
buttons:
  copilot:
    label: AI Assistant
```

### `userPrompt` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

Default user prompt that appears when the generation dialog opens. Without a predefined prompt, the input field will be empty. Users can edit the prompt before generating content.

<tabs>
<tabs-item label="View Button">

```yaml
buttons:
  copilot:
    userPrompt: 'Write a landing page for "{title}": headline, intro, three benefits, and call-to-action.'
```

</tabs-item>

<tabs-item label="Writer Field">

```yaml
fields:
  text:
    type: writer
    marks:
      - copilot
      - copilot-suggestions
    copilot:
      userPrompt: Write a product description for "{title}". Highlight benefits, not features. Max 200 words.
```

</tabs-item>

<tabs-item label="Textarea Field">

```yaml
fields:
  description:
    type: textarea
    buttons:
      - copilot
    copilot:
      userPrompt: Summarize "{title}" in 2-3 sentences. Focus on the main value proposition.
```

</tabs-item>
</tabs>

<callout color="info" icon="i-ri-information-line" to="/docs/copilot/usage/toolbar-buttons#predefined-user-prompts">

Learn more about predefined prompts for Writer and Textarea fields in the **Toolbar Buttons** documentation.

</callout>

A Kirby query in the view button or the section resolves against the current model, so editors can write the prompt themselves in a field:

```yaml
buttons:
  copilot:
    userPrompt: "{{ page.customPrompt.value }}"
```

Note the two syntaxes side by side: `{{ ... }}` is a Kirby query resolved in the blueprint, while `{field}` is a [placeholder](/docs/copilot/prompt-dialog/placeholders) resolved when the prompt is sent.

### `systemPrompt` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

Custom system prompt that controls how the AI structures and formats the generated content. Users cannot see or edit this prompt.

Defaults to the [global system prompt](/docs/copilot/configuration/global#systemprompt) if not set locally.

```yaml
buttons:
  copilot:
    systemPrompt: You are a technical writer specializing in documentation. Use clear, concise language.
```

Kirby queries resolve here too, on the same terms as `userPrompt`.

<callout color="success" icon="i-ri-ai-generate" to="/docs/copilot/configuration/system-prompt">

Learn more about the system prompt and how to customize it effectively.

</callout>

### `icon` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

Custom icon for the view button.

**Default:** `sparkling`<br />

**Options:** Any of the default [Kirby Panel icons](https://getkirby.com/docs/reference/panel/icons) or a custom icon like `copilot-ai-generate`.

```yaml
buttons:
  copilot:
    icon: copilot-ai-generate
    theme: blue-icon
```

<preview alt="Copilot Panel view button with custom icon" src="/img/kirby-copilot-view-button-custom-icon.png">



</preview>

### `theme` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

Controls the visual appearance and color theme of the button.

**Default:** `notice-icon`<br />

**Options:** `notice-icon`, `passive`, `white`, `info`, `positive`, `warning`, `notice`, `negative`, `*-icon` variants (e.g., `positive-icon`, `negative-icon`)

```yaml
buttons:
  copilot:
    theme: blue-icon
```

<preview alt="Copilot Panel view button with custom theme" src="/img/kirby-copilot-view-button-blue.png">



</preview>

### `logLevel` <u-badge className="align-middle,ml-2,rounded-full!" label="String" variant="subtle"></u-badge>

Set the logging level for debugging AI generation. Inspect the browser console to see logs.

**Options:** `error`, `warn`, `info`, `debug`

```yaml
buttons:
  copilot:
    logLevel: info
```

## Configuration Precedence

Properties are applied in the following order (later values override earlier ones):

1. **Default values** (built into the plugin)
2. **Global configuration** (in `config.php`)
3. **View button props** (in blueprints)

<tabs>
<tabs-item label="Global Config">

```php [config.php]
return [
    'johannschopplich.copilot' => [
        'systemPrompt' => 'Default system prompt', // Applied globally
        'logLevel' => 'info'
    ]
];
```

</tabs-item>

<tabs-item label="Blueprint Override">

```yaml
buttons:
  copilot:
    logLevel: debug # Overrides global config
    # systemPrompt inherited from global config
```

</tabs-item>
</tabs>

---

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