Attach visual editor elements to AI Assistant Context #24

bryantgillespie · 2026-01-26T15:22:53Z

Scope

What's changed:

Needs to go alongside this core PR
directus/directus#26512

Adds AI button that adds visual elements to the AI Assistant context

Potential Risks / Drawbacks

Lorem ipsum dolor sit amet
Consectetur adipiscing elit

Review Notes / Questions

I would like to lorem ipsum
Special attention should be paid to dolor sit amet

Fixes #<num>

Copilot

Pull request overview

This PR extends the Directus visual editing overlay to integrate with the AI Assistant by adding an AI context button and corresponding messaging types, plus updates to the example Nuxt CMS schema/config to support the new features and some Directus settings.

Changes:

Add AI-related message types (add-to-context, highlight-element, aiEnabled, Rect, etc.) and wire them through DirectusFrame, EditableElement, EditableStore, and OverlayElement to support AI context selection and highlighting.
Update overlay styling and layout to support a second “AI” button and an AI-context highlight state, along with a small tweak to the Nuxt base layout so header/footer render independently of loading state.
Refresh generated Directus schema types (including new AI/visual editor settings, collection enum, and stricter field types) and pin Nuxt app dependencies to exact versions; adjust CSP to allow framing from localhost Directus.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`test-website/simple-cms/nuxt/shared/types/schema.ts`	Regenerated Directus schema types, adding form submission types, refined field shapes (e.g., `social_links`, `DirectusField.searchable`), new AI/visual-editor settings, a `CollectionNames` enum, and removing `seo` fields from `Page`/`Post`.
`test-website/simple-cms/nuxt/package.json`	Pins dev/runtime dependencies (Nuxt app, ESLint, Directus tooling, form libs, etc.) to exact versions for reproducible installs.
`test-website/simple-cms/nuxt/nuxt.config.ts`	Relaxes CSP `frame-ancestors` to additionally allow framing from `http://localhost:8080` for local Directus integration.
`test-website/simple-cms/nuxt/app/layouts/default.vue`	Simplifies layout conditional rendering so `NavigationBar` and `Footer` are gated directly by `siteError`/`status` but no longer wrapped in an extra `v-else` container.
`src/lib/types/index.ts`	Re-exports new Directus-shared types (`AddToContextData`, `HighlightElementData`, `ConfirmData`, `Rect`) for use across the overlay code.
`src/lib/types/directus.ts`	Defines shared protocol types for AI-related actions (`Rect`, `AddToContextData`, `HighlightElementData`, `ConfirmData`) and extends `ReceiveAction`/`SendAction` unions for `add-to-context` and `highlight-element`.
`src/lib/overlay-manager.ts`	Introduces shared button class, AI button/icon CSS variables, AI-context styling (different border color and always-visible AI button), and hover interactions using `color-mix` and `:has()` so edit and AI buttons visually coordinate.
`src/lib/overlay-element.ts`	Adds optional AI button creation controlled via `OverlayElementOptions.aiEnabled`, exposes `aiButton`, and supports toggling an AI-context CSS class on the overlay rectangle.
`src/lib/editable-store.ts`	Tracks the currently AI-highlighted element, adds lookup by collection/item/fields, and exposes `highlightElement`/`setElementInAiContext` to switch AI-context highlighting on specific editables.
`src/lib/editable-element.ts`	Creates overlays with AI buttons when enabled, wires AI button clicks to send `add-to-context` data (including a `Rect` and display label) to Directus, and fixes hover listener removal by storing bound handlers.
`src/lib/directus-frame.ts`	Extends the messaging layer to capture AI configuration from `confirm` (e.g., `aiEnabled`), expose `isAiEnabled()`, and handle incoming `highlight-element` messages to instruct `EditableStore` which element to visually mark for AI context.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

test-website/simple-cms/nuxt/shared/types/schema.ts

test-website/simple-cms/nuxt/nuxt.config.ts

Copilot

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

test-website/simple-cms/nuxt/app/layouts/default.vue

formfcw

Thank you @bryantgillespie ❤️ Great work!

A few minor requests and a few questions.

src/lib/types/directus.ts

src/lib/directus-frame.ts

src/lib/editable-element.ts

src/lib/types/index.ts

src/lib/directus-frame.ts

* fix: update button const names for consistency * rename aiContext to highlightActive for better reusability Also: - removed the extra css var - removed the style that displayed the ai button * bring back css reset for pseudos so they don’t get overwritten * use separate background size CSS variable for ai button for consistency * reuse buttonWidth css var, introduce buttonGap var and set it to 4px (instead of 8px) * update button background color variables for consistency Also: - extracted edit and ai button color vars as const for reusability - used the color mix var definition from directus for hover color - refactored all selectors that use opacity: 1

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

bryantgillespie · 2026-02-02T19:38:12Z

Ready for another round @formfcw

bryantgillespie added 4 commits January 21, 2026 20:25

wip: add context to communicate with ai chat

5bfc732

pin dependencies in test site

72786ad

fix: hide button if AI_ENABLED = false

cabf1bb

fix: getItemsByConfig for durable highlighting

990d082

bryantgillespie requested a review from Copilot January 26, 2026 15:24

Copilot started reviewing on behalf of bryantgillespie January 26, 2026 15:24 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

test-website/simple-cms/nuxt/shared/types/schema.ts Show resolved Hide resolved

test-website/simple-cms/nuxt/nuxt.config.ts Show resolved Hide resolved

bryantgillespie marked this pull request as ready for review January 26, 2026 17:03

bryantgillespie requested a review from formfcw January 26, 2026 17:03

bryantgillespie changed the title ~~[WIP] Attach visual editor elements to AI Assistant Context~~ Attach visual editor elements to AI Assistant Context Jan 26, 2026

bryantgillespie requested a review from Copilot January 26, 2026 18:06

Copilot started reviewing on behalf of bryantgillespie January 26, 2026 18:06 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

bryantgillespie requested a review from Copilot January 26, 2026 21:37

Copilot started reviewing on behalf of bryantgillespie January 26, 2026 21:37 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

test-website/simple-cms/nuxt/app/layouts/default.vue Show resolved Hide resolved

bryantgillespie requested a review from rijkvanzanten January 27, 2026 15:23

formfcw requested changes Jan 29, 2026

View reviewed changes

formfcw and others added 12 commits January 29, 2026 15:35

Update src/lib/types/directus.ts

20b4db2

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/types/directus.ts

01a90ad

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/directus-frame.ts

d8cb748

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/directus-frame.ts

f0f98cc

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/editable-element.ts

0d59a60

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/overlay-element.ts

cb91bd0

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/types/index.ts

ccbd78a

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/types/index.ts

2dc7e4d

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/types/index.ts

3b0cd5a

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/types/index.ts

b9e54ad

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

Update src/lib/overlay-element.ts

575f77e

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

bryantgillespie and others added 2 commits February 2, 2026 11:26

Update src/lib/editable-store.ts

125621e

Co-authored-by: Florian C. Wachmann <dev@formfcw.com>

move displayValue responsbilities to core

00098d2

bryantgillespie requested a review from formfcw February 2, 2026 19:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Attach visual editor elements to AI Assistant Context #24

Attach visual editor elements to AI Assistant Context #24

Uh oh!

bryantgillespie commented Jan 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

formfcw left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryantgillespie commented Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Attach visual editor elements to AI Assistant Context #24

Are you sure you want to change the base?

Attach visual editor elements to AI Assistant Context #24

Uh oh!

Conversation

bryantgillespie commented Jan 26, 2026

Scope

Potential Risks / Drawbacks

Review Notes / Questions

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

formfcw left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bryantgillespie commented Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants