Dollie Editor SDK guide

Keep the Copilot Up to Date

Send the current page and selected section with every message so the Copilot does not use old information

A chat remembers earlier messages. The page can change while that chat stays open.

Without fresh page information, the Copilot may answer about a section that was removed, use an old heading, or send a suggestion to the wrong place.

Send the current editor state with every message.

What to send

The Copilot needs:

the component id of each section on the page;
a stable key for each section;
the selected section and its current props;
the open section draft, when someone is editing inside a dialog.

It does not need every page in your database, unrelated components, private records, or old implementation notes.

Build the context in React

useEditorCopilot() creates the current context for you:

const {
    contextPayload,
    // other values
} = useEditorCopilot({
    editor,
    fill,
    catalog,
    sections: sectionDefinitions,
});

Send it with each chat request:

<AgentChat extraBody={{ context: contextPayload }} />

The information sent with a message looks like this:

{
  "sectionIds": ["product-hero", "product-features"],
  "sectionKeys": ["section-a", "section-b"],
  "selectedSection": {
    "index": 0,
    "section": {
      "component": "product-hero",
      "props": {
        "headline": "Launch with confidence"
      }
    }
  }
}

sectionIds tells the Copilot what is on the page.

sectionKeys lets the Editor send a result back to the exact section it came from.

selectedSection gives the Copilot the full current value of the section the person is looking at.

Add the context to the latest message

Your server receives context beside the chat messages.

Before calling the model, add it to the latest user message inside a <page_context> block. Keep it out of older messages so the newest block is always the current page.

Add the matching rule to the Copilot instructions:

import { pageContextGroundingBlock } from '@dollie_ai/editor';

const instructions = [
    yourInstructions,
    pageContextGroundingBlock(),
].join('\n\n');

For Laravel:

use Dollie\Editor\Ai\CopilotGrounding;

$instructions = $yourInstructions."\n\n".CopilotGrounding::promptBlock();

This rule tells the Copilot to trust the newest <page_context> block instead of its memory of an earlier turn.

When a section dialog is open

A section dialog contains a draft that has not been applied to the page yet.

While the dialog is open, contextPayload also contains:

{
  "editing": {
    "targetKey": "section-a",
    "component": "product-hero",
    "draft": {
      "component": "product-hero",
      "props": {
        "headline": "A revised headline"
      }
    }
  }
}

The Copilot should use this draft instead of the older section on the page.

Render this part of the context with editingScopeBlock() in TypeScript or CopilotGrounding::editingScopeBlock() in Laravel.

Why the instructions and page data stay separate

Your main instructions rarely change. The page changes often.