diff --git a/.changeset/fresh-doodles-relax.md b/.changeset/fresh-doodles-relax.md
new file mode 100644
index 0000000000000..dd696bc0ceec4
--- /dev/null
+++ b/.changeset/fresh-doodles-relax.md
@@ -0,0 +1,11 @@
+---
+'@directus/ai': minor
+'@directus/api': minor
+'@directus/app': minor
+---
+
+Attached prompts, content items, and visual editor elements to AI Assistant Context
+
+:::notice
+To use this feature, update [@directus/visual-editing](https://github.com/directus/visual-editing) to v1.2.0+ on your website.
+:::
diff --git a/.changeset/olive-trains-eat.md b/.changeset/olive-trains-eat.md
new file mode 100644
index 0000000000000..d7c156520e93f
--- /dev/null
+++ b/.changeset/olive-trains-eat.md
@@ -0,0 +1,5 @@
+---
+'@directus/env': patch
+---
+
+Fixed LDAP DN properties casted as arrays
diff --git a/.changeset/solid-ghosts-see.md b/.changeset/solid-ghosts-see.md
new file mode 100644
index 0000000000000..be6d7a59b4c74
--- /dev/null
+++ b/.changeset/solid-ghosts-see.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': minor
+---
+
+Changed permission-blocked fields from disabled to non-editable appearance
diff --git a/api/src/ai/chat/controllers/chat.post.ts b/api/src/ai/chat/controllers/chat.post.ts
index b8ff8c155b469..eecc28b5f80e2 100644
--- a/api/src/ai/chat/controllers/chat.post.ts
+++ b/api/src/ai/chat/controllers/chat.post.ts
@@ -19,7 +19,7 @@ export const aiChatPostHandler: RequestHandler = async (req, res, _next) => {
 		throw new InvalidPayloadError({ reason: fromZodError(parseResult.error).message });
 	}
 
-	const { provider, model, messages: rawMessages, tools: requestedTools, toolApprovals } = parseResult.data;
+	const { provider, model, messages: rawMessages, tools: requestedTools, toolApprovals, context } = parseResult.data;
 
 	const aiSettings = res.locals['ai'].settings;
 
@@ -68,9 +68,10 @@ export const aiChatPostHandler: RequestHandler = async (req, res, _next) => {
 	const stream = await createUiStream(validationResult.data, {
 		provider,
 		model,
-		tools: tools,
+		tools,
 		aiSettings,
 		systemPrompt: res.locals['ai'].systemPrompt,
+		...(context && { context }),
 		onUsage: (usage) => {
 			res.write(`data: ${JSON.stringify({ type: 'data-usage', data: usage })}\n\n`);
 		},
diff --git a/api/src/ai/chat/lib/create-ui-stream.ts b/api/src/ai/chat/lib/create-ui-stream.ts
index 068b7fb509693..d304b725546a5 100644
--- a/api/src/ai/chat/lib/create-ui-stream.ts
+++ b/api/src/ai/chat/lib/create-ui-stream.ts
@@ -16,6 +16,8 @@ import {
 	getProviderOptions,
 } from '../../providers/index.js';
 import { SYSTEM_PROMPT } from '../constants/system-prompt.js';
+import type { ChatContext } from '../models/chat-request.js';
+import { formatContextForSystemPrompt } from '../utils/format-context.js';
 
 export interface CreateUiStreamOptions {
 	provider: ProviderType;
@@ -23,12 +25,13 @@ export interface CreateUiStreamOptions {
 	tools: { [x: string]: Tool };
 	aiSettings: AISettings;
 	systemPrompt?: string;
+	context?: ChatContext;
 	onUsage?: (usage: Pick<LanguageModelUsage, 'inputTokens' | 'outputTokens' | 'totalTokens'>) => void | Promise<void>;
 }
 
 export const createUiStream = async (
 	messages: UIMessage[],
-	{ provider, model, tools, aiSettings, systemPrompt, onUsage }: CreateUiStreamOptions,
+	{ provider, model, tools, aiSettings, systemPrompt, context, onUsage }: CreateUiStreamOptions,
 ): Promise<StreamTextResult<Record<string, Tool<any, any>>, any>> => {
 	const configs = buildProviderConfigs(aiSettings);
 	const providerConfig = configs.find((c) => c.type === provider);
@@ -39,17 +42,32 @@ export const createUiStream = async (
 
 	const registry = createAIProviderRegistry(configs, aiSettings);
 
-	systemPrompt ||= SYSTEM_PROMPT;
-
+	const baseSystemPrompt = systemPrompt || SYSTEM_PROMPT;
+	const contextBlock = context ? formatContextForSystemPrompt(context) : null;
 	const providerOptions = getProviderOptions(provider, model, aiSettings);
+	// Compute the full system prompt once to avoid re-computing on each step
+	const fullSystemPrompt = contextBlock ? baseSystemPrompt + contextBlock : baseSystemPrompt;
 
 	const stream = streamText({
-		system: systemPrompt,
+		system: baseSystemPrompt,
 		model: registry.languageModel(`${provider}:${model}`),
 		messages: await convertToModelMessages(messages),
 		stopWhen: [stepCountIs(10)],
 		providerOptions,
 		tools,
+		/**
+		 * prepareStep is called before each AI step to prepare the system prompt.
+		 * When context exists, we override the system prompt to include context attachments.
+		 * This allows the initial system prompt to be simple while ensuring all steps
+		 * (including tool continuation steps) receive the full context.
+		 */
+		prepareStep: () => {
+			if (contextBlock) {
+				return { system: fullSystemPrompt };
+			}
+
+			return {};
+		},
 		onFinish({ usage }) {
 			if (onUsage) {
 				const { inputTokens, outputTokens, totalTokens } = usage;
diff --git a/api/src/ai/chat/models/chat-request.ts b/api/src/ai/chat/models/chat-request.ts
index 5ca59ab39f73e..edf9b6815e630 100644
--- a/api/src/ai/chat/models/chat-request.ts
+++ b/api/src/ai/chat/models/chat-request.ts
@@ -27,12 +27,78 @@ export type ChatRequestTool = z.infer<typeof ChatRequestTool>;
 export const ToolApprovalMode = z.enum(['always', 'ask', 'disabled']);
 export type ToolApprovalMode = z.infer<typeof ToolApprovalMode>;
 
+const ItemContextData = z.object({
+	collection: z.string(),
+	key: z.union([z.string(), z.number()]),
+});
+
+const VisualElementContextData = z.object({
+	key: z.string(),
+	collection: z.string(),
+	item: z.union([z.string(), z.number()]),
+	fields: z.array(z.string()).optional(),
+	rect: z
+		.object({
+			top: z.number(),
+			left: z.number(),
+			width: z.number(),
+			height: z.number(),
+		})
+		.optional(),
+});
+
+const PromptContextData = z.object({
+	text: z.string(),
+	prompt: z.record(z.string(), z.unknown()),
+	values: z.record(z.string(), z.string()),
+});
+
+export const ContextAttachment = z.discriminatedUnion('type', [
+	z.object({
+		type: z.literal('item'),
+		display: z.string(),
+		data: ItemContextData,
+		snapshot: z.record(z.string(), z.unknown()),
+	}),
+	z.object({
+		type: z.literal('visual-element'),
+		display: z.string(),
+		data: VisualElementContextData,
+		snapshot: z.record(z.string(), z.unknown()),
+	}),
+	z.object({
+		type: z.literal('prompt'),
+		display: z.string(),
+		data: PromptContextData,
+		snapshot: z.record(z.string(), z.unknown()),
+	}),
+]);
+
+export type ContextAttachment = z.infer<typeof ContextAttachment>;
+
+export const PageContext = z.object({
+	path: z.string(),
+	collection: z.string().optional(),
+	item: z.union([z.string(), z.number()]).optional(),
+	module: z.string().optional(),
+});
+
+export type PageContext = z.infer<typeof PageContext>;
+
+export const ChatContext = z.object({
+	attachments: z.array(ContextAttachment).max(10).optional(),
+	page: PageContext.optional(),
+});
+
+export type ChatContext = z.infer<typeof ChatContext>;
+
 export const ChatRequest = z.intersection(
 	z.discriminatedUnion('provider', [ProviderOpenAi, ProviderAnthropic, ProviderGoogle, ProviderOpenAiCompatible]),
 	z.object({
 		tools: z.array(ChatRequestTool),
 		messages: z.array(z.looseObject({})),
 		toolApprovals: z.record(z.string(), ToolApprovalMode).optional(),
+		context: ChatContext.optional(),
 	}),
 );
 
diff --git a/api/src/ai/chat/utils/format-context.test.ts b/api/src/ai/chat/utils/format-context.test.ts
new file mode 100644
index 0000000000000..e25b7f94bc994
--- /dev/null
+++ b/api/src/ai/chat/utils/format-context.test.ts
@@ -0,0 +1,306 @@
+import { describe, expect, test } from 'vitest';
+import { formatContextForSystemPrompt } from './format-context.js';
+
+describe('formatContextForSystemPrompt', () => {
+	test('includes current date even with empty context', () => {
+		const result = formatContextForSystemPrompt({});
+		expect(result).toContain('<user_context>');
+		expect(result).toContain('## Current Date');
+		expect(result).toMatch(/\d{4}-\d{2}-\d{2}/);
+	});
+
+	test('includes current date with empty attachments', () => {
+		const result = formatContextForSystemPrompt({ attachments: [] });
+		expect(result).toContain('<user_context>');
+		expect(result).toContain('## Current Date');
+	});
+
+	test('formats page context correctly', () => {
+		const result = formatContextForSystemPrompt({
+			page: {
+				path: '/content/posts/123',
+				collection: 'posts',
+				item: '123',
+				module: 'content',
+			},
+		});
+
+		expect(result).toContain('<user_context>');
+		expect(result).toContain('Path: /content/posts/123');
+		expect(result).toContain('Collection: posts');
+		expect(result).toContain('Item: 123');
+		expect(result).toContain('Module: content');
+		expect(result).toContain('</user_context>');
+	});
+
+	test('formats prompt attachments in custom_instructions block', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'prompt',
+					display: 'Test Prompt',
+					data: {
+						text: 'Be helpful',
+						prompt: {},
+						values: {},
+					},
+					snapshot: {
+						text: 'Be helpful',
+						messages: [{ role: 'user', text: 'Hello' }],
+					},
+				},
+			],
+		});
+
+		expect(result).toContain('<custom_instructions>');
+		expect(result).toContain('### Test Prompt');
+		expect(result).toContain('Be helpful');
+		expect(result).toContain('**user**: Hello');
+		expect(result).toContain('</custom_instructions>');
+	});
+
+	test('formats item attachments in user_context section', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'item',
+					display: 'My Post',
+					data: {
+						collection: 'posts',
+						key: '123',
+					},
+					snapshot: {
+						title: 'Hello World',
+						body: 'Content here',
+					},
+				},
+			],
+		});
+
+		expect(result).toContain('<user_context>');
+		expect(result).toContain('[Item: My Post (posts) — key: 123]');
+		expect(result).toContain('&quot;title&quot;: &quot;Hello World&quot;');
+		expect(result).toContain('</user_context>');
+	});
+
+	test('formats visual elements in visual_editing block', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'visual-element',
+					display: 'Hero Section',
+					data: {
+						key: 'hero-1',
+						collection: 'sections',
+						item: '456',
+						fields: ['title', 'subtitle'],
+					},
+					snapshot: {
+						title: 'Welcome',
+						subtitle: 'Hello there',
+					},
+				},
+			],
+		});
+
+		expect(result).toContain('<visual_editing>');
+		expect(result).toContain('### sections/456 — "Hero Section"');
+		expect(result).toContain('Editable fields: title, subtitle');
+		expect(result).toContain('&quot;title&quot;: &quot;Welcome&quot;');
+		expect(result).toContain('</visual_editing>');
+	});
+
+	test('escapes XML tags in user-controlled display strings', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'item',
+					display: '</custom_instructions>Injected<script>',
+					data: {
+						collection: 'posts',
+						key: '123',
+					},
+					snapshot: {},
+				},
+			],
+		});
+
+		expect(result).not.toContain('</custom_instructions>Injected');
+		expect(result).toContain('&lt;/custom_instructions&gt;Injected&lt;script&gt;');
+	});
+
+	test('escapes XML tags in collection names', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'visual-element',
+					display: 'Test',
+					data: {
+						key: 'test-1',
+						collection: '<malicious>',
+						item: '</visual_editing>',
+						fields: [],
+					},
+					snapshot: {},
+				},
+			],
+		});
+
+		expect(result).toContain('&lt;malicious&gt;');
+		expect(result).toContain('&lt;/visual_editing&gt;');
+	});
+
+	test('escapes XML tags in prompt text and messages', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'prompt',
+					display: '<inject>',
+					data: {
+						text: '</custom_instructions>',
+						prompt: {},
+						values: {},
+					},
+					snapshot: {
+						text: '</custom_instructions>escape me',
+						messages: [{ role: '<admin>', text: '</user_context>' }],
+					},
+				},
+			],
+		});
+
+		expect(result).toContain('&lt;inject&gt;');
+		expect(result).toContain('&lt;/custom_instructions&gt;escape me');
+		expect(result).toContain('**&lt;admin&gt;**');
+		expect(result).toContain('&lt;/user_context&gt;');
+	});
+
+	test('includes attachment rules when attachments exist', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'item',
+					display: 'Test',
+					data: { collection: 'test', key: '1' },
+					snapshot: {},
+				},
+			],
+		});
+
+		expect(result).toContain('## Attachment Rules');
+		expect(result).toContain('User-added attachments have HIGHER PRIORITY');
+	});
+
+	test('does not include attachment rules when no attachments', () => {
+		const result = formatContextForSystemPrompt({
+			page: { path: '/test' },
+		});
+
+		expect(result).not.toContain('## Attachment Rules');
+	});
+
+	test('formats visual elements with all fields when fields array is empty', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'visual-element',
+					display: 'Full Element',
+					data: {
+						key: 'elem-1',
+						collection: 'blocks',
+						item: '789',
+						fields: [],
+					},
+					snapshot: { content: 'test' },
+				},
+			],
+		});
+
+		expect(result).toContain('Editable fields: all');
+	});
+
+	test('handles quotes in display values', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'item',
+					display: 'She said "hello"',
+					data: { collection: 'posts', key: '1' },
+					snapshot: { title: 'test' },
+				},
+			],
+		});
+
+		expect(result).toContain('[Item: She said &quot;hello&quot; (posts) — key: 1]');
+	});
+
+	test('orders sections: custom_instructions before user_context before visual_editing', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'prompt',
+					display: 'My Prompt',
+					data: { text: 'Do stuff', prompt: {}, values: {} },
+					snapshot: { text: 'Do stuff', messages: [] },
+				},
+				{
+					type: 'item',
+					display: 'My Item',
+					data: { collection: 'posts', key: '1' },
+					snapshot: { title: 'test' },
+				},
+				{
+					type: 'visual-element',
+					display: 'My Element',
+					data: { key: 'el-1', collection: 'blocks', item: '1', fields: ['title'] },
+					snapshot: { title: 'test' },
+				},
+			],
+		});
+
+		const customIdx = result.indexOf('<custom_instructions>');
+		const userIdx = result.indexOf('<user_context>');
+		const visualIdx = result.indexOf('<visual_editing>');
+
+		expect(customIdx).toBeGreaterThan(-1);
+		expect(userIdx).toBeGreaterThan(-1);
+		expect(visualIdx).toBeGreaterThan(-1);
+		expect(customIdx).toBeLessThan(userIdx);
+		expect(userIdx).toBeLessThan(visualIdx);
+	});
+
+	test('handles empty display string', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'item',
+					display: '',
+					data: { collection: 'posts', key: '1' },
+					snapshot: { title: 'test' },
+				},
+			],
+		});
+
+		expect(result).toContain('[Item: ');
+		expect(result).toBeDefined();
+	});
+
+	test('formats item without collection label when collection is missing', () => {
+		const result = formatContextForSystemPrompt({
+			attachments: [
+				{
+					type: 'item',
+					display: 'Orphan Item',
+					data: {
+						collection: '',
+						key: '999',
+					},
+					snapshot: { value: 42 },
+				},
+			],
+		});
+
+		expect(result).toContain('[Item: Orphan Item — key: 999]');
+		expect(result).not.toContain('[Item: Orphan Item ()]');
+	});
+});
diff --git a/api/src/ai/chat/utils/format-context.ts b/api/src/ai/chat/utils/format-context.ts
new file mode 100644
index 0000000000000..b2d09bc4abfae
--- /dev/null
+++ b/api/src/ai/chat/utils/format-context.ts
@@ -0,0 +1,160 @@
+import type { ChatContext, ContextAttachment } from '../models/chat-request.js';
+
+function escapeAngleBrackets(text: string): string {
+	return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+interface PromptSnapshot {
+	text?: string;
+	messages?: { role: string; text: string }[];
+}
+
+interface GroupedAttachments {
+	visualElements: Extract<ContextAttachment, { type: 'visual-element' }>[];
+	prompts: Extract<ContextAttachment, { type: 'prompt' }>[];
+	items: Extract<ContextAttachment, { type: 'item' }>[];
+}
+
+function groupAttachments(attachments: ContextAttachment[]): GroupedAttachments {
+	const groups: GroupedAttachments = { visualElements: [], prompts: [], items: [] };
+
+	for (const att of attachments) {
+		switch (att.type) {
+			case 'visual-element':
+				groups.visualElements.push(att);
+				break;
+			case 'prompt':
+				groups.prompts.push(att);
+				break;
+			case 'item':
+				groups.items.push(att);
+				break;
+		}
+	}
+
+	return groups;
+}
+
+function formatVisualElement(att: ContextAttachment & { type: 'visual-element' }): string {
+	const fields = att.data.fields?.length ? att.data.fields.map((f) => escapeAngleBrackets(f)).join(', ') : 'all';
+	const collection = escapeAngleBrackets(String(att.data.collection));
+	const item = escapeAngleBrackets(String(att.data.item));
+	const display = escapeAngleBrackets(att.display);
+
+	return `### ${collection}/${item} — "${display}"
+Editable fields: ${fields}
+\`\`\`json
+${escapeAngleBrackets(JSON.stringify(att.snapshot, null, 2))}
+\`\`\``;
+}
+
+function formatPrompt(att: ContextAttachment & { type: 'prompt' }): string {
+	const snapshot = att.snapshot as PromptSnapshot;
+	const lines: string[] = [];
+	const display = escapeAngleBrackets(att.display);
+
+	if (snapshot.text) {
+		lines.push(escapeAngleBrackets(snapshot.text));
+	}
+
+	if (snapshot.messages?.length) {
+		lines.push('\n### Example Exchange');
+
+		for (const msg of snapshot.messages) {
+			const role = escapeAngleBrackets(msg.role);
+			const text = escapeAngleBrackets(msg.text);
+			lines.push(`**${role}**: ${text}`);
+		}
+	}
+
+	return `### ${display}\n${lines.join('\n')}`;
+}
+
+function formatItem(att: ContextAttachment & { type: 'item' }): string {
+	const display = escapeAngleBrackets(att.display);
+	const collectionLabel = att.data.collection ? ` (${escapeAngleBrackets(att.data.collection)})` : '';
+	const keyLabel = ` — key: ${escapeAngleBrackets(String(att.data.key))}`;
+	const collection = att.data.collection ? escapeAngleBrackets(att.data.collection) : '';
+
+	const updateHint = att.data.collection
+		? `\nTo update this item, use the items tool with: collection="${collection}", keys=["${escapeAngleBrackets(String(att.data.key))}"], action="update"`
+		: '\nUse the items tool to update this item.';
+
+	return `[Item: ${display}${collectionLabel}${keyLabel}]${updateHint}\n${escapeAngleBrackets(JSON.stringify(att.snapshot, null, 2))}`;
+}
+
+/**
+ * Format context for appending to system prompt
+ */
+export function formatContextForSystemPrompt(context: ChatContext): string {
+	const attachments = context.attachments ?? [];
+	const groups = groupAttachments(attachments);
+	const parts: string[] = [];
+
+	// 1. Custom instructions (prompts) - highest priority, placed first
+	if (groups.prompts.length > 0) {
+		const promptBlocks = groups.prompts.map(formatPrompt).join('\n\n');
+
+		parts.push(`<custom_instructions>
+The user has applied the following prompt(s) to guide your behavior:
+
+${promptBlocks}
+</custom_instructions>`);
+	}
+
+	// 2. User context (current page + items)
+	const sections: string[] = [];
+
+	const now = new Date();
+	sections.push(`## Current Date\n${now.toISOString().split('T')[0]}`);
+
+	if (context.page) {
+		const page = context.page;
+		const pageLines = [`Path: ${escapeAngleBrackets(String(page.path))}`];
+
+		if (page.collection) pageLines.push(`Collection: ${escapeAngleBrackets(String(page.collection))}`);
+		if (page.item !== undefined) pageLines.push(`Item: ${escapeAngleBrackets(String(page.item))}`);
+		if (page.module) pageLines.push(`Module: ${escapeAngleBrackets(String(page.module))}`);
+
+		sections.push(`## Current Page\n${pageLines.join('\n')}`);
+	}
+
+	if (groups.items.length > 0) {
+		const itemLines = groups.items.map(formatItem).join('\n\n');
+
+		sections.push(`## User-Added Context
+The user has attached these items as reference for their request.
+All root-level fields the user has access to are shown below — use these exact field names when updating.
+Use the items tool to fetch additional fields or update items when asked.
+
+${itemLines}`);
+	}
+
+	if (sections.length > 0) {
+		parts.push(`<user_context>\n${sections.join('\n\n')}\n</user_context>`);
+	}
+
+	// 3. Visual editing context
+	if (groups.visualElements.length > 0) {
+		const elementLines = groups.visualElements.map(formatVisualElement).join('\n\n');
+
+		parts.push(`<visual_editing>
+## Selected Elements
+The user selected these elements for editing in the visual editor.
+
+${elementLines}
+</visual_editing>`);
+	}
+
+	// 4. Attachment rules (only if any attachments exist)
+	if (attachments.length > 0) {
+		parts.push(`## Attachment Rules
+- User-added attachments have HIGHER PRIORITY than page context.
+- To modify attached items, ALWAYS use the items tool with action: 'update'. NEVER use form-values tools for attached items.
+- form-values tools ONLY affect the currently open page form, which may be a DIFFERENT item than what the user attached.`);
+	}
+
+	if (parts.length === 0) return '';
+
+	return '\n\n' + parts.join('\n\n');
+}
diff --git a/api/src/ai/tools/items/index.ts b/api/src/ai/tools/items/index.ts
index c4a3a018ddc66..a303e41d40921 100644
--- a/api/src/ai/tools/items/index.ts
+++ b/api/src/ai/tools/items/index.ts
@@ -53,7 +53,10 @@ const ItemsInputSchema = z.object({
 	collection: z.string().describe('The name of the collection'),
 	query: QueryInputSchema.optional(),
 	keys: z.array(PrimaryKeyInputSchema).optional(),
-	data: z.array(ItemInputSchema).optional().describe('Always an array of objects'),
+	data: z
+		.union([z.array(ItemInputSchema), ItemInputSchema])
+		.optional()
+		.describe('Object when using keys, array with PKs for batch updates'),
 });
 
 export const items = defineTool<z.infer<typeof ItemsValidateSchema>>({
diff --git a/api/src/ai/tools/items/prompt.md b/api/src/ai/tools/items/prompt.md
index b59b217cdb68c..7786ec672a372 100644
--- a/api/src/ai/tools/items/prompt.md
+++ b/api/src/ai/tools/items/prompt.md
@@ -99,7 +99,7 @@ Core: `_eq`, `_neq`, `_in`, `_nin`, `_null`, `_nnull`, `_lt`, `_lte`, `_gt`, `_g
 	"action": "update",
 	"collection": "posts",
 	"keys": ["uuid-1", "uuid-2"],
-	"data": [{ "status": "published" }] // Partial update
+	"data": { "status": "published" }
 }
 ```
 
@@ -123,15 +123,13 @@ Core: `_eq`, `_neq`, `_in`, `_nin`, `_null`, `_nnull`, `_lt`, `_lte`, `_gt`, `_g
 	"action": "update",
 	"collection": "posts",
 	"keys": ["uuid-1"],
-	"data": [
-		{
-			"categories": {
-				"create": [{ "name": "New Category" }],
-				"update": [{ "id": 3, "name": "Renamed" }],
-				"delete": [5]
-			}
+	"data": {
+		"categories": {
+			"create": [{ "name": "New Category" }],
+			"update": [{ "id": 3, "name": "Renamed" }],
+			"delete": [5]
 		}
-	]
+	}
 }
 ```
 
diff --git a/app/src/ai/components/ai-context-card.vue b/app/src/ai/components/ai-context-card.vue
new file mode 100644
index 0000000000000..b2f1d1796bee2
--- /dev/null
+++ b/app/src/ai/components/ai-context-card.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type { ContextAttachment } from '@directus/ai';
+import { computed } from 'vue';
+import type { PendingContextItem } from '../types';
+import VIcon from '@/components/v-icon/v-icon.vue';
+import VTextOverflow from '@/components/v-text-overflow.vue';
+import { useCollectionsStore } from '@/stores/collections';
+
+type ContextItem = ContextAttachment | PendingContextItem;
+
+const props = withDefaults(
+	defineProps<{
+		item: ContextItem;
+		removable?: boolean;
+	}>(),
+	{
+		removable: false,
+	},
+);
+
+const emit = defineEmits<{
+	remove: [];
+	mouseenter: [];
+	mouseleave: [];
+}>();
+
+const collectionsStore = useCollectionsStore();
+
+const icon = computed(() => {
+	switch (props.item.type) {
+		case 'visual-element': {
+			const collection = collectionsStore.getCollection(props.item.data.collection);
+			return collection?.icon || 'view_in_ar';
+		}
+
+		case 'item': {
+			const collection = collectionsStore.getCollection(props.item.data.collection);
+			return collection?.icon || 'database';
+		}
+
+		case 'prompt':
+			return 'magic_button';
+
+		default:
+			return 'attachment';
+	}
+});
+</script>
+
+<template>
+	<div class="ai-context-card" :class="{ removable }" @mouseenter="emit('mouseenter')" @mouseleave="emit('mouseleave')">
+		<div class="icon-wrapper">
+			<VIcon :name="icon" x-small class="item-icon" />
+		</div>
+		<VTextOverflow :text="String(item.display)" class="display-text" />
+		<button v-if="removable" type="button" class="close-button" :aria-label="$t('remove')" @click.stop="emit('remove')">
+			<VIcon name="close" small />
+		</button>
+	</div>
+</template>
+
+<style scoped>
+.ai-context-card {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 6px;
+	flex: 0 0 auto;
+	max-inline-size: 150px;
+	background-color: var(--theme--background);
+	border: 1px solid var(--theme--border-color);
+	border-radius: var(--theme--border-radius);
+
+	&.removable {
+		max-inline-size: 125px;
+		cursor: pointer;
+		transition:
+			border-color var(--fast) var(--transition),
+			background-color var(--fast) var(--transition);
+
+		&:hover {
+			border-color: var(--theme--border-color-accent);
+			background-color: var(--theme--background-normal);
+		}
+	}
+}
+
+.icon-wrapper {
+	flex-shrink: 0;
+	background-color: var(--theme--primary-background);
+	padding: 2px;
+	border-radius: var(--theme--border-radius);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.item-icon {
+	--v-icon-color: var(--purple);
+}
+
+.display-text {
+	flex: 1;
+	min-inline-size: 0;
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--theme--foreground);
+	line-height: 1.3;
+	margin: 0;
+}
+
+.close-button {
+	all: unset;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	border-radius: 4px;
+	cursor: pointer;
+	opacity: 0.5;
+	flex-shrink: 0;
+	transition:
+		opacity var(--fast) var(--transition),
+		background-color var(--fast) var(--transition);
+
+	--v-icon-color: var(--theme--foreground);
+
+	&:hover {
+		opacity: 1;
+		background-color: var(--theme--background-normal);
+	}
+
+	&:focus-visible {
+		opacity: 1;
+		outline: 2px solid var(--theme--primary);
+		outline-offset: 1px;
+	}
+}
+</style>
diff --git a/app/src/ai/components/ai-context-menu.vue b/app/src/ai/components/ai-context-menu.vue
new file mode 100644
index 0000000000000..3f1bf6caa166b
--- /dev/null
+++ b/app/src/ai/components/ai-context-menu.vue
@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import formatTitle from '@directus/format-title';
+import { computed, nextTick, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useContextStaging } from '../composables/use-context-staging';
+import { usePrompts } from '../composables/use-prompts';
+import { useSearchFilter } from '../composables/use-search-filter';
+import type { MCPPrompt } from '../types';
+import AiContextMenuItem from './ai-context-menu/context-menu-item.vue';
+import AiContextListView from './ai-context-menu/list-view.vue';
+import AiPromptVariablesModal from './ai-prompt-variables-modal.vue';
+import VButton from '@/components/v-button.vue';
+import VIcon from '@/components/v-icon/v-icon.vue';
+import VInput from '@/components/v-input.vue';
+import VMenu from '@/components/v-menu.vue';
+import { useCollectionsStore } from '@/stores/collections';
+import { useServerStore } from '@/stores/server';
+import { useSettingsStore } from '@/stores/settings';
+import type { Collection } from '@/types/collections';
+import { notify } from '@/utils/notify';
+import DrawerCollection from '@/views/private/components/drawer-collection.vue';
+
+const { t } = useI18n();
+const serverStore = useServerStore();
+const settingsStore = useSettingsStore();
+const collectionsStore = useCollectionsStore();
+const { fetchPrompts, extractVariables } = usePrompts();
+const { stagePrompt, stageItems } = useContextStaging();
+
+const prompts = ref<MCPPrompt[]>([]);
+const loading = ref(false);
+const searchQuery = ref('');
+const showVariablesModal = ref(false);
+const selectedPrompt = ref<MCPPrompt | null>(null);
+const selectedPromptVariables = ref<string[]>([]);
+const mainMenuOpen = ref(false);
+
+const showItemDrawer = ref(false);
+const selectedCollection = ref<string | null>(null);
+const searchInputRef = ref<InstanceType<typeof VInput> | null>(null);
+
+const openListType = ref<'prompts' | 'items' | null>(null);
+
+const isEnabled = computed(() => {
+	return !!settingsStore.settings?.mcp_prompts_collection;
+});
+
+const showPromptsOption = computed(() => {
+	return serverStore.info.mcp_enabled && isEnabled.value && prompts.value.length > 0;
+});
+
+const collections = computed(() => {
+	return collectionsStore.allCollections.filter((collection) => collection.type !== 'alias');
+});
+
+const filteredPrompts = useSearchFilter(prompts, searchQuery, ['name', 'description']);
+
+const filteredCollections = useSearchFilter(collections, searchQuery, [(c) => c.name, (c) => c.collection]);
+
+const showingSearchResults = computed(() => {
+	return searchQuery.value && searchQuery.value.length > 0;
+});
+
+const menuOptions = computed(() => {
+	const options = [];
+
+	if (showPromptsOption.value) {
+		options.push({
+			id: 'prompts',
+			icon: 'magic_button',
+			title: t('ai.prompts'),
+			subtitle: t('ai.insert_reusable_prompt'),
+			action: () => openList('prompts'),
+		});
+	}
+
+	options.push({
+		id: 'items',
+		icon: 'box',
+		title: t('ai.content'),
+		subtitle: t('ai.insert_item_context'),
+		action: () => openList('items'),
+	});
+
+	if (!searchQuery.value) return options;
+
+	const query = searchQuery.value.toLowerCase();
+	return options.filter((opt) => opt.title.toLowerCase().includes(query) || opt.subtitle.toLowerCase().includes(query));
+});
+
+async function loadPrompts() {
+	if (!isEnabled.value) return;
+
+	loading.value = true;
+
+	try {
+		prompts.value = await fetchPrompts();
+	} catch {
+		notify({
+			title: t('ai.failed_to_load_prompts'),
+		});
+	} finally {
+		loading.value = false;
+	}
+}
+
+function handleCollectionFromItemsList(collection: Collection) {
+	// Close menus
+	mainMenuOpen.value = false;
+	closeList();
+
+	// Open drawer for this collection
+	handleCollectionSelect(collection);
+}
+
+function handlePromptSelect(prompt: MCPPrompt) {
+	const variables = extractVariables(prompt);
+
+	mainMenuOpen.value = false;
+	closeList();
+
+	if (variables.length > 0) {
+		selectedPrompt.value = prompt;
+		selectedPromptVariables.value = variables;
+		showVariablesModal.value = true;
+	} else {
+		stagePrompt(prompt, {});
+	}
+}
+
+function handleVariablesSubmit(values: Record<string, string>) {
+	if (!selectedPrompt.value) return;
+
+	stagePrompt(selectedPrompt.value, values);
+
+	selectedPrompt.value = null;
+	selectedPromptVariables.value = [];
+	showVariablesModal.value = false;
+}
+
+function handleCollectionSelect(collection: Collection) {
+	selectedCollection.value = collection.collection;
+	mainMenuOpen.value = false;
+	showItemDrawer.value = true;
+}
+
+async function handleItemSelect(ids: (string | number)[] | null) {
+	showItemDrawer.value = false;
+
+	if (selectedCollection.value) {
+		await stageItems(selectedCollection.value, ids);
+	}
+
+	selectedCollection.value = null;
+}
+
+onMounted(() => {
+	loadPrompts();
+});
+
+function focusSearchInput() {
+	searchInputRef.value?.$el?.querySelector('input')?.focus();
+}
+
+async function handleMenuToggle(isOpen: boolean) {
+	mainMenuOpen.value = isOpen;
+
+	if (isOpen) {
+		await nextTick();
+		focusSearchInput();
+	}
+}
+
+async function openList(type: 'prompts' | 'items') {
+	openListType.value = type;
+	searchQuery.value = '';
+	await nextTick();
+	focusSearchInput();
+}
+
+function closeList() {
+	openListType.value = null;
+	searchQuery.value = '';
+}
+</script>
+
+<template>
+	<div class="ai-context-menu">
+		<VMenu
+			:model-value="mainMenuOpen"
+			placement="top-start"
+			show-arrow
+			:close-on-content-click="false"
+			@update:model-value="handleMenuToggle"
+		>
+			<template #activator="{ toggle }">
+				<VButton v-tooltip="t('ai.add_content')" x-small icon secondary :loading="loading" @click="toggle">
+					<VIcon name="add" small />
+				</VButton>
+			</template>
+
+			<div class="menu-container">
+				<div class="menu-header">
+					<VInput ref="searchInputRef" v-model="searchQuery" class="search-input" :placeholder="t('search')">
+						<template #prepend>
+							<VIcon name="search" small />
+						</template>
+						<template v-if="searchQuery" #append>
+							<VIcon name="close" small clickable @click="searchQuery = ''" />
+						</template>
+					</VInput>
+					<div v-if="openListType" class="list-header">
+						<VButton x-small icon secondary @click="closeList">
+							<VIcon name="arrow_back" small />
+						</VButton>
+						<span class="list-title">{{ openListType === 'prompts' ? t('ai.prompts') : t('ai.content') }}</span>
+					</div>
+				</div>
+
+				<div v-if="!openListType" class="menu-options-list">
+					<AiContextMenuItem
+						v-for="option in menuOptions"
+						:key="option.id"
+						:icon="option.icon"
+						:title="option.title"
+						:subtitle="option.subtitle"
+						@click="option.action"
+					/>
+
+					<template v-if="showingSearchResults">
+						<template v-if="showPromptsOption">
+							<AiContextMenuItem
+								v-for="prompt in filteredPrompts"
+								:key="prompt.id"
+								icon="chat_bubble"
+								:title="formatTitle(prompt.name)"
+								:badge="t('ai.prompt')"
+								:subtitle="prompt.description"
+								@click="handlePromptSelect(prompt)"
+							/>
+						</template>
+
+						<AiContextMenuItem
+							v-for="collection in filteredCollections"
+							:key="collection.collection"
+							:icon="collection.icon || 'dataset'"
+							:title="collection.name || formatTitle(collection.collection)"
+							:badge="t('collection')"
+							:subtitle="collection.collection"
+							@click="handleCollectionSelect(collection)"
+						/>
+
+						<div
+							v-if="menuOptions.length === 0 && filteredPrompts.length === 0 && filteredCollections.length === 0"
+							class="no-results"
+						>
+							{{ t('no_results') }}
+						</div>
+					</template>
+				</div>
+
+				<AiContextListView
+					v-if="openListType === 'prompts'"
+					:items="filteredPrompts"
+					item-key="id"
+					:empty-message="t('no_results')"
+				>
+					<template #item="{ item: prompt }: { item: MCPPrompt }">
+						<AiContextMenuItem
+							:title="formatTitle(prompt.name)"
+							:subtitle="prompt.description"
+							@click="handlePromptSelect(prompt)"
+						/>
+					</template>
+				</AiContextListView>
+
+				<AiContextListView
+					v-if="openListType === 'items'"
+					:items="filteredCollections"
+					item-key="collection"
+					:empty-message="t('no_results')"
+				>
+					<template #item="{ item: collection }: { item: Collection }">
+						<AiContextMenuItem
+							:icon="collection.icon || 'dataset'"
+							:title="collection.name || formatTitle(collection.collection)"
+							:subtitle="collection.collection"
+							@click="handleCollectionFromItemsList(collection)"
+						/>
+					</template>
+				</AiContextListView>
+			</div>
+		</VMenu>
+
+		<AiPromptVariablesModal
+			v-model="showVariablesModal"
+			:prompt="selectedPrompt"
+			:variables="selectedPromptVariables"
+			@submit="handleVariablesSubmit"
+		/>
+
+		<DrawerCollection
+			v-if="selectedCollection"
+			v-model:active="showItemDrawer"
+			:collection="selectedCollection"
+			multiple
+			@input="handleItemSelect"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.ai-context-menu {
+	display: inline-flex;
+}
+
+.menu-container {
+	min-inline-size: 320px;
+	max-inline-size: 400px;
+	max-block-size: 400px;
+	overflow-y: auto;
+}
+
+.menu-header {
+	position: sticky;
+	inset-block-start: 0;
+	z-index: 1;
+	background-color: var(--theme--popover--menu--background);
+}
+
+.search-input {
+	padding: 8px;
+}
+
+.list-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px;
+	border-block-end: var(--theme--border-width) solid var(--theme--border-color-subdued);
+}
+
+.list-title {
+	font-weight: 600;
+	font-size: 14px;
+	color: var(--theme--foreground);
+}
+
+.menu-options-list {
+	padding-block-end: 4px;
+}
+
+.no-results {
+	text-align: center;
+	color: var(--theme--foreground-subdued);
+	padding: 12px;
+}
+</style>
diff --git a/app/src/ai/components/ai-context-menu/context-menu-item.vue b/app/src/ai/components/ai-context-menu/context-menu-item.vue
new file mode 100644
index 0000000000000..72a95f3f54675
--- /dev/null
+++ b/app/src/ai/components/ai-context-menu/context-menu-item.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import VIcon from '@/components/v-icon/v-icon.vue';
+import VListItemContent from '@/components/v-list-item-content.vue';
+import VListItemIcon from '@/components/v-list-item-icon.vue';
+import VListItem from '@/components/v-list-item.vue';
+
+defineProps<{
+	title: string;
+	icon?: string;
+	subtitle?: string;
+	badge?: string;
+	disabled?: boolean;
+}>();
+
+defineEmits<{
+	(e: 'click'): void;
+}>();
+</script>
+
+<template>
+	<VListItem :disabled="disabled" clickable @click="$emit('click')">
+		<VListItemIcon v-if="icon">
+			<VIcon :name="icon" />
+		</VListItemIcon>
+		<VListItemContent>
+			<div class="item-content">
+				<div class="item-header">
+					<span class="item-title">{{ title }}</span>
+					<span v-if="badge" class="item-badge">{{ badge }}</span>
+				</div>
+				<div v-if="subtitle" class="item-subtitle">
+					{{ subtitle }}
+				</div>
+			</div>
+		</VListItemContent>
+	</VListItem>
+</template>
+
+<style scoped>
+.item-content {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.item-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-weight: 500;
+	color: var(--theme--foreground);
+}
+
+.item-badge {
+	display: inline-flex;
+	padding: 2px 6px;
+	font-size: 10px;
+	font-weight: 500;
+	text-transform: uppercase;
+	background-color: var(--theme--primary-background);
+	color: var(--theme--primary);
+	border-radius: var(--theme--border-radius);
+	letter-spacing: 0.5px;
+}
+
+.item-subtitle {
+	font-size: 12px;
+	color: var(--theme--foreground-subdued);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	line-clamp: 2;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+</style>
diff --git a/app/src/ai/components/ai-context-menu/empty-state.vue b/app/src/ai/components/ai-context-menu/empty-state.vue
new file mode 100644
index 0000000000000..da070b26d93cf
--- /dev/null
+++ b/app/src/ai/components/ai-context-menu/empty-state.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import VListItemContent from '@/components/v-list-item-content.vue';
+import VListItem from '@/components/v-list-item.vue';
+
+defineProps<{
+	message?: string;
+}>();
+</script>
+
+<template>
+	<VListItem disabled>
+		<VListItemContent>
+			<div class="no-results">
+				<slot>{{ message }}</slot>
+			</div>
+		</VListItemContent>
+	</VListItem>
+</template>
+
+<style scoped>
+.no-results {
+	text-align: center;
+	color: var(--theme--foreground-subdued);
+	padding: 12px;
+}
+</style>
diff --git a/app/src/ai/components/ai-context-menu/list-view.vue b/app/src/ai/components/ai-context-menu/list-view.vue
new file mode 100644
index 0000000000000..cbbac6be14c43
--- /dev/null
+++ b/app/src/ai/components/ai-context-menu/list-view.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts" generic="T">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AiEmptyState from './empty-state.vue';
+import VListItem from '@/components/v-list-item.vue';
+import VList from '@/components/v-list.vue';
+
+const props = withDefaults(
+	defineProps<{
+		items: T[];
+		itemKey: keyof T & string;
+		emptyMessage?: string;
+	}>(),
+	{
+		emptyMessage: undefined,
+	},
+);
+
+defineSlots<{ item(props: { item: T }): unknown }>();
+
+const { t } = useI18n();
+
+const displayMessage = computed(() => props.emptyMessage ?? t('no_results'));
+</script>
+
+<template>
+	<VList>
+		<template v-if="items.length > 0">
+			<VListItem v-for="item in items" :key="item[itemKey]">
+				<slot name="item" :item="item" />
+			</VListItem>
+		</template>
+
+		<AiEmptyState v-else :message="displayMessage" />
+	</VList>
+</template>
diff --git a/app/src/ai/components/ai-conversation.vue b/app/src/ai/components/ai-conversation.vue
index 5b3080877a99d..d069246c8a74d 100644
--- a/app/src/ai/components/ai-conversation.vue
+++ b/app/src/ai/components/ai-conversation.vue
@@ -75,6 +75,7 @@ function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
 <template>
 	<div class="ai-conversation">
 		<AiHeader v-if="hasProviders" />
+
 		<div ref="messages-container" class="messages-container">
 			<AiMessageList :messages="aiStore.messages" :status="aiStore.status" />
 
@@ -131,10 +132,12 @@ function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
 	flex: 1;
 	min-block-size: 0;
 	block-size: 100%;
+	position: relative;
 }
 
 .messages-container {
 	position: relative;
+	padding-inline: 8px;
 	flex: 1;
 	overflow-y: auto;
 	min-block-size: 0;
@@ -152,6 +155,7 @@ function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
 .input-container {
 	flex-shrink: 0;
 	position: relative;
+	padding-inline-end: 12px;
 }
 
 .error-message {
@@ -159,7 +163,7 @@ function scrollToBottom(behavior: ScrollBehavior = 'smooth') {
 	font-size: 0.875rem;
 	inline-size: 100%;
 	max-inline-size: 100%;
-	overflow-wrap: anywhere;
+	overflow-wrap: break-word;
 }
 
 .error-buttons-container {
diff --git a/app/src/ai/components/ai-input.vue b/app/src/ai/components/ai-input.vue
index 19b2231f729aa..fbc9d2040c6d2 100644
--- a/app/src/ai/components/ai-input.vue
+++ b/app/src/ai/components/ai-input.vue
@@ -1,10 +1,25 @@
 <script setup lang="ts">
-import { computed, useTemplateRef } from 'vue';
+import { computed, onUnmounted, useTemplateRef } from 'vue';
 import { useAiStore } from '../stores/use-ai';
+import { useAiContextStore } from '../stores/use-ai-context';
+import AiContextMenu from './ai-context-menu.vue';
 import AiInputSubmit from './ai-input-submit.vue';
+import AiPendingContext from './ai-pending-context.vue';
 import AiTextarea from './ai-textarea.vue';
 
 const aiStore = useAiStore();
+const contextStore = useAiContextStore();
+
+const textareaComponent = useTemplateRef<InstanceType<typeof AiTextarea>>('textarea-component');
+
+// Listen for focus requests from other components
+const unsubscribeFocus = aiStore.onFocusInput(() => {
+	textareaComponent.value?.focus();
+});
+
+onUnmounted(() => {
+	unsubscribeFocus.off();
+});
 
 const canSubmit = computed(
 	() =>
@@ -14,8 +29,6 @@ const canSubmit = computed(
 		!aiStore.hasPendingToolCall,
 );
 
-const textareaComponent = useTemplateRef<InstanceType<typeof AiTextarea>>('textarea-component');
-
 function handleKeydown(event: KeyboardEvent) {
 	if (!event.shiftKey) {
 		event.preventDefault();
@@ -36,6 +49,9 @@ function handleSubmit() {
 <template>
 	<div class="ai-input-container">
 		<div class="input-wrapper" @click="textareaComponent?.focus()">
+			<div v-if="contextStore.pendingContext.length > 0" class="context-container">
+				<AiPendingContext />
+			</div>
 			<AiTextarea
 				ref="textarea-component"
 				v-model="aiStore.input"
@@ -44,6 +60,8 @@ function handleSubmit() {
 				@keydown.enter="handleKeydown"
 			/>
 			<div class="input-controls">
+				<AiContextMenu />
+				<div class="spacer" />
 				<AiInputSubmit
 					:status="aiStore.status"
 					:can-submit="canSubmit"
@@ -67,7 +85,7 @@ function handleSubmit() {
 	flex-direction: column;
 	align-items: flex-end;
 	cursor: text;
-	gap: 8px;
+	gap: 12px;
 	padding: 12px;
 	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
 	border-radius: var(--theme--border-radius);
@@ -89,11 +107,28 @@ function handleSubmit() {
 	}
 }
 
+.context-container {
+	inline-size: 100%;
+	min-inline-size: 0;
+	align-self: flex-start;
+	overflow: hidden;
+
+	.v-chip {
+		--v-chip-close-color: var(--theme--background-normal);
+		--v-chip-close-color-hover: var(--theme--foreground-subdued);
+	}
+}
+
 .input-controls {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	flex-shrink: 0;
+	inline-size: 100%;
+
+	.spacer {
+		flex: 1;
+	}
 
 	.submit-button {
 		--v-button-background-color-disabled: var(--theme--background-accent);
diff --git a/app/src/ai/components/ai-message.vue b/app/src/ai/components/ai-message.vue
index bdf3da92eb3c7..4d38fd56a8d0d 100644
--- a/app/src/ai/components/ai-message.vue
+++ b/app/src/ai/components/ai-message.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import type { ContextAttachment } from '@directus/ai';
 import type { DynamicToolUIPart, UIMessagePart as SDKUIMessagePart, UIDataTypes, UITools } from 'ai';
+import { useVisualElementHighlight } from '../composables/use-visual-element-highlight';
+import AiContextCard from './ai-context-card.vue';
 import AiMessageFile from './parts/ai-message-file.vue';
 import AiMessageReasoning from './parts/ai-message-reasoning.vue';
 import AiMessageSourceDocument from './parts/ai-message-source-document.vue';
@@ -9,7 +12,6 @@ import AiMessageTool from './parts/ai-message-tool.vue';
 import VButton from '@/components/v-button.vue';
 import VIcon from '@/components/v-icon/v-icon.vue';
 
-// Alias for SDK message parts - component handles text/reasoning/file parts
 export type AiMessagePart = SDKUIMessagePart<UIDataTypes, UITools>;
 
 export interface AiMessageAction {
@@ -20,6 +22,10 @@ export interface AiMessageAction {
 	loading?: boolean;
 }
 
+export interface AiMessageMetadata {
+	attachments?: ContextAttachment[];
+}
+
 interface Props {
 	/** Message ID for tracking */
 	id?: string;
@@ -29,11 +35,17 @@ interface Props {
 	parts?: AiMessagePart[];
 	/** Action buttons displayed below message */
 	actions?: AiMessageAction[];
+	/** Message metadata including context attachments */
+	metadata?: AiMessageMetadata;
 }
 
 withDefaults(defineProps<Props>(), {
 	parts: () => [],
 });
+
+const { highlight, clearHighlight } = useVisualElementHighlight();
+
+const isToolPart = (part: AiMessagePart): part is DynamicToolUIPart => part.type.startsWith('tool-');
 </script>
 
 <template>
@@ -53,10 +65,21 @@ withDefaults(defineProps<Props>(), {
 					<AiMessageFile v-else-if="part.type === 'file'" :part="part" />
 					<AiMessageSourceUrl v-else-if="part.type === 'source-url'" :part="part" />
 					<AiMessageSourceDocument v-else-if="part.type === 'source-document'" :part="part" />
-					<AiMessageTool v-else-if="part.type.startsWith('tool-')" :part="part as DynamicToolUIPart" />
+					<AiMessageTool v-else-if="isToolPart(part)" :part="part" />
 				</template>
 			</slot>
 
+			<!-- Context attachments from metadata (user messages only) -->
+			<div v-if="role === 'user' && metadata?.attachments?.length" class="context-attachments">
+				<AiContextCard
+					v-for="(attachment, index) in metadata.attachments"
+					:key="`${attachment.type}-${index}`"
+					:item="attachment"
+					@mouseenter="highlight(attachment)"
+					@mouseleave="clearHighlight()"
+				/>
+			</div>
+
 			<div v-if="actions && actions.length > 0" class="message-actions">
 				<VButton
 					v-for="(action, index) in actions"
@@ -129,4 +152,10 @@ withDefaults(defineProps<Props>(), {
 	align-items: center;
 	margin-block-start: 0.25rem;
 }
+
+.context-attachments {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
 </style>
diff --git a/app/src/ai/components/ai-pending-context.vue b/app/src/ai/components/ai-pending-context.vue
new file mode 100644
index 0000000000000..1a06bd3dea9c9
--- /dev/null
+++ b/app/src/ai/components/ai-pending-context.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
+import { useVisualElementHighlight } from '../composables/use-visual-element-highlight';
+import { useAiContextStore } from '../stores/use-ai-context';
+import type { PendingContextItem } from '../types';
+import AiContextCard from './ai-context-card.vue';
+
+const contextStore = useAiContextStore();
+const { highlight, clearHighlight } = useVisualElementHighlight();
+
+const scrollContainerRef = useTemplateRef<HTMLElement>('scroll-container');
+const showLeftFade = ref(false);
+const showRightFade = ref(false);
+
+let resizeObserver: ResizeObserver | null = null;
+
+function updateFades() {
+	const el = scrollContainerRef.value;
+
+	if (!el) return;
+
+	const hasOverflow = el.scrollWidth > el.clientWidth;
+
+	if (hasOverflow) {
+		showLeftFade.value = el.scrollLeft > 0;
+		// -1 accounts for sub-pixel rounding in scrollWidth
+		showRightFade.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+	} else {
+		showLeftFade.value = false;
+		showRightFade.value = false;
+	}
+}
+
+onMounted(() => {
+	updateFades();
+
+	if (scrollContainerRef.value) {
+		resizeObserver = new ResizeObserver(updateFades);
+		resizeObserver.observe(scrollContainerRef.value);
+	}
+});
+
+onUnmounted(() => {
+	resizeObserver?.disconnect();
+});
+
+function handleRemove(item: PendingContextItem) {
+	clearHighlight();
+	contextStore.removePendingContext(item.id);
+}
+</script>
+
+<template>
+	<div
+		v-if="contextStore.pendingContext && contextStore.pendingContext.length > 0"
+		class="ai-pending-context-wrapper"
+		:class="{
+			'show-left-fade': showLeftFade,
+			'show-right-fade': showRightFade,
+		}"
+	>
+		<div ref="scroll-container" class="ai-pending-context" @scroll="updateFades">
+			<AiContextCard
+				v-for="item in contextStore.pendingContext"
+				:key="item.id"
+				:item="item"
+				removable
+				@remove="handleRemove(item)"
+				@mouseenter="highlight(item)"
+				@mouseleave="clearHighlight()"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.ai-pending-context-wrapper {
+	--fade-size: 24px;
+	--fade-color: var(--theme--form--field--input--background);
+
+	position: relative;
+	inline-size: 100%;
+	min-inline-size: 0;
+
+	/* Left fade */
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inline-size: var(--fade-size);
+		pointer-events: none;
+		z-index: 1;
+		opacity: 0;
+		transition: opacity var(--fast) var(--transition);
+	}
+
+	&::before {
+		inset-inline-start: 0;
+		background: linear-gradient(to right, var(--fade-color), transparent);
+	}
+
+	&::after {
+		inset-inline-end: 0;
+		background: linear-gradient(to left, var(--fade-color), transparent);
+	}
+
+	/* Show fades based on scroll state via CSS custom properties set by JS */
+	&.show-left-fade::before {
+		opacity: 1;
+	}
+
+	&.show-right-fade::after {
+		opacity: 1;
+	}
+}
+
+.ai-pending-context {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 8px;
+	inline-size: 100%;
+	min-inline-size: 0;
+	overflow: auto hidden;
+	padding-block-end: 4px;
+
+	/* Styled scrollbar for Firefox */
+	scrollbar-width: thin;
+	scrollbar-color: var(--theme--border-color-accent) transparent;
+
+	/* Styled scrollbar for WebKit browsers */
+	&::-webkit-scrollbar {
+		block-size: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--theme--border-color);
+		border-radius: 3px;
+		transition: background var(--fast) var(--transition);
+
+		&:hover {
+			background: var(--theme--border-color-accent);
+		}
+	}
+}
+</style>
diff --git a/app/src/ai/components/ai-prompt-variables-modal.vue b/app/src/ai/components/ai-prompt-variables-modal.vue
new file mode 100644
index 0000000000000..0d4b21e80968e
--- /dev/null
+++ b/app/src/ai/components/ai-prompt-variables-modal.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { MCPPrompt } from '../types';
+import VButton from '@/components/v-button.vue';
+import VCardActions from '@/components/v-card-actions.vue';
+import VCardText from '@/components/v-card-text.vue';
+import VCardTitle from '@/components/v-card-title.vue';
+import VCard from '@/components/v-card.vue';
+import VDialog from '@/components/v-dialog.vue';
+import VInput from '@/components/v-input.vue';
+
+interface Props {
+	prompt: MCPPrompt | null;
+	variables: string[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	submit: [values: Record<string, string>];
+	cancel: [];
+}>();
+
+const modelValue = defineModel<boolean>({ required: true });
+
+const { t } = useI18n();
+
+const variableValues = ref<Record<string, string>>({});
+
+const canSubmit = computed(() => {
+	return props.variables.every((variable) => {
+		const value = variableValues.value[variable];
+		return value !== undefined && value !== null && value.trim().length > 0;
+	});
+});
+
+function handleSubmit() {
+	if (!canSubmit.value) return;
+
+	emit('submit', { ...variableValues.value });
+	closeDialog();
+}
+
+function closeDialog() {
+	modelValue.value = false;
+	variableValues.value = {};
+}
+</script>
+
+<template>
+	<VDialog v-model="modelValue" persistent @esc="closeDialog">
+		<VCard>
+			<VCardTitle>{{ prompt?.name ?? t('ai.insert_prompt') }}</VCardTitle>
+			<VCardText>
+				<p v-if="prompt?.description" class="prompt-description">{{ prompt.description }}</p>
+				<div class="variables-form">
+					<VInput
+						v-for="(variable, index) in variables"
+						:key="variable"
+						v-model="variableValues[variable]"
+						:label="variable"
+						:placeholder="variable"
+						:autofocus="index === 0"
+					/>
+				</div>
+			</VCardText>
+			<VCardActions>
+				<VButton secondary @click="closeDialog">
+					{{ t('cancel') }}
+				</VButton>
+				<VButton :disabled="!canSubmit" @click="handleSubmit">
+					{{ t('ai.insert_prompt') }}
+				</VButton>
+			</VCardActions>
+		</VCard>
+	</VDialog>
+</template>
+
+<style scoped>
+.prompt-description {
+	margin-block-end: 1rem;
+	color: var(--theme--foreground-subdued);
+}
+
+.variables-form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+</style>
diff --git a/app/src/ai/components/ai-settings-menu.vue b/app/src/ai/components/ai-settings-menu.vue
index 760df1379a486..f5002889014e6 100644
--- a/app/src/ai/components/ai-settings-menu.vue
+++ b/app/src/ai/components/ai-settings-menu.vue
@@ -3,7 +3,7 @@ import { type SystemTool, type ToolApprovalMode } from '@directus/ai';
 import formatTitle from '@directus/format-title';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useAiStore } from '../stores/use-ai';
+import { useAiToolsStore } from '../stores/use-ai-tools';
 import VButton from '@/components/v-button.vue';
 import VDivider from '@/components/v-divider.vue';
 import VIcon from '@/components/v-icon/v-icon.vue';
@@ -16,7 +16,7 @@ import VMenu from '@/components/v-menu.vue';
 import VSelect from '@/components/v-select/v-select.vue';
 
 const { t } = useI18n();
-const aiStore = useAiStore();
+const toolsStore = useAiToolsStore();
 
 const menuOpen = ref(false);
 const searchQuery = ref('');
@@ -25,7 +25,7 @@ watch(menuOpen, (open) => {
 	if (!open) searchQuery.value = '';
 });
 
-const systemTools = aiStore.systemTools;
+const systemTools = toolsStore.systemTools;
 
 const filterBySearch = (tools: string[]) => {
 	if (!searchQuery.value) return tools;
@@ -34,11 +34,11 @@ const filterBySearch = (tools: string[]) => {
 };
 
 const enabledTools = computed(() =>
-	filterBySearch(systemTools.filter((t) => aiStore.getToolApprovalMode(t) !== 'disabled')),
+	filterBySearch(systemTools.filter((t) => toolsStore.getToolApprovalMode(t) !== 'disabled')),
 );
 
 const disabledTools = computed(() =>
-	filterBySearch(systemTools.filter((t) => aiStore.getToolApprovalMode(t) === 'disabled')),
+	filterBySearch(systemTools.filter((t) => toolsStore.getToolApprovalMode(t) === 'disabled')),
 );
 
 const approvalModeOptions = computed(() => [
@@ -65,7 +65,7 @@ const toolOptions = computed(() => {
 	const map = new Map<string, { icon: string; approval: (typeof approvalModeOptions.value)[0] }>();
 
 	for (const tool of systemTools) {
-		const mode = aiStore.getToolApprovalMode(tool);
+		const mode = toolsStore.getToolApprovalMode(tool);
 
 		map.set(tool, {
 			icon: toolIcons[tool] || 'build',
@@ -77,7 +77,7 @@ const toolOptions = computed(() => {
 });
 
 function onApprovalModeChange(toolName: string, mode: ToolApprovalMode) {
-	aiStore.setToolApprovalMode(toolName, mode);
+	toolsStore.setToolApprovalMode(toolName, mode);
 }
 </script>
 
@@ -118,7 +118,7 @@ function onApprovalModeChange(toolName: string, mode: ToolApprovalMode) {
 										{{ $t(`ai_tools.${toolName}`) }}
 									</span>
 									<VSelect
-										:model-value="aiStore.getToolApprovalMode(toolName)"
+										:model-value="toolsStore.getToolApprovalMode(toolName)"
 										:items="approvalModeOptions"
 										item-icon="icon"
 										item-color="color"
@@ -127,7 +127,7 @@ function onApprovalModeChange(toolName: string, mode: ToolApprovalMode) {
 									>
 										<template #preview>
 											<div class="approval-preview" :style="{ color: toolOptions.get(toolName)?.approval?.color }">
-												<VIcon :name="toolOptions.get(toolName)?.approval?.icon" x-small />
+												<VIcon :name="toolOptions.get(toolName)?.approval?.icon ?? 'check'" x-small />
 												{{ toolOptions.get(toolName)?.approval?.text }}
 											</div>
 										</template>
@@ -157,7 +157,7 @@ function onApprovalModeChange(toolName: string, mode: ToolApprovalMode) {
 										{{ formatTitle(toolName) }}
 									</span>
 									<VSelect
-										:model-value="aiStore.getToolApprovalMode(toolName)"
+										:model-value="toolsStore.getToolApprovalMode(toolName)"
 										:items="approvalModeOptions"
 										item-icon="icon"
 										item-color="color"
@@ -166,7 +166,7 @@ function onApprovalModeChange(toolName: string, mode: ToolApprovalMode) {
 									>
 										<template #preview>
 											<div class="approval-preview" :style="{ color: toolOptions.get(toolName)?.approval?.color }">
-												<VIcon :name="toolOptions.get(toolName)?.approval?.icon" x-small />
+												<VIcon :name="toolOptions.get(toolName)?.approval?.icon ?? 'check'" x-small />
 												{{ toolOptions.get(toolName)?.approval?.text }}
 											</div>
 										</template>
diff --git a/app/src/ai/components/parts/ai-message-file.vue b/app/src/ai/components/parts/ai-message-file.vue
index 82b8cd5f82869..3278141ae0db0 100644
--- a/app/src/ai/components/parts/ai-message-file.vue
+++ b/app/src/ai/components/parts/ai-message-file.vue
@@ -1,20 +1,44 @@
 <script setup lang="ts">
 import type { FileUIPart } from 'ai';
+import { computed, ref } from 'vue';
 import VIcon from '@/components/v-icon/v-icon.vue';
 import VImage from '@/components/v-image.vue';
+import FileLightbox from '@/views/private/components/file-lightbox.vue';
 
-defineProps<{
+const props = defineProps<{
 	part: FileUIPart;
 }>();
+
+const lightboxActive = ref(false);
+
+const file = computed(() => ({
+	id: '', // Not used for local files/data URLs in this context
+	title: props.part.filename || '',
+	type: props.part.mediaType || 'application/octet-stream',
+	modified_on: new Date().toISOString(),
+	width: 0,
+	height: 0,
+	data: props.part.url, // Pass the data URL directly if supported by file-preview or handle it
+}));
 </script>
 
 <template>
 	<div class="message-file">
-		<VImage v-if="part.mediaType?.startsWith('image/')" :src="part.url" :alt="part.filename" />
+		<button
+			v-if="part.mediaType?.startsWith('image/')"
+			type="button"
+			class="image-preview"
+			:aria-label="part.filename || $t('ai.image_preview')"
+			@click="lightboxActive = true"
+		>
+			<VImage :src="part.url" :alt="part.filename || $t('ai.image_preview')" />
+		</button>
 		<div v-else class="file-attachment">
 			<VIcon name="attach_file" small />
 			<span>{{ part.filename || $t('file') }}</span>
 		</div>
+
+		<FileLightbox v-model="lightboxActive" :file="file" :src="part.url" />
 	</div>
 </template>
 
@@ -22,9 +46,24 @@ defineProps<{
 .message-file {
 	margin: 0.5rem 0;
 
-	.v-image {
-		max-inline-size: 100%;
+	.image-preview {
+		cursor: zoom-in;
+		inline-size: 100%;
+		max-inline-size: 128px;
 		border-radius: var(--theme--border-radius);
+		overflow: hidden;
+		padding: 0;
+		border: none;
+		background: none;
+		display: block;
+	}
+
+	img {
+		inline-size: 100%;
+		block-size: 100%;
+		object-fit: cover;
+		aspect-ratio: 1;
+		display: block;
 	}
 
 	.file-attachment {
diff --git a/app/src/ai/components/parts/ai-message-tool.vue b/app/src/ai/components/parts/ai-message-tool.vue
index a563a561f0c65..41fb973466c0a 100644
--- a/app/src/ai/components/parts/ai-message-tool.vue
+++ b/app/src/ai/components/parts/ai-message-tool.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import formatTitle from '@directus/format-title';
-import type { UIDataTypes, UIMessagePart, UITools } from 'ai';
+import type { DynamicToolUIPart } from 'ai';
 import { computed } from 'vue';
 import AiToolCallCard from './ai-tool-call-card.vue';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import VNotice from '@/components/v-notice.vue';
 import VTextOverflow from '@/components/v-text-overflow.vue';
 
-const aiStore = useAiStore();
+const toolsStore = useAiToolsStore();
 
 const props = defineProps<{
-	part: Extract<UIMessagePart<UIDataTypes, UITools>, { type: `tool-${string}` }>;
+	part: DynamicToolUIPart;
 }>();
 
 const toolName = computed(() => {
@@ -18,7 +18,7 @@ const toolName = computed(() => {
 });
 
 const toolDisplayName = computed(() => {
-	const localTool = aiStore.localTools.find((t) => t.name === toolName.value);
+	const localTool = toolsStore.localTools.find((t) => t.name === toolName.value);
 
 	if (localTool) {
 		return localTool.displayName;
diff --git a/app/src/ai/components/parts/ai-tool-call-card.vue b/app/src/ai/components/parts/ai-tool-call-card.vue
index 1451af0f7f554..714e4ac8e2813 100644
--- a/app/src/ai/components/parts/ai-tool-call-card.vue
+++ b/app/src/ai/components/parts/ai-tool-call-card.vue
@@ -3,12 +3,14 @@ import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import VButton from '@/components/v-button.vue';
 import VChip from '@/components/v-chip.vue';
 import VIcon from '@/components/v-icon/v-icon.vue';
 import VProgressCircular from '@/components/v-progress-circular.vue';
 
 const aiStore = useAiStore();
+const toolsStore = useAiToolsStore();
 const { t } = useI18n();
 
 const props = defineProps<{
@@ -53,7 +55,7 @@ const handleDeny = () => {
 };
 
 const handleAlwaysAllow = () => {
-	aiStore.setToolApprovalMode(props.toolName, 'always');
+	toolsStore.setToolApprovalMode(props.toolName, 'always');
 
 	if (props.approval?.id) {
 		aiStore.approveToolCall(props.approval.id);
diff --git a/app/src/ai/composables/define-tool.test.ts b/app/src/ai/composables/define-tool.test.ts
index df332235a25fb..fc2e788a28fab 100644
--- a/app/src/ai/composables/define-tool.test.ts
+++ b/app/src/ai/composables/define-tool.test.ts
@@ -8,8 +8,8 @@ const registerLocalTool = vi.fn();
 const replaceLocalTool = vi.fn();
 const deregisterLocalTool = vi.fn();
 
-vi.mock('../stores/use-ai', () => ({
-	useAiStore: () => ({
+vi.mock('../stores/use-ai-tools', () => ({
+	useAiToolsStore: () => ({
 		registerLocalTool,
 		replaceLocalTool,
 		deregisterLocalTool,
diff --git a/app/src/ai/composables/define-tool.ts b/app/src/ai/composables/define-tool.ts
index 4c66a1449de43..c958fb21ffc8c 100644
--- a/app/src/ai/composables/define-tool.ts
+++ b/app/src/ai/composables/define-tool.ts
@@ -1,7 +1,7 @@
 import formatTitle from '@directus/format-title';
 import { type MaybeRefOrGetter, onMounted, onUnmounted, toValue, unref, watch } from 'vue';
 import { z, ZodObject } from 'zod';
-import { useAiStore } from '../stores/use-ai';
+import { useAiToolsStore } from '../stores/use-ai-tools';
 
 export interface StaticToolDefinition<T = ZodObject> {
 	name: string;
@@ -51,21 +51,21 @@ export const toStatic = <T>(toolGetter: MaybeRefOrGetter<ToolDefinition<T>>): St
 };
 
 export const defineTool = <T extends ZodObject>(tool: MaybeRefOrGetter<ToolDefinition<T>>) => {
-	const aiStore = useAiStore();
+	const toolsStore = useAiToolsStore();
 
 	watch(
 		() => toValue(tool),
 		(newDef, oldDef) => {
-			aiStore.replaceLocalTool(toValue(toValue(oldDef).name), toStatic(newDef));
+			toolsStore.replaceLocalTool(toValue(oldDef.name), toStatic(newDef));
 		},
 		{ deep: true },
 	);
 
 	onMounted(() => {
-		aiStore.registerLocalTool(toStatic(tool));
+		toolsStore.registerLocalTool(toStatic(tool));
 	});
 
 	onUnmounted(() => {
-		aiStore.deregisterLocalTool(toStatic(tool).name);
+		toolsStore.deregisterLocalTool(toStatic(tool).name);
 	});
 };
diff --git a/app/src/ai/composables/use-context-staging.test.ts b/app/src/ai/composables/use-context-staging.test.ts
new file mode 100644
index 0000000000000..91ad4bac223a1
--- /dev/null
+++ b/app/src/ai/composables/use-context-staging.test.ts
@@ -0,0 +1,371 @@
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { useAiStore } from '../stores/use-ai';
+import { useAiContextStore } from '../stores/use-ai-context';
+import { useContextStaging } from './use-context-staging';
+import api from '@/api';
+import { notify } from '@/utils/notify';
+import { unexpectedError } from '@/utils/unexpected-error';
+
+vi.mock('vue-i18n', () => ({
+	useI18n: vi.fn(() => ({
+		t: vi.fn((key: string) => key),
+	})),
+	createI18n: () => undefined,
+}));
+
+vi.mock('@/api', () => ({
+	default: {
+		get: vi.fn(),
+	},
+}));
+
+vi.mock('@/utils/notify', () => ({
+	notify: vi.fn(),
+}));
+
+vi.mock('@/utils/unexpected-error', () => ({
+	unexpectedError: vi.fn(),
+}));
+
+vi.mock('@/utils/render-string-template', () => ({
+	renderDisplayStringTemplate: vi.fn((collection, _template, item) => item.title || `${collection} #${item.id}`),
+}));
+
+vi.mock('@/utils/adjust-fields-for-displays', () => ({
+	adjustFieldsForDisplays: vi.fn((fields) => fields),
+}));
+
+vi.mock('./use-prompts', () => ({
+	usePrompts: vi.fn(() => ({
+		convertToUIMessages: vi.fn((_prompt, _values) => [
+			{
+				id: 'msg-1',
+				role: 'system',
+				parts: [{ type: 'text', text: 'Test message' }],
+			},
+		]),
+	})),
+}));
+
+// Mock stores
+vi.mock('@/stores/collections', () => ({
+	useCollectionsStore: vi.fn(() => ({
+		getCollection: vi.fn((collection) => {
+			if (collection === 'invalid') return null;
+			return {
+				collection,
+				meta: { display_template: '{{ title }}' },
+			};
+		}),
+	})),
+}));
+
+vi.mock('@/stores/fields', () => ({
+	useFieldsStore: vi.fn(() => ({
+		getPrimaryKeyFieldForCollection: vi.fn(() => ({ field: 'id' })),
+	})),
+}));
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+			stubActions: false,
+		}),
+	);
+
+	vi.clearAllMocks();
+
+	// Reset window.opener
+	Object.defineProperty(window, 'opener', {
+		value: null,
+		writable: true,
+	});
+});
+
+describe('useContextStaging', () => {
+	describe('stagePrompt', () => {
+		test('adds prompt context to pending', () => {
+			const contextStore = useAiContextStore();
+			const addSpy = vi.spyOn(contextStore, 'addPendingContext');
+			const { stagePrompt } = useContextStaging();
+
+			const prompt = { id: '1', name: 'Test Prompt', status: 'published' as const };
+
+			stagePrompt(prompt, { name: 'value' });
+
+			expect(addSpy).toHaveBeenCalled();
+			const call = addSpy.mock.calls[0]![0];
+			expect(call.type).toBe('prompt');
+			expect(call.display).toBe('Test Prompt');
+		});
+
+		test('notifies success', () => {
+			const { stagePrompt } = useContextStaging();
+
+			stagePrompt({ id: '1', name: 'Test', status: 'published' }, {});
+
+			expect(notify).toHaveBeenCalledWith({
+				title: 'ai.prompt_staged',
+				type: 'success',
+			});
+		});
+
+		test('handles errors', () => {
+			const contextStore = useAiContextStore();
+
+			vi.spyOn(contextStore, 'addPendingContext').mockImplementation(() => {
+				throw new Error('Test error');
+			});
+
+			const { stagePrompt } = useContextStaging();
+
+			stagePrompt({ id: '1', name: 'Test', status: 'published' }, {});
+
+			expect(unexpectedError).toHaveBeenCalled();
+		});
+	});
+
+	describe('stageItems', () => {
+		test('returns early for empty ids', async () => {
+			const { stageItems } = useContextStaging();
+
+			await stageItems('posts', []);
+			await stageItems('posts', null);
+
+			expect(api.get).not.toHaveBeenCalled();
+		});
+
+		test('returns early for empty collection', async () => {
+			const { stageItems } = useContextStaging();
+
+			await stageItems('', ['1']);
+
+			expect(api.get).not.toHaveBeenCalled();
+		});
+
+		test('notifies error for invalid collection', async () => {
+			const { stageItems } = useContextStaging();
+
+			await stageItems('invalid', ['1']);
+
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.invalid_collection' });
+		});
+
+		test('fetches items and adds to context', async () => {
+			const contextStore = useAiContextStore();
+			const addSpy = vi.spyOn(contextStore, 'addPendingContext');
+
+			vi.mocked(api.get).mockResolvedValue({
+				data: {
+					data: [
+						{ id: 1, title: 'Post 1' },
+						{ id: 2, title: 'Post 2' },
+					],
+				},
+			});
+
+			const { stageItems } = useContextStaging();
+
+			await stageItems('posts', [1, 2]);
+
+			expect(api.get).toHaveBeenCalled();
+			expect(addSpy).toHaveBeenCalledTimes(2);
+
+			const firstCall = addSpy.mock.calls[0]![0];
+			expect(firstCall.type).toBe('item');
+
+			if (firstCall.type === 'item') {
+				expect(firstCall.data.collection).toBe('posts');
+			}
+		});
+
+		test('notifies success after staging', async () => {
+			vi.mocked(api.get).mockResolvedValue({
+				data: { data: [{ id: 1, title: 'Test' }] },
+			});
+
+			const { stageItems } = useContextStaging();
+
+			await stageItems('posts', [1]);
+
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.items_staged' });
+		});
+
+		test('handles API errors', async () => {
+			const error = new Error('API Error');
+			vi.mocked(api.get).mockRejectedValue(error);
+
+			const { stageItems } = useContextStaging();
+
+			await stageItems('posts', [1]);
+
+			expect(unexpectedError).toHaveBeenCalledWith(error);
+		});
+	});
+
+	describe('stageVisualElement', () => {
+		test('forwards to parent window if opener exists', async () => {
+			const postMessageMock = vi.fn();
+
+			Object.defineProperty(window, 'opener', {
+				value: { postMessage: postMessageMock },
+				writable: true,
+			});
+
+			Object.defineProperty(window, 'location', {
+				value: { origin: 'http://localhost:3000' },
+				writable: true,
+			});
+
+			const { stageVisualElement } = useContextStaging();
+			const element = { collection: 'posts', item: '1', key: 'key-1' };
+
+			const result = await stageVisualElement(element);
+
+			expect(postMessageMock).toHaveBeenCalledWith(
+				{ action: 'stage-visual-element', data: { element } },
+				'http://localhost:3000',
+			);
+
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.element_staged' });
+			expect(result).toBe(true);
+		});
+
+		test('returns false for invalid collection', async () => {
+			const { stageVisualElement } = useContextStaging();
+
+			const result = await stageVisualElement({ collection: 'invalid', item: '1', key: 'key-1' });
+
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.invalid_collection' });
+			expect(result).toBe(false);
+		});
+
+		test('updates existing element when duplicate is staged', async () => {
+			const contextStore = useAiContextStore();
+
+			vi.mocked(api.get).mockResolvedValue({
+				data: { data: { id: '1', title: 'Post 1' } },
+			});
+
+			// Add existing element
+			contextStore.pendingContext.push({
+				id: 'existing',
+				type: 'visual-element',
+				data: { collection: 'posts', item: '1', key: 'key-1', fields: ['status', 'title'] },
+				display: 'Existing',
+			});
+
+			const { stageVisualElement } = useContextStaging();
+
+			const result = await stageVisualElement({
+				collection: 'posts',
+				item: '1',
+				key: 'key-2',
+				fields: ['title', 'status'],
+			});
+
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.element_already_staged' });
+			expect(result).toBe(false);
+			expect(contextStore.pendingContext[0]?.data.key).toBe('key-2');
+		});
+
+		test('returns false when max limit reached', async () => {
+			const contextStore = useAiContextStore();
+			vi.spyOn(contextStore, 'addPendingContext').mockReturnValue(false);
+
+			vi.mocked(api.get).mockResolvedValue({
+				data: { data: { id: '1', title: 'Post 1' } },
+			});
+
+			const { stageVisualElement } = useContextStaging();
+
+			const result = await stageVisualElement({ collection: 'posts', item: '1', key: 'key-1' });
+
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.max_elements_reached' });
+			expect(result).toBe(false);
+		});
+
+		test('adds element and opens chat on success', async () => {
+			const aiStore = useAiStore();
+			const contextStore = useAiContextStore();
+			const addSpy = vi.spyOn(contextStore, 'addPendingContext').mockReturnValue(true);
+			const focusSpy = vi.spyOn(aiStore, 'focusInput').mockImplementation(() => {});
+
+			vi.mocked(api.get).mockResolvedValue({
+				data: { data: { id: '1', title: 'My Post' } },
+			});
+
+			const { stageVisualElement } = useContextStaging();
+
+			const result = await stageVisualElement({ collection: 'posts', item: '1', key: 'key-1' });
+
+			expect(addSpy).toHaveBeenCalled();
+			expect(notify).toHaveBeenCalledWith({ title: 'ai.element_staged' });
+			expect(aiStore.chatOpen).toBe(true);
+			expect(focusSpy).toHaveBeenCalled();
+			expect(result).toBe(true);
+		});
+
+		test('uses single field value as display when element has exactly one field', async () => {
+			const aiStore = useAiStore();
+			const contextStore = useAiContextStore();
+			const addSpy = vi.spyOn(contextStore, 'addPendingContext').mockReturnValue(true);
+			vi.spyOn(aiStore, 'focusInput').mockImplementation(() => {});
+
+			vi.mocked(api.get).mockResolvedValue({
+				data: { data: { headline: 'Breaking News' } },
+			});
+
+			const { stageVisualElement } = useContextStaging();
+
+			await stageVisualElement({ collection: 'posts', item: '1', key: 'key-1', fields: ['headline'] });
+
+			const call = addSpy.mock.calls[0]![0];
+			expect(call.display).toBe('Breaking News');
+			expect(api.get).toHaveBeenCalledWith('/items/posts/1', { params: { fields: ['headline'] } });
+		});
+
+		test('uses formatted collection name when no display_template', async () => {
+			const aiStore = useAiStore();
+			const contextStore = useAiContextStore();
+			const addSpy = vi.spyOn(contextStore, 'addPendingContext').mockReturnValue(true);
+			vi.spyOn(aiStore, 'focusInput').mockImplementation(() => {});
+
+			const { useCollectionsStore } = await import('@/stores/collections');
+
+			vi.mocked(useCollectionsStore).mockReturnValueOnce({
+				getCollection: vi.fn((collection) => ({
+					collection,
+					meta: { display_template: null },
+				})),
+			} as any);
+
+			const { stageVisualElement } = useContextStaging();
+
+			await stageVisualElement({ collection: 'blog_posts', item: '1', key: 'key-1' });
+
+			const call = addSpy.mock.calls[0]![0];
+			expect(call.display).toBe('Blog Posts');
+			expect(api.get).not.toHaveBeenCalled();
+		});
+
+		test('uses fallback display value when fetch fails', async () => {
+			const aiStore = useAiStore();
+			const contextStore = useAiContextStore();
+			const addSpy = vi.spyOn(contextStore, 'addPendingContext').mockReturnValue(true);
+			vi.spyOn(aiStore, 'focusInput').mockImplementation(() => {});
+
+			vi.mocked(api.get).mockRejectedValue(new Error('API Error'));
+
+			const { stageVisualElement } = useContextStaging();
+
+			await stageVisualElement({ collection: 'posts', item: '42', key: 'key-1' });
+
+			const call = addSpy.mock.calls[0]![0];
+			expect(call.display).toBe('Posts');
+		});
+	});
+});
diff --git a/app/src/ai/composables/use-context-staging.ts b/app/src/ai/composables/use-context-staging.ts
new file mode 100644
index 0000000000000..61c7b610adc08
--- /dev/null
+++ b/app/src/ai/composables/use-context-staging.ts
@@ -0,0 +1,219 @@
+import type { VisualElementContextData } from '@directus/ai';
+import formatTitle from '@directus/format-title';
+import { getEndpoint, getFieldsFromTemplate } from '@directus/utils';
+import { nanoid } from 'nanoid';
+import { useI18n } from 'vue-i18n';
+import { useAiStore } from '../stores/use-ai';
+import { useAiContextStore } from '../stores/use-ai-context';
+import type { MCPPrompt } from '../types';
+import { usePrompts } from './use-prompts';
+import api from '@/api';
+import { useCollectionsStore } from '@/stores/collections';
+import { useFieldsStore } from '@/stores/fields';
+import { notify } from '@/utils/notify';
+import { renderDisplayStringTemplate } from '@/utils/render-string-template';
+import { unexpectedError } from '@/utils/unexpected-error';
+
+export function useContextStaging() {
+	const { t } = useI18n();
+	const aiStore = useAiStore();
+	const contextStore = useAiContextStore();
+	const collectionsStore = useCollectionsStore();
+	const fieldsStore = useFieldsStore();
+	const { convertToUIMessages } = usePrompts();
+
+	function normalizeFields(fields: string[] | undefined): string[] {
+		if (!fields?.length) return [];
+		return fields.filter((f) => f.length > 0).sort();
+	}
+
+	// Visual elements are identified by collection + item + fields, not DOM element key.
+	function isSameVisualElement(left: VisualElementContextData, right: VisualElementContextData) {
+		if (left.collection !== right.collection) return false;
+		if (String(left.item) !== String(right.item)) return false;
+
+		const leftFields = normalizeFields(left.fields);
+		const rightFields = normalizeFields(right.fields);
+
+		if (leftFields.length !== rightFields.length) return false;
+
+		return leftFields.every((field, index) => field === rightFields[index]);
+	}
+
+	function stagePrompt(prompt: MCPPrompt, values: Record<string, string>) {
+		try {
+			const messages = convertToUIMessages(prompt, values);
+
+			const text = messages.flatMap((m) => m.parts.filter((p) => p.type === 'text').map((p) => p.text)).join('\n\n');
+
+			const added = contextStore.addPendingContext({
+				id: nanoid(),
+				type: 'prompt',
+				data: { text, prompt, values },
+				display: formatTitle(prompt.name),
+			});
+
+			if (!added) {
+				notify({ title: t('ai.max_elements_reached') });
+				return;
+			}
+
+			notify({
+				title: t('ai.prompt_staged'),
+				type: 'success',
+			});
+		} catch (error) {
+			unexpectedError(error);
+		}
+	}
+
+	async function stageItems(collection: string, ids: (string | number)[] | null) {
+		if (!ids || ids.length === 0 || !collection) return;
+
+		const collectionInfo = collectionsStore.getCollection(collection);
+
+		if (!collectionInfo) {
+			notify({ title: t('ai.invalid_collection') });
+			return;
+		}
+
+		const primaryKey = fieldsStore.getPrimaryKeyFieldForCollection(collection)?.field ?? 'id';
+		const displayTemplate = collectionInfo.meta?.display_template || `{{ ${primaryKey} }}`;
+		const displayFields = getFieldsFromTemplate(displayTemplate);
+
+		try {
+			const response = await api.get(getEndpoint(collection), {
+				params: {
+					fields: [primaryKey, ...displayFields],
+					filter: { [primaryKey]: { _in: ids } },
+				},
+			});
+
+			const items: Record<string, unknown>[] = response.data.data ?? [];
+
+			let stagedCount = 0;
+
+			for (const item of items) {
+				const itemId = item[primaryKey] as string | number;
+
+				const displayValue =
+					renderDisplayStringTemplate(collection, displayTemplate, item) || `${collection} #${itemId}`;
+
+				const added = contextStore.addPendingContext({
+					id: nanoid(),
+					type: 'item',
+					data: { collection, key: itemId },
+					display: displayValue,
+				});
+
+				if (!added) break;
+				stagedCount++;
+			}
+
+			if (stagedCount === 0) {
+				notify({ title: t('ai.max_elements_reached') });
+			} else if (stagedCount < items.length) {
+				notify({ title: t('ai.some_items_staged', { count: stagedCount }) });
+			} else {
+				notify({ title: t('ai.items_staged') });
+			}
+		} catch (error) {
+			unexpectedError(error);
+		}
+	}
+
+	async function stageVisualElement(element: VisualElementContextData) {
+		// If in popup, forward to parent window
+		if (window.opener) {
+			window.opener.postMessage({ action: 'stage-visual-element', data: { element } }, window.location.origin);
+
+			notify({ title: t('ai.element_staged') });
+			return true;
+		}
+
+		const collectionInfo = collectionsStore.getCollection(element.collection);
+
+		if (!collectionInfo) {
+			notify({ title: t('ai.invalid_collection') });
+			return false;
+		}
+
+		const display = await fetchDisplayValue(element, collectionInfo);
+
+		const existingContext = contextStore.pendingContext.find(
+			(item) => item.type === 'visual-element' && isSameVisualElement(item.data, element),
+		);
+
+		if (existingContext) {
+			contextStore.updateVisualElementContext(existingContext.id, element, display);
+			notify({ title: t('ai.element_already_staged') });
+			return false;
+		}
+
+		const added = contextStore.addPendingContext({
+			id: nanoid(),
+			type: 'visual-element',
+			data: element,
+			display,
+		});
+
+		if (!added) {
+			notify({ title: t('ai.max_elements_reached') });
+			return false;
+		}
+
+		notify({ title: t('ai.element_staged') });
+		aiStore.chatOpen = true;
+		aiStore.focusInput();
+		return true;
+	}
+
+	async function fetchDisplayValue(
+		element: VisualElementContextData,
+		collectionInfo: ReturnType<typeof collectionsStore.getCollection>,
+	): Promise<string> {
+		const fallback = formatTitle(element.collection);
+
+		if (!element.item || element.item === '+') return fallback;
+
+		try {
+			if (element.fields?.length === 1) {
+				const field = element.fields[0]!;
+
+				const response = await api.get(`${getEndpoint(element.collection)}/${encodeURIComponent(element.item)}`, {
+					params: { fields: [field] },
+				});
+
+				const item = response.data.data;
+				if (item?.[field]) return String(item[field]);
+				return fallback;
+			}
+
+			if (!collectionInfo?.meta?.display_template) {
+				return formatTitle(element.collection);
+			}
+
+			const primaryKey = fieldsStore.getPrimaryKeyFieldForCollection(element.collection)?.field ?? 'id';
+			const displayTemplate = collectionInfo.meta.display_template;
+			const displayFields = getFieldsFromTemplate(displayTemplate);
+
+			const response = await api.get(`${getEndpoint(element.collection)}/${encodeURIComponent(element.item)}`, {
+				params: { fields: [primaryKey, ...displayFields] },
+			});
+
+			const item = response.data.data;
+
+			if (!item) return fallback;
+
+			return renderDisplayStringTemplate(element.collection, displayTemplate, item) || fallback;
+		} catch {
+			return fallback;
+		}
+	}
+
+	return {
+		stagePrompt,
+		stageItems,
+		stageVisualElement,
+	};
+}
diff --git a/app/src/ai/composables/use-prompts.test.ts b/app/src/ai/composables/use-prompts.test.ts
new file mode 100644
index 0000000000000..73b6ca6133062
--- /dev/null
+++ b/app/src/ai/composables/use-prompts.test.ts
@@ -0,0 +1,322 @@
+import { useApi } from '@directus/composables';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import type { MCPPrompt } from '../types';
+import { usePrompts } from './use-prompts';
+
+vi.mock('@directus/composables', () => ({
+	useApi: vi.fn(() => ({
+		get: vi.fn(),
+	})),
+}));
+
+vi.mock('@/stores/settings', () => ({
+	useSettingsStore: vi.fn(() => ({
+		settings: {
+			mcp_prompts_collection: 'ai_prompts',
+		},
+	})),
+}));
+
+vi.mock('ai', () => ({
+	generateId: vi.fn(() => 'mock-id'),
+}));
+
+beforeEach(() => {
+	vi.clearAllMocks();
+});
+
+describe('usePrompts', () => {
+	describe('sanitizeTemplate (via extractVariables)', () => {
+		test('removes descriptions from {{ var: desc }}', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: '{{ name: Enter your name }}',
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toEqual(['name']);
+		});
+
+		test('handles multiple variables with descriptions', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'Hello {{ name: Your name }}, you are {{ age: Your age }} years old',
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toContain('name');
+			expect(vars).toContain('age');
+		});
+	});
+
+	describe('extractVariables', () => {
+		test('extracts vars from system_prompt', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'Hello {{ name }}, welcome to {{ place }}',
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toEqual(['name', 'place']);
+		});
+
+		test('extracts vars from messages', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				messages: [
+					{ role: 'user', text: 'My name is {{ name }}' },
+					{ role: 'assistant', text: 'Hello {{ name }}, how can I help with {{ topic }}?' },
+				],
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toContain('name');
+			expect(vars).toContain('topic');
+		});
+
+		test('deduplicates variables', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: '{{ name }} {{ name }}',
+				messages: [{ role: 'user', text: '{{ name }}' }],
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toEqual(['name']);
+		});
+
+		test('returns empty array for no variables', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'Plain text',
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toEqual([]);
+		});
+
+		test('handles missing system_prompt and messages', () => {
+			const { extractVariables } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+			};
+
+			const vars = extractVariables(prompt);
+			expect(vars).toEqual([]);
+		});
+	});
+
+	describe('renderPrompt', () => {
+		test('substitutes values in system_prompt', () => {
+			const { renderPrompt } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'Hello {{ name }}',
+			};
+
+			const result = renderPrompt(prompt, { name: 'World' });
+			expect(result.system_prompt).toBe('Hello World');
+		});
+
+		test('substitutes values in messages', () => {
+			const { renderPrompt } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				messages: [{ role: 'user', text: 'My name is {{ name }}' }],
+			};
+
+			const result = renderPrompt(prompt, { name: 'Alice' });
+			expect(result.messages[0]!.text).toBe('My name is Alice');
+			expect(result.messages[0]!.role).toBe('user');
+		});
+
+		test('handles render failures by using original text', () => {
+			const { renderPrompt } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				// Invalid template syntax that might cause render to fail
+				system_prompt: 'Hello {{ name }}',
+			};
+
+			// Missing value should still work (micromustache returns empty string)
+			const result = renderPrompt(prompt, {});
+			expect(result.system_prompt).toBeDefined();
+		});
+
+		test('handles empty messages array', () => {
+			const { renderPrompt } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				messages: [],
+			};
+
+			const result = renderPrompt(prompt, {});
+			expect(result.messages).toEqual([]);
+		});
+
+		test('handles missing messages', () => {
+			const { renderPrompt } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+			};
+
+			const result = renderPrompt(prompt, {});
+			expect(result.messages).toEqual([]);
+		});
+	});
+
+	describe('convertToUIMessages', () => {
+		test('creates system message from system_prompt', () => {
+			const { convertToUIMessages } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'You are a helpful assistant',
+			};
+
+			const messages = convertToUIMessages(prompt, {});
+
+			expect(messages).toHaveLength(1);
+			expect(messages[0]!.role).toBe('system');
+
+			expect(messages[0]!.parts[0]).toEqual({
+				type: 'text',
+				text: 'You are a helpful assistant',
+				state: 'done',
+			});
+		});
+
+		test('creates conversation messages', () => {
+			const { convertToUIMessages } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				messages: [
+					{ role: 'user', text: 'Hello' },
+					{ role: 'assistant', text: 'Hi there!' },
+				],
+			};
+
+			const messages = convertToUIMessages(prompt, {});
+
+			expect(messages).toHaveLength(2);
+			expect(messages[0]!.role).toBe('user');
+			expect(messages[1]!.role).toBe('assistant');
+		});
+
+		test('combines system and conversation messages', () => {
+			const { convertToUIMessages } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'System prompt',
+				messages: [{ role: 'user', text: 'User message' }],
+			};
+
+			const messages = convertToUIMessages(prompt, {});
+
+			expect(messages).toHaveLength(2);
+			expect(messages[0]!.role).toBe('system');
+			expect(messages[1]!.role).toBe('user');
+		});
+
+		test('applies variable substitution', () => {
+			const { convertToUIMessages } = usePrompts();
+
+			const prompt: MCPPrompt = {
+				id: '1',
+				name: 'test',
+				status: 'published',
+				system_prompt: 'Help {{ name }}',
+				messages: [{ role: 'user', text: 'My name is {{ name }}' }],
+			};
+
+			const messages = convertToUIMessages(prompt, { name: 'Bob' });
+
+			const firstPart = messages[0]?.parts[0];
+			const secondPart = messages[1]?.parts[0];
+
+			expect(firstPart?.type).toBe('text');
+			expect(secondPart?.type).toBe('text');
+
+			if (firstPart?.type === 'text') {
+				expect(firstPart.text).toBe('Help Bob');
+			}
+
+			if (secondPart?.type === 'text') {
+				expect(secondPart.text).toBe('My name is Bob');
+			}
+		});
+	});
+
+	describe('fetchPrompts', () => {
+		test('fetches prompts from configured collection', async () => {
+			const mockGet = vi.fn().mockResolvedValue({
+				data: { data: [{ id: '1', name: 'Test Prompt' }] },
+			});
+
+			vi.mocked(useApi).mockReturnValue({ get: mockGet } as any);
+
+			// Must call usePrompts AFTER setting the mock return value
+			const { fetchPrompts } = usePrompts();
+			await fetchPrompts();
+
+			expect(mockGet).toHaveBeenCalledWith('/items/ai_prompts', {
+				params: {
+					fields: ['id', 'name', 'description', 'status', 'system_prompt', 'messages'],
+					filter: { status: { _eq: 'published' } },
+					sort: 'name',
+					limit: -1,
+				},
+			});
+		});
+	});
+});
diff --git a/app/src/ai/composables/use-prompts.ts b/app/src/ai/composables/use-prompts.ts
new file mode 100644
index 0000000000000..fe8c3319d4cee
--- /dev/null
+++ b/app/src/ai/composables/use-prompts.ts
@@ -0,0 +1,175 @@
+import { useApi } from '@directus/composables';
+import { generateId, type UIMessage } from 'ai';
+import { render, tokenize } from 'micromustache';
+import type { MCPPrompt } from '../types';
+import { useSettingsStore } from '@/stores/settings';
+
+/**
+ * Sanitize template text by removing descriptions after colons in variable placeholders
+ * Converts {{ variable: description }} to {{ variable }}
+ */
+function sanitizeTemplate(text: string): string {
+	return text.replace(/\{\{\s*([^:}]+):[^}]*\}\}/g, '{{ $1 }}');
+}
+
+export function usePrompts() {
+	const api = useApi();
+	const settingsStore = useSettingsStore();
+
+	/**
+	 * Fetch published MCP prompts from the configured collection
+	 */
+	async function fetchPrompts(): Promise<MCPPrompt[]> {
+		const collection = settingsStore.settings?.mcp_prompts_collection;
+
+		if (!collection) {
+			return [];
+		}
+
+		const response = await api.get(`/items/${collection}`, {
+			params: {
+				fields: ['id', 'name', 'description', 'status', 'system_prompt', 'messages'],
+				filter: {
+					status: { _eq: 'published' },
+				},
+				sort: 'name',
+				limit: -1,
+			},
+		});
+
+		return response.data.data || [];
+	}
+
+	/**
+	 * Extract variable names from prompt text using micromustache
+	 */
+	function extractVariables(prompt: MCPPrompt): string[] {
+		const variables = new Set<string>();
+
+		// Extract from system_prompt
+		if (prompt.system_prompt) {
+			try {
+				const sanitized = sanitizeTemplate(prompt.system_prompt);
+				const tokens = tokenize(sanitized);
+
+				for (const varName of tokens.varNames) {
+					variables.add(varName);
+				}
+			} catch {
+				// If tokenize fails, skip
+			}
+		}
+
+		// Extract from messages
+		if (prompt.messages && Array.isArray(prompt.messages)) {
+			prompt.messages.forEach((message) => {
+				try {
+					const sanitized = sanitizeTemplate(message.text);
+					const tokens = tokenize(sanitized);
+
+					for (const varName of tokens.varNames) {
+						variables.add(varName);
+					}
+				} catch {
+					// If tokenize fails, skip
+				}
+			});
+		}
+
+		return Array.from(variables);
+	}
+
+	/**
+	 * Render a prompt with provided variable values
+	 */
+	function renderPrompt(
+		prompt: MCPPrompt,
+		values: Record<string, string>,
+	): {
+		system_prompt?: string;
+		messages: { role: 'user' | 'assistant'; text: string }[];
+	} {
+		let renderedSystemPrompt: string | undefined = undefined;
+
+		if (prompt.system_prompt) {
+			try {
+				const sanitized = sanitizeTemplate(prompt.system_prompt);
+				renderedSystemPrompt = render(sanitized, values);
+			} catch {
+				// If render fails, use the original text as-is
+				renderedSystemPrompt = prompt.system_prompt;
+			}
+		}
+
+		const renderedMessages =
+			prompt.messages && Array.isArray(prompt.messages)
+				? prompt.messages.map((msg) => {
+						try {
+							const sanitized = sanitizeTemplate(msg.text);
+							return {
+								role: msg.role,
+								text: render(sanitized, values),
+							};
+						} catch {
+							// If render fails, use the original text as-is
+							return {
+								role: msg.role,
+								text: msg.text,
+							};
+						}
+					})
+				: [];
+
+		return {
+			system_prompt: renderedSystemPrompt,
+			messages: renderedMessages,
+		};
+	}
+
+	/**
+	 * Convert MCP prompt to UIMessage array for chat
+	 */
+	function convertToUIMessages(prompt: MCPPrompt, values: Record<string, string>): UIMessage[] {
+		const rendered = renderPrompt(prompt, values);
+		const messages: UIMessage[] = [];
+
+		// Add system prompt as system message
+		if (rendered.system_prompt) {
+			messages.push({
+				id: generateId(),
+				role: 'system',
+				parts: [
+					{
+						type: 'text',
+						text: rendered.system_prompt,
+						state: 'done',
+					},
+				],
+			});
+		}
+
+		// Add conversation messages
+		rendered.messages.forEach((msg) => {
+			messages.push({
+				id: generateId(),
+				role: msg.role,
+				parts: [
+					{
+						type: 'text',
+						text: msg.text,
+						state: 'done',
+					},
+				],
+			});
+		});
+
+		return messages;
+	}
+
+	return {
+		fetchPrompts,
+		extractVariables,
+		renderPrompt,
+		convertToUIMessages,
+	};
+}
diff --git a/app/src/ai/composables/use-search-filter.ts b/app/src/ai/composables/use-search-filter.ts
new file mode 100644
index 0000000000000..ea118add80c8f
--- /dev/null
+++ b/app/src/ai/composables/use-search-filter.ts
@@ -0,0 +1,21 @@
+import { computed, type Ref } from 'vue';
+
+export function useSearchFilter<T>(
+	items: Ref<T[]>,
+	searchQuery: Ref<string>,
+	keys: (keyof T | ((item: T) => string))[],
+) {
+	return computed(() => {
+		if (!searchQuery.value) return items.value;
+		const query = searchQuery.value.toLowerCase();
+
+		return items.value.filter((item) => {
+			return keys.some((key) => {
+				const value = typeof key === 'function' ? key(item) : item[key];
+				return String(value ?? '')
+					.toLowerCase()
+					.includes(query);
+			});
+		});
+	});
+}
diff --git a/app/src/ai/composables/use-visual-element-highlight.ts b/app/src/ai/composables/use-visual-element-highlight.ts
new file mode 100644
index 0000000000000..0a2dc05353792
--- /dev/null
+++ b/app/src/ai/composables/use-visual-element-highlight.ts
@@ -0,0 +1,23 @@
+import type { ContextAttachment } from '@directus/ai';
+import { useAiStore } from '../stores/use-ai';
+import type { PendingContextItem } from '../types';
+
+export function useVisualElementHighlight() {
+	const aiStore = useAiStore();
+
+	function highlight(item: PendingContextItem | ContextAttachment) {
+		if (item.type === 'visual-element') {
+			aiStore.highlightVisualElement({
+				collection: item.data.collection,
+				item: item.data.item,
+				fields: item.data.fields,
+			});
+		}
+	}
+
+	function clearHighlight() {
+		aiStore.highlightVisualElement(null);
+	}
+
+	return { highlight, clearHighlight };
+}
diff --git a/app/src/ai/stores/use-ai-context.test.ts b/app/src/ai/stores/use-ai-context.test.ts
new file mode 100644
index 0000000000000..28befe68fdd53
--- /dev/null
+++ b/app/src/ai/stores/use-ai-context.test.ts
@@ -0,0 +1,335 @@
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import type { PendingContextItem } from '../types';
+import { MAX_PENDING_CONTEXT, useAiContextStore } from './use-ai-context';
+import api from '@/api';
+import { unexpectedError } from '@/utils/unexpected-error';
+
+vi.mock('@/api', () => ({
+	default: {
+		get: vi.fn(),
+	},
+}));
+
+vi.mock('@/utils/unexpected-error', () => ({
+	unexpectedError: vi.fn(),
+}));
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+			stubActions: false,
+		}),
+	);
+
+	vi.clearAllMocks();
+});
+
+const createVisualElement = (key: string): PendingContextItem => ({
+	id: key,
+	type: 'visual-element',
+	data: {
+		collection: 'posts',
+		item: '1',
+		key,
+		fields: ['title'],
+	},
+	display: `Post ${key}`,
+});
+
+const createItemContext = (id: string, itemId: string = '1'): PendingContextItem => ({
+	id,
+	type: 'item',
+	data: {
+		collection: 'posts',
+		key: itemId,
+	},
+	display: `Item ${id}`,
+});
+
+const createPromptContext = (id: string): PendingContextItem => ({
+	id,
+	type: 'prompt',
+	data: {
+		text: 'Test prompt',
+		prompt: { id: '1', name: 'test', status: 'published' },
+		values: {},
+	},
+	display: `Prompt ${id}`,
+});
+
+describe('useAiContextStore', () => {
+	describe('addPendingContext', () => {
+		test('adds item to pendingContext', () => {
+			const store = useAiContextStore();
+			const item = createItemContext('1');
+
+			const result = store.addPendingContext(item);
+
+			expect(result).toBe(true);
+			expect(store.pendingContext).toHaveLength(1);
+			expect(store.pendingContext[0]).toStrictEqual(item);
+		});
+
+		test('enforces MAX_PENDING_CONTEXT across all types', () => {
+			const store = useAiContextStore();
+
+			// Add a mix of types up to the limit
+			for (let i = 0; i < MAX_PENDING_CONTEXT - 2; i++) {
+				const result = store.addPendingContext(createVisualElement(`key-${i}`));
+				expect(result).toBe(true);
+			}
+
+			expect(store.addPendingContext(createItemContext('item-1'))).toBe(true);
+			expect(store.addPendingContext(createPromptContext('prompt-1'))).toBe(true);
+			expect(store.pendingContext).toHaveLength(MAX_PENDING_CONTEXT);
+
+			// All types should be rejected when at cap
+			expect(store.addPendingContext(createVisualElement('key-overflow'))).toBe(false);
+			expect(store.addPendingContext(createItemContext('item-overflow'))).toBe(false);
+			expect(store.addPendingContext(createPromptContext('prompt-overflow'))).toBe(false);
+			expect(store.pendingContext).toHaveLength(MAX_PENDING_CONTEXT);
+		});
+	});
+
+	describe('removePendingContext', () => {
+		test('removes item by id', () => {
+			const store = useAiContextStore();
+
+			store.addPendingContext(createItemContext('1'));
+			store.addPendingContext(createItemContext('2'));
+
+			store.removePendingContext('1');
+
+			expect(store.pendingContext).toHaveLength(1);
+			expect(store.pendingContext[0]!.id).toBe('2');
+		});
+
+		test('no-op if id not found', () => {
+			const store = useAiContextStore();
+
+			store.addPendingContext(createItemContext('1'));
+			store.removePendingContext('nonexistent');
+
+			expect(store.pendingContext).toHaveLength(1);
+		});
+	});
+
+	describe('clearPendingContext', () => {
+		test('clears all items', () => {
+			const store = useAiContextStore();
+
+			store.addPendingContext(createVisualElement('1'));
+			store.addPendingContext(createItemContext('2'));
+			store.addPendingContext(createPromptContext('3'));
+
+			store.clearPendingContext();
+
+			expect(store.pendingContext).toHaveLength(0);
+		});
+	});
+
+	describe('clearNonVisualContext', () => {
+		test('keeps only visual elements', () => {
+			const store = useAiContextStore();
+
+			store.addPendingContext(createVisualElement('visual-1'));
+			store.addPendingContext(createItemContext('item-1'));
+			store.addPendingContext(createPromptContext('prompt-1'));
+			store.addPendingContext(createVisualElement('visual-2'));
+
+			store.clearNonVisualContext();
+
+			expect(store.pendingContext).toHaveLength(2);
+			expect(store.pendingContext.every((item) => item.type === 'visual-element')).toBe(true);
+		});
+	});
+
+	describe('syncVisualElementContextUrl', () => {
+		test('sets URL', () => {
+			const store = useAiContextStore();
+
+			store.syncVisualElementContextUrl('/admin/visual/posts');
+
+			expect(store.visualElementContextUrl).toBe('/admin/visual/posts');
+		});
+
+		test('clears visual context on URL change', () => {
+			const store = useAiContextStore();
+
+			store.syncVisualElementContextUrl('/admin/visual/posts');
+			store.addPendingContext(createVisualElement('1'));
+			store.addPendingContext(createItemContext('item-1'));
+
+			// Change URL
+			store.syncVisualElementContextUrl('/admin/visual/pages');
+
+			// Visual elements cleared, items remain
+			expect(store.visualElements).toHaveLength(0);
+			expect(store.pendingContext).toHaveLength(1);
+			expect(store.pendingContext[0]!.type).toBe('item');
+		});
+
+		test('does not clear on same URL', () => {
+			const store = useAiContextStore();
+
+			store.syncVisualElementContextUrl('/admin/visual/posts');
+			store.addPendingContext(createVisualElement('1'));
+
+			store.syncVisualElementContextUrl('/admin/visual/posts');
+
+			expect(store.visualElements).toHaveLength(1);
+		});
+	});
+
+	describe('fetchContextData', () => {
+		test('fetches current values for visual elements', async () => {
+			const store = useAiContextStore();
+			vi.mocked(api.get).mockResolvedValue({ data: { data: { title: 'Fetched Title' } } });
+
+			store.addPendingContext(createVisualElement('1'));
+
+			const attachments = await store.fetchContextData();
+
+			expect(api.get).toHaveBeenCalledWith('/items/posts/1', { params: { fields: ['title'] } });
+			expect(attachments).toHaveLength(1);
+			expect(attachments[0]!.type).toBe('visual-element');
+			expect(attachments[0]!.snapshot).toEqual({ title: 'Fetched Title' });
+		});
+
+		test('uses wildcard fields when none specified', async () => {
+			const store = useAiContextStore();
+			vi.mocked(api.get).mockResolvedValue({ data: { data: { id: 1 } } });
+
+			const element: PendingContextItem = {
+				id: '1',
+				type: 'visual-element',
+				data: { collection: 'posts', item: '1', key: '1', fields: [] },
+				display: 'Post',
+			};
+
+			store.addPendingContext(element);
+			await store.fetchContextData();
+
+			expect(api.get).toHaveBeenCalledWith('/items/posts/1', { params: { fields: ['*'] } });
+		});
+
+		test('handles API errors gracefully', async () => {
+			const store = useAiContextStore();
+			const error = new Error('API Error');
+			vi.mocked(api.get).mockRejectedValue(error);
+
+			store.addPendingContext(createVisualElement('1'));
+
+			const attachments = await store.fetchContextData();
+
+			expect(unexpectedError).toHaveBeenCalledWith(error);
+			expect(attachments).toHaveLength(0);
+		});
+
+		test('fetches item context from API', async () => {
+			const store = useAiContextStore();
+			vi.mocked(api.get).mockResolvedValue({ data: { data: { id: '1', title: 'Fetched' } } });
+
+			store.addPendingContext(createItemContext('1'));
+
+			const attachments = await store.fetchContextData();
+
+			expect(api.get).toHaveBeenCalledWith('/items/posts/1', { params: { fields: ['*'] } });
+			expect(attachments).toHaveLength(1);
+			expect(attachments[0]!.type).toBe('item');
+			expect(attachments[0]!.snapshot).toEqual({ id: '1', title: 'Fetched' });
+		});
+
+		test('converts prompt context to attachment', async () => {
+			const store = useAiContextStore();
+
+			store.addPendingContext(createPromptContext('1'));
+
+			const attachments = await store.fetchContextData();
+
+			expect(attachments).toHaveLength(1);
+			expect(attachments[0]!.type).toBe('prompt');
+			expect(attachments[0]!.snapshot).toEqual({ text: 'Test prompt' });
+		});
+
+		test('handles item context fetch failure gracefully', async () => {
+			const store = useAiContextStore();
+			const error = new Error('Item not found');
+			vi.mocked(api.get).mockRejectedValue(error);
+
+			store.addPendingContext(createItemContext('1'));
+
+			const attachments = await store.fetchContextData();
+
+			expect(unexpectedError).toHaveBeenCalledWith(error);
+			expect(attachments).toHaveLength(0);
+		});
+
+		test('returns partial results when one item fails', async () => {
+			const store = useAiContextStore();
+
+			vi.mocked(api.get)
+				.mockResolvedValueOnce({ data: { data: { id: '1', title: 'Success' } } })
+				.mockRejectedValueOnce(new Error('Failed'));
+
+			store.addPendingContext(createItemContext('ctx-1', '1'));
+			store.addPendingContext(createItemContext('ctx-2', '2'));
+
+			const attachments = await store.fetchContextData();
+
+			expect(unexpectedError).toHaveBeenCalled();
+			expect(attachments).toHaveLength(1);
+			expect(attachments[0]!.snapshot).toEqual({ id: '1', title: 'Success' });
+		});
+	});
+
+	describe('computed properties', () => {
+		test('visualElements filters to only visual elements', () => {
+			const store = useAiContextStore();
+
+			store.addPendingContext(createVisualElement('1'));
+			store.addPendingContext(createItemContext('2'));
+
+			expect(store.visualElements).toHaveLength(1);
+			expect(store.visualElements[0]!.type).toBe('visual-element');
+		});
+
+		test('hasVisualElementContext', () => {
+			const store = useAiContextStore();
+
+			expect(store.hasVisualElementContext).toBe(false);
+
+			store.addPendingContext(createVisualElement('1'));
+
+			expect(store.hasVisualElementContext).toBe(true);
+		});
+
+		test('hasPendingContext', () => {
+			const store = useAiContextStore();
+
+			expect(store.hasPendingContext).toBe(false);
+
+			store.addPendingContext(createItemContext('1'));
+
+			expect(store.hasPendingContext).toBe(true);
+		});
+	});
+
+	describe('dehydrate', () => {
+		test('clears pendingContext and visualElementContextUrl', () => {
+			const store = useAiContextStore();
+
+			store.syncVisualElementContextUrl('/admin/visual/posts');
+			store.addPendingContext(createVisualElement('1'));
+			store.addPendingContext(createItemContext('2'));
+
+			store.dehydrate();
+
+			expect(store.pendingContext).toHaveLength(0);
+			expect(store.visualElementContextUrl).toBeNull();
+		});
+	});
+});
diff --git a/app/src/ai/stores/use-ai-context.ts b/app/src/ai/stores/use-ai-context.ts
new file mode 100644
index 0000000000000..d7021de90f7f6
--- /dev/null
+++ b/app/src/ai/stores/use-ai-context.ts
@@ -0,0 +1,154 @@
+import type { ContextAttachment, PrimaryKey, VisualElementContextData } from '@directus/ai';
+import { getEndpoint } from '@directus/utils';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { isItemContext, isPromptContext, isVisualElement, type PendingContextItem } from '../types';
+import api from '@/api';
+import { i18n } from '@/lang';
+import { notify } from '@/utils/notify';
+import { unexpectedError } from '@/utils/unexpected-error';
+
+export const MAX_PENDING_CONTEXT = 10;
+
+export const useAiContextStore = defineStore('ai-context-store', () => {
+	const pendingContext = ref<PendingContextItem[]>([]);
+
+	const visualElementContextUrl = ref<string | null>(null);
+
+	const visualElements = computed(() => pendingContext.value.filter(isVisualElement));
+
+	const hasVisualElementContext = computed(() => visualElements.value.length > 0);
+
+	const hasPendingContext = computed(() => pendingContext.value.length > 0);
+
+	const addPendingContext = (item: PendingContextItem): boolean => {
+		if (pendingContext.value.length >= MAX_PENDING_CONTEXT) {
+			return false;
+		}
+
+		pendingContext.value = [...pendingContext.value, item];
+		return true;
+	};
+
+	const removePendingContext = (id: string) => {
+		pendingContext.value = pendingContext.value.filter((item) => item.id !== id);
+	};
+
+	const updateVisualElementContext = (id: string, data: VisualElementContextData, display: string) => {
+		pendingContext.value = pendingContext.value.map((item) => {
+			if (item.id !== id || !isVisualElement(item)) return item;
+			return { ...item, data, display };
+		});
+	};
+
+	const clearPendingContext = () => {
+		pendingContext.value = [];
+	};
+
+	/**
+	 * Clear only non-visual-element context (prompts, items).
+	 * Visual elements persist until user navigates away from visual editor.
+	 */
+	const clearNonVisualContext = () => {
+		pendingContext.value = pendingContext.value.filter(isVisualElement);
+	};
+
+	const clearVisualElementContext = () => {
+		pendingContext.value = pendingContext.value.filter((item) => !isVisualElement(item));
+		visualElementContextUrl.value = null;
+	};
+
+	/**
+	 * Updates the visual element context URL. If the URL has changed,
+	 * all existing visual element context is cleared since it belongs
+	 * to the previous page.
+	 */
+	const syncVisualElementContextUrl = (url: string) => {
+		if (visualElementContextUrl.value !== null && visualElementContextUrl.value !== url) {
+			clearVisualElementContext();
+		}
+
+		visualElementContextUrl.value = url;
+	};
+
+	const fetchItem = async (collection: string, id: PrimaryKey, fields: string[] = ['*']) => {
+		try {
+			const response = await api.get(`${getEndpoint(collection)}/${id}`, { params: { fields } });
+			return response.data.data;
+		} catch (error) {
+			unexpectedError(error);
+			return null;
+		}
+	};
+
+	const fetchContextData = async (): Promise<ContextAttachment[]> => {
+		const fetches = pendingContext.value.map(async (item): Promise<ContextAttachment | null> => {
+			if (isVisualElement(item)) {
+				const fields = item.data.fields?.length ? item.data.fields : ['*'];
+				const snapshot = await fetchItem(item.data.collection, item.data.item, fields);
+				if (!snapshot) return null;
+				return { type: 'visual-element', data: item.data, display: item.display, snapshot };
+			}
+
+			if (isItemContext(item)) {
+				const snapshot = await fetchItem(item.data.collection, item.data.key, ['*']);
+				if (!snapshot) return null;
+				return { type: 'item', data: item.data, display: item.display, snapshot };
+			}
+
+			if (isPromptContext(item)) {
+				return {
+					type: 'prompt',
+					data: item.data,
+					display: item.display,
+					snapshot: {
+						text: item.data.text,
+						...(item.data.prompt?.messages ? { messages: item.data.prompt.messages } : {}),
+					},
+				};
+			}
+
+			return null;
+		});
+
+		const results = await Promise.all(fetches);
+
+		const failedCount = results.filter((r) => r === null).length;
+
+		if (failedCount > 0) {
+			notify({
+				title: i18n.global.t('ai.some_context_failed', { count: failedCount }),
+				type: 'warning',
+			});
+		}
+
+		return results.filter((a): a is ContextAttachment => a !== null);
+	};
+
+	const dehydrate = () => {
+		clearPendingContext();
+		visualElementContextUrl.value = null;
+	};
+
+	return {
+		// State
+		pendingContext,
+		visualElementContextUrl,
+
+		// Computed
+		visualElements,
+		hasVisualElementContext,
+		hasPendingContext,
+
+		// Actions
+		addPendingContext,
+		removePendingContext,
+		updateVisualElementContext,
+		clearPendingContext,
+		clearNonVisualContext,
+		clearVisualElementContext,
+		syncVisualElementContextUrl,
+		fetchContextData,
+		dehydrate,
+	};
+});
diff --git a/app/src/ai/stores/use-ai-tools.test.ts b/app/src/ai/stores/use-ai-tools.test.ts
new file mode 100644
index 0000000000000..ca9deefe01f39
--- /dev/null
+++ b/app/src/ai/stores/use-ai-tools.test.ts
@@ -0,0 +1,188 @@
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { z } from 'zod';
+import type { StaticToolDefinition } from '../composables/define-tool';
+import { useAiToolsStore } from './use-ai-tools';
+
+beforeEach(() => {
+	setActivePinia(
+		createTestingPinia({
+			createSpy: vi.fn,
+			stubActions: false,
+		}),
+	);
+
+	localStorage.clear();
+});
+
+const createMockTool = (name: string): StaticToolDefinition => ({
+	name,
+	displayName: name,
+	description: `Test tool ${name}`,
+	inputSchema: z.object({}),
+	execute: vi.fn(),
+});
+
+describe('useAiToolsStore', () => {
+	describe('getToolApprovalMode', () => {
+		test('returns "ask" by default', () => {
+			const store = useAiToolsStore();
+			expect(store.getToolApprovalMode('items')).toBe('ask');
+			expect(store.getToolApprovalMode('unknown-tool')).toBe('ask');
+		});
+
+		test('returns stored value', () => {
+			const store = useAiToolsStore();
+			store.setToolApprovalMode('items', 'always');
+			expect(store.getToolApprovalMode('items')).toBe('always');
+		});
+	});
+
+	describe('setToolApprovalMode', () => {
+		test('stores mode in toolApprovals', () => {
+			const store = useAiToolsStore();
+
+			store.setToolApprovalMode('items', 'always');
+			expect(store.toolApprovals['items']).toBe('always');
+
+			store.setToolApprovalMode('files', 'disabled');
+			expect(store.toolApprovals['files']).toBe('disabled');
+		});
+
+		test('overwrites existing mode', () => {
+			const store = useAiToolsStore();
+
+			store.setToolApprovalMode('items', 'always');
+			expect(store.getToolApprovalMode('items')).toBe('always');
+
+			store.setToolApprovalMode('items', 'disabled');
+			expect(store.getToolApprovalMode('items')).toBe('disabled');
+		});
+	});
+
+	describe('enabledSystemTools', () => {
+		test('returns all system tools when none disabled', () => {
+			const store = useAiToolsStore();
+			expect(store.enabledSystemTools).toEqual(store.systemTools);
+		});
+
+		test('filters out disabled tools', () => {
+			const store = useAiToolsStore();
+
+			store.setToolApprovalMode('items', 'disabled');
+			store.setToolApprovalMode('files', 'disabled');
+
+			expect(store.enabledSystemTools).not.toContain('items');
+			expect(store.enabledSystemTools).not.toContain('files');
+			expect(store.enabledSystemTools).toContain('schema');
+		});
+	});
+
+	describe('registerLocalTool', () => {
+		test('adds tool to localTools', () => {
+			const store = useAiToolsStore();
+			const tool = createMockTool('test-tool');
+
+			store.registerLocalTool(tool);
+
+			expect(store.localTools).toHaveLength(1);
+			expect(store.localTools[0]!.name).toBe('test-tool');
+		});
+
+		test('can register multiple tools', () => {
+			const store = useAiToolsStore();
+
+			store.registerLocalTool(createMockTool('tool-1'));
+			store.registerLocalTool(createMockTool('tool-2'));
+
+			expect(store.localTools).toHaveLength(2);
+		});
+	});
+
+	describe('replaceLocalTool', () => {
+		test('replaces existing tool by name', () => {
+			const store = useAiToolsStore();
+			const original = createMockTool('my-tool');
+			const replacement = { ...createMockTool('my-tool'), description: 'Updated description' };
+
+			store.registerLocalTool(original);
+			store.replaceLocalTool('my-tool', replacement);
+
+			expect(store.localTools).toHaveLength(1);
+			expect(store.localTools[0]!.description).toBe('Updated description');
+		});
+
+		test('does not add if tool not found', () => {
+			const store = useAiToolsStore();
+			const tool = createMockTool('nonexistent');
+
+			store.replaceLocalTool('nonexistent', tool);
+
+			expect(store.localTools).toHaveLength(0);
+		});
+	});
+
+	describe('deregisterLocalTool', () => {
+		test('removes tool by name', () => {
+			const store = useAiToolsStore();
+
+			store.registerLocalTool(createMockTool('tool-1'));
+			store.registerLocalTool(createMockTool('tool-2'));
+			store.deregisterLocalTool('tool-1');
+
+			expect(store.localTools).toHaveLength(1);
+			expect(store.localTools[0]!.name).toBe('tool-2');
+		});
+
+		test('no-op if tool not found', () => {
+			const store = useAiToolsStore();
+
+			store.registerLocalTool(createMockTool('tool-1'));
+			store.deregisterLocalTool('nonexistent');
+
+			expect(store.localTools).toHaveLength(1);
+		});
+	});
+
+	describe('isSystemTool', () => {
+		test('returns true for system tools', () => {
+			const store = useAiToolsStore();
+
+			expect(store.isSystemTool('items')).toBe(true);
+			expect(store.isSystemTool('files')).toBe(true);
+			expect(store.isSystemTool('schema')).toBe(true);
+		});
+
+		test('returns false for non-system tools', () => {
+			const store = useAiToolsStore();
+
+			expect(store.isSystemTool('custom-tool')).toBe(false);
+			expect(store.isSystemTool('random')).toBe(false);
+		});
+	});
+
+	describe('dehydrate', () => {
+		test('clears toolApprovals', () => {
+			const store = useAiToolsStore();
+
+			store.setToolApprovalMode('items', 'always');
+			store.setToolApprovalMode('files', 'disabled');
+
+			store.dehydrate();
+
+			expect(store.toolApprovals).toEqual({});
+		});
+
+		test('clears localTools', () => {
+			const store = useAiToolsStore();
+
+			store.registerLocalTool(createMockTool('tool-1'));
+			store.registerLocalTool(createMockTool('tool-2'));
+
+			store.dehydrate();
+
+			expect(store.localTools).toEqual([]);
+		});
+	});
+});
diff --git a/app/src/ai/stores/use-ai-tools.ts b/app/src/ai/stores/use-ai-tools.ts
new file mode 100644
index 0000000000000..eb3d73018cc02
--- /dev/null
+++ b/app/src/ai/stores/use-ai-tools.ts
@@ -0,0 +1,85 @@
+import type { SystemTool } from '@directus/ai';
+import { createEventHook, useLocalStorage } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { computed, shallowRef } from 'vue';
+import type { StaticToolDefinition } from '../composables/define-tool';
+
+export type ToolApprovalMode = 'always' | 'ask' | 'disabled';
+
+export const useAiToolsStore = defineStore('ai-tools-store', () => {
+	const toolApprovals = useLocalStorage<Record<string, ToolApprovalMode>>('ai-tool-approvals', {});
+
+	const systemTools = shallowRef<SystemTool[]>([
+		'items',
+		'files',
+		'folders',
+		'flows',
+		'trigger-flow',
+		'operations',
+		'schema',
+		'collections',
+		'fields',
+		'relations',
+	]);
+
+	const localTools = shallowRef<StaticToolDefinition[]>([]);
+
+	const enabledSystemTools = computed(() => {
+		return systemTools.value.filter((tool) => getToolApprovalMode(tool) !== 'disabled');
+	});
+
+	const systemToolResultHook =
+		createEventHook<[tool: SystemTool, input: Record<string, unknown>, output: Record<string, unknown>]>();
+
+	const getToolApprovalMode = (toolName: string): ToolApprovalMode => {
+		return toolApprovals.value[toolName] ?? 'ask';
+	};
+
+	const setToolApprovalMode = (toolName: string, mode: ToolApprovalMode) => {
+		toolApprovals.value = { ...toolApprovals.value, [toolName]: mode };
+	};
+
+	const registerLocalTool = (tool: StaticToolDefinition) => {
+		localTools.value = [...localTools.value, tool];
+	};
+
+	const replaceLocalTool = (name: string, tool: StaticToolDefinition) => {
+		localTools.value = localTools.value.map((t) => (t.name === name ? tool : t));
+	};
+
+	const deregisterLocalTool = (name: string) => {
+		localTools.value = localTools.value.filter((t) => t.name !== name);
+	};
+
+	const isSystemTool = (toolName: string): toolName is SystemTool => {
+		return systemTools.value.includes(toolName as SystemTool);
+	};
+
+	const dehydrate = () => {
+		toolApprovals.value = {};
+		localTools.value = [];
+	};
+
+	return {
+		// State
+		toolApprovals,
+		systemTools,
+		localTools,
+
+		// Computed
+		enabledSystemTools,
+
+		// Actions
+		getToolApprovalMode,
+		setToolApprovalMode,
+		registerLocalTool,
+		replaceLocalTool,
+		deregisterLocalTool,
+		isSystemTool,
+		dehydrate,
+
+		// Event hooks
+		onSystemToolResult: systemToolResultHook.on,
+		triggerSystemToolResult: systemToolResultHook.trigger,
+	};
+});
diff --git a/app/src/ai/stores/use-ai.test.ts b/app/src/ai/stores/use-ai.test.ts
index 6e41578ef9b5d..3944f9de9afac 100644
--- a/app/src/ai/stores/use-ai.test.ts
+++ b/app/src/ai/stores/use-ai.test.ts
@@ -1,7 +1,9 @@
 import { createTestingPinia } from '@pinia/testing';
+import type { UIMessage } from 'ai';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { useAiStore } from './use-ai';
+import { useAiToolsStore } from './use-ai-tools';
 
 // Mock dependencies
 vi.mock('@/stores/settings', () => ({
@@ -70,7 +72,7 @@ describe('useAiStore', () => {
 
 			// Simulate having messages by directly manipulating the chat.messages array
 			// In the real implementation, chat.messages would have data
-			const testMessages = [
+			const testMessages: UIMessage[] = [
 				{ id: '1', role: 'user', parts: [{ type: 'text', text: 'Hello' }] },
 				{ id: '2', role: 'assistant', parts: [{ type: 'text', text: 'Hi there!' }] },
 			];
@@ -104,16 +106,17 @@ describe('useAiStore', () => {
 
 		test('should reset tool approvals to empty object', async () => {
 			const aiStore = useAiStore();
+			const toolsStore = useAiToolsStore();
 
 			// Set some tool approvals
-			aiStore.setToolApprovalMode('items', 'always');
-			aiStore.setToolApprovalMode('files', 'ask');
+			toolsStore.setToolApprovalMode('items', 'always');
+			toolsStore.setToolApprovalMode('files', 'ask');
 
-			expect(Object.keys(aiStore.toolApprovals).length).toBeGreaterThan(0);
+			expect(Object.keys(toolsStore.toolApprovals).length).toBeGreaterThan(0);
 
 			await aiStore.dehydrate();
 
-			expect(aiStore.toolApprovals).toEqual({});
+			expect(toolsStore.toolApprovals).toEqual({});
 		});
 
 		test('should reset selected model to default', async () => {
@@ -125,8 +128,12 @@ describe('useAiStore', () => {
 			if (defaultModel) {
 				// Select a different model (if there are multiple)
 				if (aiStore.models.length > 1) {
-					aiStore.selectModel(aiStore.models[1]);
-					expect(aiStore.selectedModel?.model).not.toBe(defaultModel.model);
+					const alternativeModel = aiStore.models[1];
+
+					if (alternativeModel) {
+						aiStore.selectModel(alternativeModel);
+						expect(aiStore.selectedModel?.model).not.toBe(defaultModel.model);
+					}
 				}
 
 				await aiStore.dehydrate();
@@ -160,9 +167,11 @@ describe('useAiStore', () => {
 			const aiStore = useAiStore();
 
 			// Set up some state
+			const toolsStore = useAiToolsStore();
+
 			aiStore.input = 'Test input';
 			aiStore.chatOpen = true;
-			aiStore.setToolApprovalMode('items', 'always');
+			toolsStore.setToolApprovalMode('items', 'always');
 			aiStore.chat.messages.push({ id: '1', role: 'user', parts: [{ type: 'text', text: 'Hello' }] });
 
 			await aiStore.dehydrate();
@@ -170,7 +179,7 @@ describe('useAiStore', () => {
 			// Verify everything is reset
 			expect(aiStore.messages.length).toBe(0);
 			expect(aiStore.input).toBe('');
-			expect(aiStore.toolApprovals).toEqual({});
+			expect(toolsStore.toolApprovals).toEqual({});
 			expect(aiStore.chatOpen).toBe(false);
 		});
 	});
diff --git a/app/src/ai/stores/use-ai.ts b/app/src/ai/stores/use-ai.ts
index af2cf1b426e2c..2246f822c0ed0 100644
--- a/app/src/ai/stores/use-ai.ts
+++ b/app/src/ai/stores/use-ai.ts
@@ -1,5 +1,5 @@
 import { Chat } from '@ai-sdk/vue';
-import { type StandardProviderType, type SystemTool, type ToolApprovalMode } from '@directus/ai';
+import { type ContextAttachment, type PrimaryKey, type StandardProviderType, type SystemTool } from '@directus/ai';
 import { createEventHook, useLocalStorage, useSessionStorage } from '@vueuse/core';
 import {
 	DefaultChatTransport,
@@ -8,42 +8,45 @@ import {
 	type UIMessage,
 } from 'ai';
 import { defineStore } from 'pinia';
-import { computed, reactive, ref, shallowRef, watch } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { z } from 'zod';
-import { StaticToolDefinition } from '../composables/define-tool';
+import type { StaticToolDefinition } from '../composables/define-tool';
 import { AI_MODELS, type AppModelDefinition, buildCustomModelDefinition, buildCustomModels } from '../models';
+import { isVisualElement } from '../types/context';
+import { useAiContextStore } from './use-ai-context';
+import { useAiToolsStore } from './use-ai-tools';
 import { useSettingsStore } from '@/stores/settings';
+import { unexpectedError } from '@/utils/unexpected-error';
 import { useSidebarStore } from '@/views/private/private-view/stores/sidebar';
 
 export const useAiStore = defineStore('ai-store', () => {
 	const settingsStore = useSettingsStore();
 	const sidebarStore = useSidebarStore();
+	const contextStore = useAiContextStore();
+	const toolsStore = useAiToolsStore();
+	const route = useRoute();
+
 	const storedMessages = useSessionStorage<UIMessage[]>('directus-ai-chat-messages', []);
 
-	// Tool approval settings
-	const toolApprovals = useLocalStorage<Record<string, ToolApprovalMode>>('ai-tool-approvals', {});
+	// UI State
+	const chatOpen = useLocalStorage<boolean>('ai-chat-open', false);
+	const input = ref<string>('');
 
-	const getToolApprovalMode = (toolName: string): ToolApprovalMode => {
-		return toolApprovals.value[toolName] ?? 'ask';
-	};
+	// UI event hooks
+	type VisualElementIdentifier = { collection: string; item: PrimaryKey; fields?: string[] } | null;
+	const visualElementHighlightHook = createEventHook<[VisualElementIdentifier]>();
+	const focusInputHook = createEventHook();
 
-	const setToolApprovalMode = (toolName: string, mode: ToolApprovalMode) => {
-		toolApprovals.value = { ...toolApprovals.value, [toolName]: mode };
+	const highlightVisualElement = (data: VisualElementIdentifier) => {
+		visualElementHighlightHook.trigger(data);
 	};
 
-	const setAllToolsMode = (mode: ToolApprovalMode) => {
-		const newApprovals: Record<string, ToolApprovalMode> = {};
-
-		for (const tool of systemTools.value) {
-			newApprovals[tool] = mode;
-		}
-
-		toolApprovals.value = newApprovals;
+	const focusInput = () => {
+		focusInputHook.trigger(null);
 	};
 
-	const chatOpen = useLocalStorage<boolean>('ai-chat-open', false);
-	const input = ref<string>('');
-
+	// Sidebar integration
 	watch(chatOpen, (newOpen) => {
 		if (newOpen === true) sidebarStore.expand();
 	});
@@ -52,6 +55,7 @@ export const useAiStore = defineStore('ai-store', () => {
 		chatOpen.value = false;
 	});
 
+	// Model selection
 	const models = computed(() => {
 		const customModels = buildCustomModels(settingsStore.settings?.ai_openai_compatible_models ?? null);
 		const allModels = [...AI_MODELS, ...customModels];
@@ -107,7 +111,6 @@ export const useAiStore = defineStore('ai-store', () => {
 		defaultModel.value ? `${defaultModel.value.provider}:${defaultModel.value.model}` : null,
 	);
 
-	// Ensure selectedModelId is set to the default model when models become available
 	watch(
 		() => defaultModel.value,
 		(newDefaultModel) => {
@@ -144,59 +147,70 @@ export const useAiStore = defineStore('ai-store', () => {
 		selectedModelId.value = `${modelDefinition.provider}:${modelDefinition.model}`;
 	};
 
-	const systemTools = shallowRef<SystemTool[]>([
-		'items',
-		'files',
-		'folders',
-		// Omit 'assets' because we don't support image or audio uploads yet
-		// 'assets',
-		'flows',
-		'trigger-flow',
-		'operations',
-		'schema',
-		'collections',
-		'fields',
-		'relations',
-	]);
-
-	// Filter system tools based on approval mode (exclude 'disabled')
-	const enabledSystemTools = computed(() => {
-		return systemTools.value.filter((tool) => getToolApprovalMode(tool) !== 'disabled');
-	});
-
-	const localTools = shallowRef<StaticToolDefinition[]>([]);
-
-	const systemToolResultHook =
-		createEventHook<[tool: SystemTool, input: Record<string, unknown>, output: Record<string, unknown>]>();
-
+	// Helper to convert local tool to API format
 	const toApiTool = (tool: StaticToolDefinition) => ({
 		name: tool.name,
 		description: tool.description,
 		inputSchema: z.toJSONSchema(tool.inputSchema, { target: 'draft-7' }),
 	});
 
+	// Current page context from route
+	const currentPageContext = computed(() => {
+		const path = route.path;
+		const collection = route.params.collection as string | undefined;
+		const item = route.params.primaryKey as string | number | undefined;
+
+		// Extract module from path (first segment after /)
+		const pathParts = path.split('/').filter(Boolean);
+		const module = pathParts[0];
+
+		return {
+			path,
+			...(collection && { collection }),
+			...(item !== undefined && { item }),
+			...(module && { module }),
+		};
+	});
+
+	// Store snapshotted context attachments for sending with request
+	const pendingContextSnapshot = ref<ContextAttachment[]>([]);
+
+	// Chat instance
 	const chat = new Chat<UIMessage>({
 		messages: storedMessages.value,
 		transport: new DefaultChatTransport({
 			api: '/ai/chat',
 			credentials: 'include',
 			body: () => {
-				const tools = [...enabledSystemTools.value, ...localTools.value.map(toApiTool)];
+				const tools = [...toolsStore.enabledSystemTools, ...toolsStore.localTools.map(toApiTool)];
 
 				// Filter toolApprovals to only include 'always' and 'ask' (not 'disabled')
 				const approvals: Record<string, 'always' | 'ask'> = {};
 
-				for (const [toolName, mode] of Object.entries(toolApprovals.value)) {
+				for (const [toolName, mode] of Object.entries(toolsStore.toolApprovals)) {
 					if (mode === 'always' || mode === 'ask') {
 						approvals[toolName] = mode;
 					}
 				}
 
+				// Build context for system prompt
+				const context: {
+					attachments?: ContextAttachment[];
+					page?: { path: string; collection?: string; item?: string | number; module?: string };
+				} = {
+					page: currentPageContext.value,
+				};
+
+				if (pendingContextSnapshot.value.length > 0) {
+					context.attachments = pendingContextSnapshot.value;
+				}
+
 				return {
 					provider: selectedModel.value?.provider,
 					model: selectedModel.value?.model,
 					tools,
 					toolApprovals: approvals,
+					context,
 				};
 			},
 			prepareSendMessagesRequest: (req) => {
@@ -230,13 +244,13 @@ export const useAiStore = defineStore('ai-store', () => {
 			}
 		},
 		onToolCall: async ({ toolCall }) => {
-			const isServerTool = toolCall.dynamic || systemTools.value.includes(toolCall.toolName as SystemTool);
+			const isServerTool = toolCall.dynamic || toolsStore.isSystemTool(toolCall.toolName);
 
 			if (isServerTool) {
 				return;
 			}
 
-			const tool = localTools.value.find((tool) => tool.name === toolCall.toolName);
+			const tool = toolsStore.localTools.find((tool) => tool.name === toolCall.toolName);
 
 			if (!tool) {
 				throw new Error(`Tool by name "${toolCall.toolName}" does not exist`);
@@ -246,19 +260,18 @@ export const useAiStore = defineStore('ai-store', () => {
 				const output = await tool.execute(toolCall.input as Record<string, unknown>);
 				chat.addToolResult({ tool: toolCall.toolName, output, toolCallId: toolCall.toolCallId });
 			} catch (e: unknown) {
-				if (e instanceof Error) {
-					chat.addToolResult({
-						tool: toolCall.toolName,
-						state: 'output-error',
-						errorText: e.message,
-						toolCallId: toolCall.toolCallId,
-					});
-				}
+				const errorText = e instanceof Error ? e.message : String(e);
+
+				chat.addToolResult({
+					tool: toolCall.toolName,
+					state: 'output-error',
+					errorText,
+					toolCallId: toolCall.toolCallId,
+				});
 			}
 		},
 		onFinish: ({ isAbort, message }) => {
 			if (isAbort) {
-				// Update the state to done and delete the providerMetadata from the aborted message.parts where part.type === 'reasoning' to prevent OpenAI reasoning issues
 				message.parts.forEach((part) => {
 					if (part.type === 'reasoning') {
 						part.state = 'done';
@@ -274,10 +287,6 @@ export const useAiStore = defineStore('ai-store', () => {
 	const error = computed(() => chat.error);
 
 	const messages = computed(() =>
-		// Ensure Vue notices changes within msg.parts when the Chat SDK mutates the array in place.
-		// By spreading msg.parts we create a fresh array reference which is fully reactive for consumers.
-		// This keeps "parts" immutable from the perspective of the UI layer and guarantees rerenders
-		// on content changes (push/replace) performed internally by the chat instance.
 		chat.messages.map((msg) => ({
 			...msg,
 			parts: [...(msg.parts ?? [])],
@@ -293,6 +302,7 @@ export const useAiStore = defineStore('ai-store', () => {
 		return lastMessage.parts.some((part) => 'state' in part && part.state === 'approval-requested');
 	});
 
+	// Watch for tool results to trigger hooks
 	const processedToolCallIds = new Set<string>();
 
 	watch(latestMessage, (message) => {
@@ -304,10 +314,12 @@ export const useAiStore = defineStore('ai-store', () => {
 
 				const tool = part.type.substring('tool-'.length) as SystemTool;
 
-				const isSystemTool = systemTools.value.includes(tool);
-
-				if (isSystemTool) {
-					systemToolResultHook.trigger(tool as SystemTool, part.input, part.output);
+				if (toolsStore.isSystemTool(tool)) {
+					toolsStore.triggerSystemToolResult(
+						tool,
+						part.input as Record<string, unknown>,
+						part.output as Record<string, unknown>,
+					);
 				}
 			}
 		}
@@ -317,23 +329,39 @@ export const useAiStore = defineStore('ai-store', () => {
 
 	const submitHook = createEventHook();
 
-	const submit = () => {
+	const submit = async () => {
 		if (chat.status === 'streaming' || chat.status === 'submitted') return;
-		chat.sendMessage({ text: input.value });
-		submitHook.trigger(input.value);
-		input.value = '';
-	};
 
-	const registerLocalTool = (tool: StaticToolDefinition) => {
-		localTools.value = [...localTools.value, tool];
-	};
+		try {
+			pendingContextSnapshot.value = await contextStore.fetchContextData();
+		} catch (error) {
+			unexpectedError(error);
+			return;
+		}
 
-	const replaceLocalTool = (name: string, tool: StaticToolDefinition) => {
-		localTools.value = localTools.value.map((t) => (t.name === name ? tool : t));
-	};
+		const previousInput = input.value;
+		const previousContext = [...contextStore.pendingContext.filter((item) => !isVisualElement(item))];
+
+		chat
+			.sendMessage({
+				text: input.value,
+				metadata: {
+					attachments: pendingContextSnapshot.value.length > 0 ? pendingContextSnapshot.value : undefined,
+				},
+			})
+			.catch((error) => {
+				input.value = previousInput;
+
+				for (const item of previousContext) {
+					contextStore.addPendingContext(item);
+				}
+
+				unexpectedError(error);
+			});
 
-	const deregisterLocalTool = (name: string) => {
-		localTools.value = localTools.value.filter((t) => t.name !== name);
+		submitHook.trigger(input.value);
+		input.value = '';
+		contextStore.clearNonVisualContext();
 	};
 
 	const retry = () => {
@@ -360,19 +388,14 @@ export const useAiStore = defineStore('ai-store', () => {
 	const dehydrate = async () => {
 		reset();
 		input.value = '';
-		toolApprovals.value = {};
 		selectedModelId.value = defaultModel.value ? `${defaultModel.value.provider}:${defaultModel.value.model}` : null;
 		chatOpen.value = false;
+
+		// Dehydrate sub-stores
+		contextStore.dehydrate();
+		toolsStore.dehydrate();
 	};
 
-	/**
-	 * Guesstimate of what the messages limit is based on the current average token size per message.
-	 * This is updated whenever the actual token usage is returned from the server. We default to
-	 * infinity as we can't know a theoretical limit until the server responds with actual token
-	 * usage. Input context also includes tool definitions (of which we don't know the size), so this
-	 * estimate is never fully accurate.
-	 * @default Infinity
-	 */
 	const estimatedMaxMessages = ref(Infinity);
 
 	const tokenUsage = reactive({ inputTokens: 0, outputTokens: 0, totalTokens: 0 });
@@ -396,36 +419,39 @@ export const useAiStore = defineStore('ai-store', () => {
 	};
 
 	return {
+		// UI State
 		input,
+		chatOpen,
+
+		// Chat
 		chat,
 		messages,
 		status,
-		selectedModel,
-		models,
-		registerLocalTool,
-		replaceLocalTool,
-		deregisterLocalTool,
-		systemTools,
-		localTools,
 		error,
+		submit,
 		retry,
 		stop,
 		reset,
-		chatOpen,
+		dehydrate,
+		onSubmit: submitHook.on,
+		hasPendingToolCall,
+		approveToolCall,
+		denyToolCall,
+
+		// Model selection
+		selectedModel,
+		models,
 		selectModel,
+
+		// Token usage
 		tokenUsage,
 		contextUsagePercentage,
-		submit,
-		onSubmit: submitHook.on,
 		estimatedMaxMessages,
-		onSystemToolResult: systemToolResultHook.on,
-		toolApprovals,
-		getToolApprovalMode,
-		setToolApprovalMode,
-		setAllToolsMode,
-		approveToolCall,
-		denyToolCall,
-		hasPendingToolCall,
-		dehydrate,
+
+		// UI hooks
+		highlightVisualElement,
+		onVisualElementHighlight: visualElementHighlightHook.on,
+		focusInput,
+		onFocusInput: focusInputHook.on,
 	};
 });
diff --git a/app/src/ai/types/context.ts b/app/src/ai/types/context.ts
new file mode 100644
index 0000000000000..1307e1a4b2407
--- /dev/null
+++ b/app/src/ai/types/context.ts
@@ -0,0 +1,27 @@
+import type { ItemContextData, VisualElementContextData } from '@directus/ai';
+import type { MCPPrompt } from './prompts';
+
+export interface PromptContextData {
+	text: string;
+	prompt: MCPPrompt;
+	values: Record<string, string>;
+}
+
+export type PendingContextItem =
+	| { id: string; type: 'item'; data: ItemContextData; display: string }
+	| { id: string; type: 'visual-element'; data: VisualElementContextData; display: string }
+	| { id: string; type: 'prompt'; data: PromptContextData; display: string };
+
+export function isVisualElement(
+	item: PendingContextItem,
+): item is Extract<PendingContextItem, { type: 'visual-element' }> {
+	return item.type === 'visual-element';
+}
+
+export function isItemContext(item: PendingContextItem): item is Extract<PendingContextItem, { type: 'item' }> {
+	return item.type === 'item';
+}
+
+export function isPromptContext(item: PendingContextItem): item is Extract<PendingContextItem, { type: 'prompt' }> {
+	return item.type === 'prompt';
+}
diff --git a/app/src/ai/types/index.ts b/app/src/ai/types/index.ts
new file mode 100644
index 0000000000000..19cbc07693f79
--- /dev/null
+++ b/app/src/ai/types/index.ts
@@ -0,0 +1,2 @@
+export * from './context';
+export * from './prompts';
diff --git a/app/src/ai/types/prompts.ts b/app/src/ai/types/prompts.ts
new file mode 100644
index 0000000000000..c88666d62a9fb
--- /dev/null
+++ b/app/src/ai/types/prompts.ts
@@ -0,0 +1,8 @@
+export interface MCPPrompt {
+	id: string;
+	name: string;
+	description?: string;
+	status: string;
+	system_prompt?: string | null;
+	messages?: { role: 'user' | 'assistant'; text: string }[] | null;
+}
diff --git a/app/src/components/v-form/components/form-field.test.ts b/app/src/components/v-form/components/form-field.test.ts
index 48b5faef61774..d41fe96ba4a51 100644
--- a/app/src/components/v-form/components/form-field.test.ts
+++ b/app/src/components/v-form/components/form-field.test.ts
@@ -99,4 +99,55 @@ describe('FormField', () => {
 
 		expect(wrapper.findComponent({ name: 'FormFieldLabel' }).exists()).toBe(false);
 	});
+
+	describe('isNonEditable', () => {
+		it('should pass non-editable=false when neither prop nor meta is set', () => {
+			const wrapper = mount(FormField, {
+				props: {
+					field: baseField,
+				},
+				global,
+			});
+
+			const fieldInterface = wrapper.findComponent({ name: 'FormFieldInterface' });
+			expect(fieldInterface.props('nonEditable')).toBe(false);
+		});
+
+		it('should pass non-editable=true when nonEditable prop is true', () => {
+			const wrapper = mount(FormField, {
+				props: {
+					field: baseField,
+					nonEditable: true,
+				},
+				global,
+			});
+
+			const fieldInterface = wrapper.findComponent({ name: 'FormFieldInterface' });
+			expect(fieldInterface.props('nonEditable')).toBe(true);
+		});
+
+		it('should pass non-editable=true when field.meta.non_editable is true', () => {
+			const wrapper = mount(FormField, {
+				props: {
+					field: { ...baseField, meta: { ...baseField.meta, non_editable: true } },
+				},
+				global,
+			});
+
+			const fieldInterface = wrapper.findComponent({ name: 'FormFieldInterface' });
+			expect(fieldInterface.props('nonEditable')).toBe(true);
+		});
+
+		it('should pass non-editable=false when field.meta.readonly is true but non_editable is not set', () => {
+			const wrapper = mount(FormField, {
+				props: {
+					field: { ...baseField, meta: { ...baseField.meta, readonly: true } },
+				},
+				global,
+			});
+
+			const fieldInterface = wrapper.findComponent({ name: 'FormFieldInterface' });
+			expect(fieldInterface.props('nonEditable')).toBe(false);
+		});
+	});
 });
diff --git a/app/src/components/v-form/components/form-field.vue b/app/src/components/v-form/components/form-field.vue
index 47063ba7ac565..96412c285ca44 100644
--- a/app/src/components/v-form/components/form-field.vue
+++ b/app/src/components/v-form/components/form-field.vue
@@ -59,6 +59,12 @@ const isDisabled = computed(() => {
 	return false;
 });
 
+const isNonEditable = computed(() => {
+	if (props.nonEditable) return true;
+	if (props.field?.meta?.non_editable === true) return true;
+	return false;
+});
+
 const isLabelHidden = computed(() => {
 	if ((props.batchMode || !!props.comparison) && !props.field.meta?.special?.includes('no-data')) return false;
 	return props.field.hideLabel;
@@ -226,7 +232,7 @@ function useComputedValues() {
 			:batch-mode="batchMode"
 			:batch-active="batchActive"
 			:disabled="isDisabled"
-			:non-editable="nonEditable"
+			:non-editable="isNonEditable"
 			:primary-key="primaryKey"
 			:raw-editor-enabled="rawEditorEnabled"
 			:raw-editor-active="rawEditorActive"
diff --git a/app/src/components/v-form/composables/use-ai-tools.ts b/app/src/components/v-form/composables/use-ai-tools.ts
index d67f3016cf314..bac266b1b055c 100644
--- a/app/src/components/v-form/composables/use-ai-tools.ts
+++ b/app/src/components/v-form/composables/use-ai-tools.ts
@@ -23,7 +23,8 @@ export const useAiTools = (options: UseAiToolsOptions) => {
 	defineTool({
 		name: `read-form-values-${componentUid}`,
 		displayName: t('ai_tools.read_form_values'),
-		description: 'Read values of the form on the current page',
+		description:
+			'Read values from the form currently open in the UI. Returns only field values visible in the current form view. Does NOT query the database — use the items tool for that. IMPORTANT: This tool ONLY reads from the page currently open in the editor, NOT from user-attached context items.',
 		inputSchema: computed(() => {
 			return z.object({
 				fields: options.fieldNames.value.length > 0 ? z.array(z.enum(options.fieldNames.value)) : z.array(z.string()),
@@ -43,7 +44,8 @@ export const useAiTools = (options: UseAiToolsOptions) => {
 	defineTool({
 		name: `set-form-values-${componentUid}`,
 		displayName: t('ai_tools.update_form_values'),
-		description: `Set values of form on the current page`,
+		description:
+			"Update field values in the form currently open in the UI. Changes are local until the user saves. Does NOT update the database — use the items tool with action: 'update' for that. IMPORTANT: This tool ONLY affects the page currently open in the editor. To modify user-attached context items, use the items tool instead.",
 		inputSchema: writeInputSchema,
 		execute: (args) => {
 			const output: string[] = [];
diff --git a/app/src/components/v-form/types.ts b/app/src/components/v-form/types.ts
index 38e049ca25ecf..638fe49623871 100644
--- a/app/src/components/v-form/types.ts
+++ b/app/src/components/v-form/types.ts
@@ -1,8 +1,11 @@
 import { DeepPartial, Field, InterfaceConfig } from '@directus/types';
 
-export type FormField = DeepPartial<Field> & {
+export type FormField = Omit<DeepPartial<Field>, 'meta'> & {
 	field: string;
 	name: string;
+	meta?: DeepPartial<Field['meta']> & {
+		non_editable?: boolean;
+	};
 } & Pick<InterfaceConfig, 'hideLabel' | 'hideLoader' | 'indicatorStyle'>;
 
 export interface ComparisonContext {
diff --git a/app/src/composables/use-permissions/item/lib/get-fields.ts b/app/src/composables/use-permissions/item/lib/get-fields.ts
index 4633dd28d91ae..d199dd3b9ed7e 100644
--- a/app/src/composables/use-permissions/item/lib/get-fields.ts
+++ b/app/src/composables/use-permissions/item/lib/get-fields.ts
@@ -3,6 +3,7 @@ import { Field, ItemPermissions } from '@directus/types';
 import { cloneDeep } from 'lodash';
 import { computed, ref, Ref, unref } from 'vue';
 import { Collection, IsNew } from '../../types';
+import type { FormField } from '@/components/v-form/types';
 import { usePermissionsStore } from '@/stores/permissions';
 import { useUserStore } from '@/stores/user';
 
@@ -34,10 +35,11 @@ export function getFields(collection: Collection, isNew: IsNew, fetchedItemPermi
 		if (!permission?.fields?.includes('*')) {
 			for (const field of fields) {
 				if (!permission?.fields?.includes(field.field)) {
-					field.meta = {
+					(field as FormField).meta = {
 						...(field.meta || {}),
 						readonly: true,
-					} as Field['meta'];
+						non_editable: true,
+					};
 				}
 			}
 		}
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 9cff9082f88ef..c774047d8d68d 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -1667,6 +1667,7 @@ live_preview:
   close_window: Open in Split View
   toggle_3d: Toggle 3D
   iframe_title: Live Website Preview
+  display_options: Display Options
   exit_full_width: Exit Full Width
   open_in_visual_editor: Open in Visual Editor
 shares: Shares
@@ -1697,6 +1698,29 @@ ai:
   clear_conversation: Clear Conversation
   build_with_assistant: Build with AI Assistant
   responses_may_be_inaccurate: AI responses may be inaccurate
+  add_content: Add Content
+  prompt: Prompt
+  prompts: Prompts
+  items: Items
+  content: Content
+  insert_prompt: Insert Prompt
+  insert_reusable_prompt: Insert a reusable prompt template
+  insert_item_context: Insert item context
+  coming_soon: Coming soon
+  failed_to_load_prompts: Failed to load prompts
+  failed_to_load_items: Failed to load items
+  some_context_failed: '{count} context item(s) could not be loaded'
+  prompt_inserted: Prompt inserted
+  prompt_staged: Prompt staged
+  items_staged: Items staged
+  some_items_staged: '{count} item(s) staged (limit reached)'
+  image_preview: Image preview
+  item_staged: Item staged
+  invalid_collection: Invalid collection
+  element_already_staged: Element already staged
+  max_elements_reached: Maximum elements reached
+  element_staged: Element staged
+  failed_to_insert_prompt: Failed to insert prompt
   go_to_settings: Go to Settings
   setup_ai_assistant: Setup AI Assistant
   setup_ai_assistant_admin_description: Add your AI provider API keys in settings to enable AI Assistant.
diff --git a/app/src/layouts/calendar/index.ts b/app/src/layouts/calendar/index.ts
index 95adc96805bc5..1c5f75684aa2c 100644
--- a/app/src/layouts/calendar/index.ts
+++ b/app/src/layouts/calendar/index.ts
@@ -15,7 +15,7 @@ import CalendarActions from './actions.vue';
 import CalendarLayout from './calendar.vue';
 import CalendarOptions from './options.vue';
 import { LayoutOptions } from './types';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import api from '@/api';
 import { useLayoutClickHandler } from '@/composables/use-layout-click-handler';
 import { useServerStore } from '@/stores/server';
@@ -38,10 +38,10 @@ export default defineLayout<LayoutOptions>({
 		actions: CalendarActions,
 	},
 	setup(props, { emit }) {
-		const aiStore = useAiStore();
+		const toolsStore = useAiToolsStore();
 		const { info } = useServerStore();
 
-		aiStore.onSystemToolResult((tool, input) => {
+		toolsStore.onSystemToolResult((tool, input) => {
 			if (tool === 'items' && input.collection === collection.value) {
 				refresh();
 			}
diff --git a/app/src/layouts/cards/index.ts b/app/src/layouts/cards/index.ts
index 61bddebc2b7de..bae78611c4d4a 100644
--- a/app/src/layouts/cards/index.ts
+++ b/app/src/layouts/cards/index.ts
@@ -8,7 +8,7 @@ import CardsActions from './actions.vue';
 import CardsLayout from './cards.vue';
 import CardsOptions from './options.vue';
 import { LayoutOptions, LayoutQuery } from './types';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import { useRelationsStore } from '@/stores/relations';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { formatItemsCountPaginated } from '@/utils/format-items-count';
@@ -28,9 +28,9 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		actions: CardsActions,
 	},
 	setup(props, { emit }) {
-		const aiStore = useAiStore();
+		const toolsStore = useAiToolsStore();
 
-		aiStore.onSystemToolResult((tool, input) => {
+		toolsStore.onSystemToolResult((tool, input) => {
 			if (tool === 'items' && input.collection === collection.value) {
 				refresh();
 			}
diff --git a/app/src/layouts/kanban/index.ts b/app/src/layouts/kanban/index.ts
index 1c10d7a50cada..a4d5a58428cf6 100644
--- a/app/src/layouts/kanban/index.ts
+++ b/app/src/layouts/kanban/index.ts
@@ -9,7 +9,7 @@ import KanbanActions from './actions.vue';
 import KanbanLayout from './kanban.vue';
 import KanbanOptions from './options.vue';
 import type { ChangeEvent, Group, Item, LayoutOptions, LayoutQuery } from './types';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import api from '@/api';
 import { useLayoutClickHandler } from '@/composables/use-layout-click-handler';
 import { usePermissionsStore } from '@/stores/permissions';
@@ -34,9 +34,9 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		actions: KanbanActions,
 	},
 	setup(props, { emit }) {
-		const aiStore = useAiStore();
+		const toolsStore = useAiToolsStore();
 
-		aiStore.onSystemToolResult((tool, input) => {
+		toolsStore.onSystemToolResult((tool, input) => {
 			if (tool === 'items' && input.collection === collection.value) {
 				refresh();
 			}
diff --git a/app/src/layouts/map/index.ts b/app/src/layouts/map/index.ts
index 76bb74a5a7ee1..0c1852fbe0c79 100644
--- a/app/src/layouts/map/index.ts
+++ b/app/src/layouts/map/index.ts
@@ -11,7 +11,7 @@ import MapLayout from './map.vue';
 import MapOptions from './options.vue';
 import { getMapStyle } from './style';
 import { LayoutOptions, LayoutQuery } from './types';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import { formatItemsCountPaginated, formatItemsCountRelative } from '@/utils/format-items-count';
 import { getGeometryFormatForType, toGeoJSON } from '@/utils/geometry';
 import { getItemRoute } from '@/utils/get-route';
@@ -31,9 +31,9 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		actions: MapActions,
 	},
 	setup(props, { emit }) {
-		const aiStore = useAiStore();
+		const toolsStore = useAiToolsStore();
 
-		aiStore.onSystemToolResult((tool, input) => {
+		toolsStore.onSystemToolResult((tool, input) => {
 			if (tool === 'items' && input.collection === collection.value) {
 				refresh();
 			}
diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts
index c95d96a617af2..d6f250f1ffde6 100644
--- a/app/src/layouts/tabular/index.ts
+++ b/app/src/layouts/tabular/index.ts
@@ -8,7 +8,7 @@ import TabularActions from './actions.vue';
 import TabularOptions from './options.vue';
 import TabularLayout from './tabular.vue';
 import { LayoutOptions, LayoutQuery } from './types';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import { HeaderRaw, Sort } from '@/components/v-table/types';
 import { useAliasFields } from '@/composables/use-alias-fields';
 import { useLayoutClickHandler } from '@/composables/use-layout-click-handler';
@@ -35,9 +35,9 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 		const { t, n } = useI18n();
 		const fieldsStore = useFieldsStore();
 
-		const aiStore = useAiStore();
+		const toolsStore = useAiToolsStore();
 
-		aiStore.onSystemToolResult((tool, input) => {
+		toolsStore.onSystemToolResult((tool, input) => {
 			if (tool === 'items' && input.collection === collection.value) {
 				refresh();
 			}
diff --git a/app/src/modules/content/routes/item.vue b/app/src/modules/content/routes/item.vue
index 327b558756b73..838688b66f527 100644
--- a/app/src/modules/content/routes/item.vue
+++ b/app/src/modules/content/routes/item.vue
@@ -10,7 +10,8 @@ import { useRoute, useRouter } from 'vue-router';
 import ContentNavigation from '../components/navigation.vue';
 import VersionMenu from '../components/version-menu.vue';
 import ContentNotFound from './not-found.vue';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useContextStaging } from '@/ai/composables/use-context-staging';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import VBreadcrumb from '@/components/v-breadcrumb.vue';
 import VButton from '@/components/v-button.vue';
 import VCardActions from '@/components/v-card-actions.vue';
@@ -117,11 +118,12 @@ const {
 	validationErrors: itemValidationErrors,
 } = useItem(collection, primaryKey, query);
 
-const aiStore = useAiStore();
+const toolsStore = useAiToolsStore();
 
-aiStore.onSystemToolResult((tool, input) => {
-	if (tool === 'items' && input.collection === collection.value) {
+toolsStore.onSystemToolResult((tool, input) => {
+	if (tool === 'items' && input.collection === collection.value && input.action !== 'read') {
 		refresh();
+		refreshLivePreview();
 	}
 });
 
@@ -405,11 +407,17 @@ const { flowDialogsContext, manualFlows, provideRunManualFlow } = useFlows({
 
 provideRunManualFlow();
 
+const { stageVisualElement } = useContextStaging();
+
 useEventListener('message', (event) => {
 	if (!sameOrigin(event.origin, window.location.href)) return;
 	if (event.source !== popupWindow) return;
 
 	if (event.data === 'refresh') refresh();
+
+	if (event.data?.action === 'stage-visual-element') {
+		stageVisualElement(event.data.data.element);
+	}
 });
 
 async function refreshLivePreview() {
diff --git a/app/src/modules/visual/components/editing-layer.vue b/app/src/modules/visual/components/editing-layer.vue
index 82895f547e552..ca2f69a9297d0 100644
--- a/app/src/modules/visual/components/editing-layer.vue
+++ b/app/src/modules/visual/components/editing-layer.vue
@@ -3,14 +3,28 @@ import { useCollection } from '@directus/composables';
 import { PrimaryKey } from '@directus/types';
 import { getEndpoint } from '@directus/utils';
 import { useEventListener } from '@vueuse/core';
-import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onUnmounted, ref, toRaw, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { EditConfig, NavigationData, ReceiveData, SavedData, SendAction } from '../types';
+import type {
+	AddToContextData,
+	EditConfig,
+	HighlightElementData,
+	NavigationData,
+	ReceiveData,
+	SavedData,
+	SendAction,
+} from '../types';
 import { sameOrigin } from '../utils/same-origin';
+import { useContextStaging } from '@/ai/composables/use-context-staging';
+import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiContextStore } from '@/ai/stores/use-ai-context';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import api from '@/api';
 import VButton from '@/components/v-button.vue';
 import VIcon from '@/components/v-icon/v-icon.vue';
 import { useNotificationsStore } from '@/stores/notifications';
+import { useServerStore } from '@/stores/server';
+import { useSettingsStore } from '@/stores/settings';
 import { getCollectionRoute, getItemRoute } from '@/utils/get-route';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
@@ -24,7 +38,7 @@ const { frameSrc, frameEl, showEditableElements } = defineProps<{
 
 const emit = defineEmits<{
 	navigation: [data: NavigationData];
-	saved: [];
+	saved: [data: { collection: string; primaryKey: PrimaryKey }];
 }>();
 
 const { t } = useI18n();
@@ -34,24 +48,43 @@ const { collection, primaryKey, fields, mode, position, isNew, edits, editOverla
 
 const tooltipPlacement = computed(() => (mode.value === 'drawer' ? 'bottom' : null));
 
-const { sendSaved } = useWebsiteFrame({ onClickEdit });
+const { sendSaved, sendHighlightElement } = useWebsiteFrame({ onClickEdit });
+
+useVisualEditingAi({ sendSaved, sendHighlightElement });
 
 const { popoverWidth } = usePopoverWidth();
 
+// Clear highlight when edit overlay closes
+watch(editOverlayActive, (isActive) => {
+	if (!isActive) {
+		sendHighlightElement({ key: null });
+	}
+});
+
 function useWebsiteFrame({ onClickEdit }: { onClickEdit: (data: unknown) => void }) {
+	const serverStore = useServerStore();
+	const settingsStore = useSettingsStore();
+	const contextStore = useAiContextStore();
+	const { stageVisualElement } = useContextStaging();
+
 	useEventListener('message', (event) => {
-		if (!sameOrigin(event.origin, frameSrc)) return;
+		if (!sameOrigin(event.origin, frameSrc)) {
+			return;
+		}
 
 		const { action = null, data = null }: ReceiveData = event.data;
 
 		if (action === 'connect') {
 			sendConfirm();
 			if (showEditableElements) sendShowEditableElements(true);
+			contextStore.syncVisualElementContextUrl(frameSrc);
 		}
 
 		if (action === 'navigation') receiveNavigation(data);
 
 		if (action === 'edit') onClickEdit(data);
+
+		if (action === 'addToContext') receiveAddToContext(data);
 	});
 
 	watch(
@@ -61,7 +94,7 @@ function useWebsiteFrame({ onClickEdit }: { onClickEdit: (data: unknown) => void
 		},
 	);
 
-	return { sendSaved };
+	return { sendSaved, sendHighlightElement };
 
 	function receiveNavigation(data: unknown) {
 		const { url, title } = data as NavigationData;
@@ -75,7 +108,8 @@ function useWebsiteFrame({ onClickEdit }: { onClickEdit: (data: unknown) => void
 	}
 
 	function sendConfirm() {
-		send('confirm', null);
+		const aiEnabled = serverStore.info.ai_enabled && settingsStore.availableAiProviders.length > 0;
+		send('confirm', { aiEnabled });
 	}
 
 	function sendShowEditableElements(show: boolean) {
@@ -85,6 +119,71 @@ function useWebsiteFrame({ onClickEdit }: { onClickEdit: (data: unknown) => void
 	function sendSaved(data: SavedData) {
 		send('saved', data);
 	}
+
+	function sendHighlightElement(data: HighlightElementData) {
+		send('highlightElement', data);
+	}
+
+	function receiveAddToContext(data: unknown) {
+		const { key, editConfig, rect } = data as AddToContextData;
+
+		if (!key || !editConfig?.collection || editConfig.item == null) return;
+
+		stageVisualElement({
+			key,
+			collection: editConfig.collection,
+			item: editConfig.item,
+			fields: editConfig.fields,
+			rect,
+		});
+	}
+}
+
+function useVisualEditingAi({
+	sendSaved,
+	sendHighlightElement,
+}: {
+	sendSaved: (data: SavedData) => void;
+	sendHighlightElement: (data: HighlightElementData) => void;
+}) {
+	const aiStore = useAiStore();
+	const contextStore = useAiContextStore();
+	const toolsStore = useAiToolsStore();
+
+	// Any non-read mutation should trigger a preview refresh
+	const unsubscribeItemsResult = toolsStore.onSystemToolResult((tool, input) => {
+		if (tool !== 'items') return;
+		if (input.action === 'read') return;
+
+		sendSaved({ key: '', collection: input.collection as string, item: null, payload: {} });
+	});
+
+	const unsubscribeHighlight = aiStore.onVisualElementHighlight((data) => {
+		if (data === null) {
+			sendHighlightElement({ key: null });
+		} else {
+			const payload: HighlightElementData = {
+				collection: data.collection,
+				item: data.item,
+			};
+
+			if (data.fields) {
+				const rawFields = Array.from(toRaw(data.fields)).filter((field) => typeof field === 'string');
+
+				if (rawFields.length > 0) {
+					payload.fields = rawFields;
+				}
+			}
+
+			sendHighlightElement(payload);
+		}
+	});
+
+	onUnmounted(() => {
+		unsubscribeItemsResult.off();
+		unsubscribeHighlight.off();
+		contextStore.clearVisualElementContext();
+	});
 }
 
 function useItemWithEdits() {
@@ -166,7 +265,7 @@ function useItemWithEdits() {
 				payload: JSON.parse(JSON.stringify(edits.value)),
 			});
 
-			emit('saved');
+			emit('saved', { collection: collection.value, primaryKey: primaryKey.value });
 
 			resetEdits();
 		} catch (error) {
diff --git a/app/src/modules/visual/routes/visual-editor.vue b/app/src/modules/visual/routes/visual-editor.vue
index e9147d60e547f..dc99393b2f834 100644
--- a/app/src/modules/visual/routes/visual-editor.vue
+++ b/app/src/modules/visual/routes/visual-editor.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import { ref } from 'vue';
+import { useBreakpoints, useElementHover, useLocalStorage } from '@vueuse/core';
+import { computed, type ComputedRef, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import EditingLayer from '../components/editing-layer.vue';
-import type { NavigationData } from '../types';
-import { getUrlRoute } from '../utils/get-url-route';
-import { sameOrigin } from '../utils/same-origin';
+import AiConversation from '@/ai/components/ai-conversation.vue';
+import AiMagicButton from '@/ai/components/ai-magic-button.vue';
+import { useAiStore } from '@/ai/stores/use-ai';
 import TransitionExpand from '@/components/transition/expand.vue';
 import VButton from '@/components/v-button.vue';
 import VIcon from '@/components/v-icon/v-icon.vue';
+import { BREAKPOINTS } from '@/constants';
+import EditingLayer from '@/modules/visual/components/editing-layer.vue';
+import type { NavigationData } from '@/modules/visual/types';
+import { getUrlRoute } from '@/modules/visual/utils/get-url-route';
+import { sameOrigin } from '@/modules/visual/utils/same-origin';
+import { useServerStore } from '@/stores/server';
 import LivePreview from '@/views/private/components/live-preview.vue';
 import ModuleBar from '@/views/private/components/module-bar.vue';
 import NotificationDialogs from '@/views/private/components/notification-dialogs.vue';
 import NotificationsGroup from '@/views/private/components/notifications-group.vue';
+import PrivateViewDrawer from '@/views/private/private-view/components/private-view-drawer.vue';
 
 const { dynamicUrl, invalidUrl } = defineProps<{
 	urls: string[];
@@ -23,12 +30,17 @@ const { dynamicUrl, invalidUrl } = defineProps<{
 
 const { t } = useI18n();
 const router = useRouter();
+const serverStore = useServerStore();
+const breakpoints = useBreakpoints(BREAKPOINTS);
+const isMobile = breakpoints.smallerOrEqual('sm');
 
 useHead({ title: t('visual_editor') });
 
 const moduleBarOpen = ref(true);
 const showEditableElements = ref(false);
 
+const { sidebarSize, sidebarCollapsed, splitterCollapsed, mobileDrawerOpen, aiButtonHovering } = useAiSidebar(isMobile);
+
 const { dynamicDisplay, onNavigation } = usePageInfo();
 
 function usePageInfo() {
@@ -55,6 +67,42 @@ function onSelectUrl(newUrl: string, oldUrl: string) {
 		router.replace(getUrlRoute(newUrl));
 	}
 }
+
+function useAiSidebar(isMobile: ComputedRef<boolean>) {
+	const aiStore = useAiStore();
+	const sidebarSize = ref(370);
+	const sidebarCollapsed = useLocalStorage('visual-editor-ai-sidebar-collapsed', false);
+	const mobileDrawerOpen = ref(false);
+
+	const splitterCollapsed = computed({
+		get() {
+			return isMobile.value ? true : sidebarCollapsed.value;
+		},
+		set(val: boolean) {
+			if (isMobile.value) return;
+			sidebarCollapsed.value = val;
+		},
+	});
+
+	watch(isMobile, (mobile) => {
+		if (mobile) {
+			mobileDrawerOpen.value = false;
+		}
+	});
+
+	aiStore.onFocusInput(() => {
+		if (isMobile.value) {
+			mobileDrawerOpen.value = true;
+		} else {
+			sidebarCollapsed.value = false;
+		}
+	});
+
+	const aiButtonRef = useTemplateRef<HTMLButtonElement>('ai-button');
+	const aiButtonHovering = useElementHover(aiButtonRef);
+
+	return { sidebarSize, sidebarCollapsed, splitterCollapsed, mobileDrawerOpen, aiButtonHovering };
+}
 </script>
 
 <template>
@@ -70,10 +118,15 @@ function onSelectUrl(newUrl: string, oldUrl: string) {
 			:dynamic-display
 			:single-url-subdued="false"
 			:header-expanded="moduleBarOpen"
+			:sidebar-size="sidebarSize"
+			:sidebar-collapsed="splitterCollapsed"
+			:sidebar-disabled="isMobile"
 			hide-refresh-button
 			hide-popup-button
 			centered
 			@select-url="onSelectUrl"
+			@update:sidebar-size="sidebarSize = $event"
+			@update:sidebar-collapsed="splitterCollapsed = $event"
 		>
 			<template #prepend-header>
 				<VButton
@@ -100,13 +153,48 @@ function onSelectUrl(newUrl: string, oldUrl: string) {
 				</VButton>
 			</template>
 
+			<template #append-header>
+				<VButton
+					v-if="serverStore.info.ai_enabled"
+					ref="ai-button"
+					v-tooltip.bottom.start="$t('ai_assistant')"
+					x-small
+					rounded
+					icon
+					secondary
+					:active="isMobile ? mobileDrawerOpen : !sidebarCollapsed"
+					@click="isMobile ? (mobileDrawerOpen = !mobileDrawerOpen) : (sidebarCollapsed = !sidebarCollapsed)"
+				>
+					<AiMagicButton :animate="aiButtonHovering" />
+				</VButton>
+			</template>
+
+			<template v-if="serverStore.info.ai_enabled && !isMobile" #sidebar>
+				<aside class="ai-sidebar">
+					<AiConversation />
+				</aside>
+			</template>
+
 			<template #overlay="{ frameEl, frameSrc }">
 				<EditingLayer :frame-src :frame-el :show-editable-elements @navigation="onNavigation" />
 			</template>
+
+			<template #notifications>
+				<NotificationDialogs />
+				<NotificationsGroup />
+			</template>
 		</LivePreview>
 
-		<NotificationDialogs />
-		<NotificationsGroup />
+		<PrivateViewDrawer
+			v-if="serverStore.info.ai_enabled && isMobile"
+			:collapsed="!mobileDrawerOpen"
+			placement="right"
+			@update:collapsed="mobileDrawerOpen = !$event"
+		>
+			<aside class="ai-sidebar">
+				<AiConversation />
+			</aside>
+		</PrivateViewDrawer>
 	</div>
 </template>
 
@@ -119,13 +207,13 @@ function onSelectUrl(newUrl: string, oldUrl: string) {
 	overflow: hidden;
 }
 
-.live-preview {
+.ai-sidebar {
 	block-size: 100%;
 	inline-size: 100%;
-	min-inline-size: 0;
-}
-
-.spacer {
-	flex: 1;
+	padding: 12px;
+	background-color: var(--theme--sidebar--background);
+	border-inline-start: var(--theme--sidebar--border-width) solid var(--theme--sidebar--border-color);
+	display: flex;
+	flex-direction: column;
 }
 </style>
diff --git a/app/src/modules/visual/types/index.ts b/app/src/modules/visual/types/index.ts
index 24dd4ab6fa4c5..7f5d578dbb14d 100644
--- a/app/src/modules/visual/types/index.ts
+++ b/app/src/modules/visual/types/index.ts
@@ -14,15 +14,39 @@ export type SavedData = {
 	key: string;
 	collection: EditConfig['collection'];
 	item: EditConfig['item'];
-	payload: Record<string, any>;
+	payload: Record<string, unknown>;
 };
 
-export type ReceiveAction = 'connect' | 'edit' | 'navigation';
+export type AddToContextData = {
+	key: string;
+	editConfig: EditConfig;
+	rect?: DOMRect;
+};
 
-export type SendAction = 'confirm' | 'showEditableElements' | 'saved';
+export type HighlightElementData = {
+	key?: string | null;
+	collection?: string;
+	item?: PrimaryKey;
+	fields?: string[];
+};
 
-/** Not shared with the package */
+export type ConfirmData = {
+	aiEnabled: boolean;
+};
 
-export type ReceiveData = { action: ReceiveAction | null; data: unknown };
+export type ReceiveAction = 'connect' | 'edit' | 'navigation' | 'addToContext';
+
+export type SendAction = 'confirm' | 'showEditableElements' | 'saved' | 'highlightElement';
+
+/** Not shared with the package */
 
 export type NavigationData = { url: string; title: string };
+
+export type EditData = { key: string; editConfig: EditConfig; rect: DOMRect };
+
+export type ReceiveData =
+	| { action: 'connect'; data: null }
+	| { action: 'edit'; data: EditData }
+	| { action: 'navigation'; data: NavigationData }
+	| { action: 'addToContext'; data: AddToContextData }
+	| { action: null; data: null };
diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index 178946e6f668d..e78ef4cd733be 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -6,7 +6,7 @@ import { isEqual, isNil, omit } from 'lodash';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { useRelationsStore } from './relations';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import api from '@/api';
 import { COLLECTIONS_DENY_LIST } from '@/constants';
 import { i18n } from '@/lang';
@@ -17,9 +17,9 @@ import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 
 export const useCollectionsStore = defineStore('collectionsStore', () => {
-	const aiStore = useAiStore();
+	const toolsStore = useAiToolsStore();
 
-	aiStore.onSystemToolResult(async (toolName) => {
+	toolsStore.onSystemToolResult(async (toolName) => {
 		if (toolName === 'collections') {
 			await hydrate();
 		}
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index d338db28d4dfb..de068b9b7fbd6 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -4,7 +4,7 @@ import { isEmpty, isEqual, isNil, merge, omit, orderBy } from 'lodash';
 import { nanoid } from 'nanoid';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import api from '@/api';
 import { i18n } from '@/lang';
 import { useCollectionsStore } from '@/stores/collections';
@@ -68,9 +68,9 @@ const fakeFilesField: Field = {
 let currentUpdate: string;
 
 export const useFieldsStore = defineStore('fieldsStore', () => {
-	const aiStore = useAiStore();
+	const toolsStore = useAiToolsStore();
 
-	aiStore.onSystemToolResult(async (toolName) => {
+	toolsStore.onSystemToolResult(async (toolName) => {
 		// Fields can be modified as a nested object within collections as well
 		if (toolName === 'collections' || toolName === 'fields') {
 			await hydrate();
diff --git a/app/src/stores/flows.ts b/app/src/stores/flows.ts
index 2bf1dd49a699c..7ed5cc1523d7e 100644
--- a/app/src/stores/flows.ts
+++ b/app/src/stores/flows.ts
@@ -1,14 +1,14 @@
 import type { FlowRaw } from '@directus/types';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import { usePermissionsStore } from '@/stores/permissions';
 import { fetchAll } from '@/utils/fetch-all';
 
 export const useFlowsStore = defineStore('flowsStore', () => {
-	const aiStore = useAiStore();
+	const toolsStore = useAiToolsStore();
 
-	aiStore.onSystemToolResult(async (toolName) => {
+	toolsStore.onSystemToolResult(async (toolName) => {
 		if (toolName === 'flows') {
 			await hydrate();
 		}
diff --git a/app/src/stores/relations.ts b/app/src/stores/relations.ts
index 4e6837f3af502..8737fb2e0118d 100644
--- a/app/src/stores/relations.ts
+++ b/app/src/stores/relations.ts
@@ -3,14 +3,14 @@ import { getRelations, getRelationType } from '@directus/utils';
 import { isEqual } from 'lodash';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { useAiStore } from '@/ai/stores/use-ai';
+import { useAiToolsStore } from '@/ai/stores/use-ai-tools';
 import api from '@/api';
 import { useFieldsStore } from '@/stores/fields';
 
 export const useRelationsStore = defineStore('relations', () => {
-	const aiStore = useAiStore();
+	const toolsStore = useAiToolsStore();
 
-	aiStore.onSystemToolResult(async (toolName) => {
+	toolsStore.onSystemToolResult(async (toolName) => {
 		if (toolName === 'relations') {
 			await hydrate();
 		}
diff --git a/app/src/views/private/components/file-lightbox.vue b/app/src/views/private/components/file-lightbox.vue
index 37440345accf4..d5ba56905e59d 100644
--- a/app/src/views/private/components/file-lightbox.vue
+++ b/app/src/views/private/components/file-lightbox.vue
@@ -7,6 +7,7 @@ import FilePreview, { type Props as FilePreviewProps } from '@/views/private/com
 
 interface Props extends FilePreviewProps {
 	modelValue: boolean;
+	src?: string;
 }
 
 const props = defineProps<Props>();
@@ -24,7 +25,7 @@ const internalModelValue = useSync(props, 'modelValue', emit);
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
 
-		<FilePreview :file="file" :preset="null" in-modal @click="internalModelValue = false" />
+		<FilePreview :file="file" :src="src" :preset="null" in-modal @click="internalModelValue = false" />
 
 		<VButton class="close" icon rounded @click="internalModelValue = false">
 			<VIcon name="close" />
diff --git a/app/src/views/private/components/file-preview.vue b/app/src/views/private/components/file-preview.vue
index a30cfbe400e49..f3f0eff66ab89 100644
--- a/app/src/views/private/components/file-preview.vue
+++ b/app/src/views/private/components/file-preview.vue
@@ -12,6 +12,8 @@ export interface Props {
 	inModal?: boolean;
 	disabled?: boolean;
 	nonEditable?: boolean;
+	/** Direct source URL, bypasses asset URL computation from file.id */
+	src?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), { preset: 'system-large-contain' });
@@ -22,12 +24,14 @@ defineEmits<{
 
 const file = toRef(props, 'file');
 
-const src = computed(() =>
-	getAssetUrl(file.value.id, {
+const src = computed(() => {
+	if (props.src) return props.src;
+
+	return getAssetUrl(file.value.id, {
 		imageKey: props.preset ?? undefined,
 		cacheBuster: file.value.modified_on,
-	}),
-);
+	});
+});
 
 const type = computed<'image' | 'video' | 'audio' | string>(() => {
 	const mimeType = file.value.type;
diff --git a/app/src/views/private/components/live-preview.vue b/app/src/views/private/components/live-preview.vue
index a8385db7a5f04..20bdba1f5893e 100644
--- a/app/src/views/private/components/live-preview.vue
+++ b/app/src/views/private/components/live-preview.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useElementSize } from '@directus/composables';
+import { SplitPanel } from '@directus/vue-split-panel';
 import { computed, type CSSProperties, nextTick, onMounted, ref, useSlots, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -17,6 +18,7 @@ import VTextOverflow from '@/components/v-text-overflow.vue';
 import EditingLayer from '@/modules/visual/components/editing-layer.vue';
 import { getUrlRoute } from '@/modules/visual/utils/get-url-route';
 import { sameOrigin } from '@/modules/visual/utils/same-origin';
+import PrivateViewResizeHandle from '@/views/private/private-view/components/private-view-resize-handle.vue';
 
 declare global {
 	interface Window {
@@ -35,6 +37,9 @@ const {
 	showOpenInVisualEditor = true,
 	defaultShowEditableElements = false,
 	isFullWidth = false,
+	sidebarSize,
+	sidebarCollapsed = true,
+	sidebarDisabled = false,
 } = defineProps<{
 	url: string | string[];
 	invalidUrl?: boolean;
@@ -51,13 +56,18 @@ const {
 	showOpenInVisualEditor?: boolean;
 	defaultShowEditableElements?: boolean;
 	isFullWidth?: boolean;
+	sidebarSize?: number;
+	sidebarCollapsed?: boolean;
+	sidebarDisabled?: boolean;
 }>();
 
 const emit = defineEmits<{
 	'new-window': [];
 	selectUrl: [newUrl: string, oldUrl: string];
-	saved: [];
+	saved: [data: { collection: string; primaryKey: string | number }];
 	'exit-full-width': [];
+	'update:sidebarSize': [size: number];
+	'update:sidebarCollapsed': [collapsed: boolean];
 }>();
 
 const { t } = useI18n();
@@ -77,6 +87,7 @@ const isRefreshing = ref(false);
 const showEditableElements = ref(defaultShowEditableElements);
 const overlayProvided = computed(() => !!slots.overlay);
 const hasDisplayOptions = computed(() => !!slots['display-options']);
+const hasSidebar = computed(() => !!slots.sidebar);
 
 const livePreviewEl = ref<HTMLElement>();
 const resizeHandle = ref<HTMLDivElement>();
@@ -253,6 +264,7 @@ function useUrls() {
 		<div class="header">
 			<div class="group">
 				<slot name="prepend-header" />
+
 				<VButton
 					v-if="isFullWidth"
 					v-tooltip.bottom.end="t('live_preview.exit_full_width')"
@@ -278,7 +290,14 @@ function useUrls() {
 
 				<VMenu v-else-if="hasDisplayOptions" show-arrow placement="bottom-start">
 					<template #activator="{ toggle }">
-						<VButton v-tooltip.bottom.end="t('display_options')" x-small rounded icon secondary @click="toggle">
+						<VButton
+							v-tooltip.bottom.end="t('live_preview.display_options')"
+							x-small
+							rounded
+							icon
+							secondary
+							@click="toggle"
+						>
 							<VIcon small name="display_settings" />
 						</VButton>
 					</template>
@@ -403,6 +422,7 @@ function useUrls() {
 			>
 				<VIcon small name="devices" />
 			</VButton>
+			<slot name="append-header" />
 		</div>
 
 		<VInfo v-if="!frameSrc" :title="$t('no_url')" icon="edit_square" center>
@@ -413,6 +433,72 @@ function useUrls() {
 			{{ $t('invalid_url_copy') }}
 		</VInfo>
 
+		<SplitPanel
+			v-else-if="hasSidebar"
+			:size="sidebarSize"
+			:collapsed="sidebarCollapsed"
+			:disabled="sidebarDisabled"
+			primary="end"
+			size-unit="px"
+			collapsible
+			:collapsed-size="0"
+			:collapse-threshold="70"
+			:min-size="280"
+			:max-size="600"
+			:snap-points="[370]"
+			:snap-threshold="6"
+			:transition-duration="125"
+			divider-hit-area="24px"
+			class="content-split"
+			@update:size="(size: number) => emit('update:sidebarSize', size)"
+			@update:collapsed="
+				(collapsed: boolean) => {
+					emit('update:sidebarCollapsed', collapsed);
+				}
+			"
+		>
+			<template #start>
+				<div class="container">
+					<div class="iframe-view" :style="iframeViewStyle">
+						<div
+							ref="resizeHandle"
+							class="resize-handle"
+							:style="{
+								inlineSize: width ? `${width}px` : '100%',
+								blockSize: height ? `${height}px` : '100%',
+								resize: fullscreen ? 'none' : 'both',
+								transform: `scale(${zoom})`,
+								transformOrigin: zoom >= 1 ? 'top left' : 'center center',
+							}"
+						>
+							<iframe
+								id="frame"
+								ref="frameEl"
+								:src="frameSrc"
+								:title="$t('live_preview.iframe_title')"
+								@load="onIframeLoad"
+							/>
+							<slot name="overlay" :frame-el :frame-src />
+							<EditingLayer
+								v-if="visualEditingEnabled && !overlayProvided"
+								:frame-el="frameEl"
+								:frame-src="frameSrc"
+								:show-editable-elements="showEditableElements"
+								@saved="(data) => emit('saved', data)"
+							/>
+						</div>
+					</div>
+					<slot name="notifications" />
+				</div>
+			</template>
+			<template #divider>
+				<PrivateViewResizeHandle />
+			</template>
+			<template #end>
+				<slot name="sidebar" />
+			</template>
+		</SplitPanel>
+
 		<div v-else class="container">
 			<div class="iframe-view" :style="iframeViewStyle">
 				<div
@@ -439,10 +525,11 @@ function useUrls() {
 						:frame-el="frameEl"
 						:frame-src="frameSrc"
 						:show-editable-elements="showEditableElements"
-						@saved="emit('saved')"
+						@saved="(data) => emit('saved', data)"
 					/>
 				</div>
 			</div>
+			<slot name="notifications" />
 		</div>
 	</div>
 </template>
@@ -584,11 +671,24 @@ function useUrls() {
 	}
 
 	.container {
+		position: relative;
 		inline-size: 100%;
 		block-size: calc(100% - var(--preview--header--height));
 		overflow: auto;
 	}
 
+	.content-split {
+		block-size: calc(100% - var(--preview--header--height));
+
+		.container {
+			block-size: 100%;
+		}
+
+		&:deep(.sp-divider) {
+			z-index: 8;
+		}
+	}
+
 	.iframe-view {
 		inline-size: 100%;
 		block-size: 100%;
diff --git a/package.json b/package.json
index b23847e8e0aaf..e05f98c6696ea 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,11 @@
 	},
 	"pnpm": {
 		"overrides": {
+			"fast-xml-parser": "5.3.4",
+			"minimatch>@isaacs/brace-expansion": "5.0.1",
 			"@yarnpkg/shell>cross-spawn": "7.0.6",
 			"pm2-sysmonit>systeminformation": "5.27.14",
-			"tar": "7.5.4",
+			"tar": "7.5.7",
 			"qs": "6.14.1"
 		}
 	},
diff --git a/packages/ai/src/types.ts b/packages/ai/src/types.ts
index fdfe3dbf21acf..8666b71a73e81 100644
--- a/packages/ai/src/types.ts
+++ b/packages/ai/src/types.ts
@@ -1,12 +1,5 @@
-/**
- * All supported AI provider types, including openai-compatible.
- */
-
 export type ProviderType = 'openai' | 'anthropic' | 'google' | 'openai-compatible';
 
-/**
- * Standard AI providers that use allowlist-based model validation.
- */
 export type StandardProviderType = Exclude<ProviderType, 'openai-compatible'>;
 
 export type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue };
@@ -58,3 +51,29 @@ export interface ModelDefinition {
 	/** Supports reasoning / chain-of-thought */
 	reasoning: boolean;
 }
+
+export type PrimaryKey = string | number;
+
+export interface ItemContextData {
+	collection: string;
+	key: PrimaryKey;
+}
+
+export interface VisualElementContextData {
+	key: string;
+	collection: string;
+	item: PrimaryKey;
+	fields?: string[];
+	rect?: { top: number; left: number; width: number; height: number };
+}
+
+export interface PromptContextData {
+	text: string;
+	prompt: Record<string, unknown>;
+	values: Record<string, string>;
+}
+
+export type ContextAttachment =
+	| { type: 'item'; data: ItemContextData; display: string; snapshot: Record<string, unknown> }
+	| { type: 'visual-element'; data: VisualElementContextData; display: string; snapshot: Record<string, unknown> }
+	| { type: 'prompt'; data: PromptContextData; display: string; snapshot: Record<string, unknown> };
diff --git a/packages/env/src/constants/type-map.ts b/packages/env/src/constants/type-map.ts
index 3b0ca3f17818e..96ae735b3cb6a 100644
--- a/packages/env/src/constants/type-map.ts
+++ b/packages/env/src/constants/type-map.ts
@@ -37,6 +37,7 @@ export const TYPE_MAP: Record<string, EnvType> = {
 	LOG_HTTP_IGNORE_PATHS: 'array',
 
 	REDIS_ENABLED: 'boolean',
+	REDIS_PASSWORD: 'string',
 
 	METRICS_TOKENS: 'array',
 	METRICS_SERVICES: 'array',
@@ -49,10 +50,15 @@ export const TYPE_MAP: Record<string, EnvType> = {
 	SECRET: 'string',
 
 	EXTENSIONS_ROLLDOWN: 'boolean',
+
 	EMAIL_SMTP_PASSWORD: 'string',
-	REDIS_PASSWORD: 'string',
-	'AUTH_.+_BIND_PASSWORD': 'string',
+
 	'STORAGE_.+_SECRET': 'string',
+
+	'AUTH_.+_BIND_DN': 'string',
+	'AUTH_.+_USER_DN': 'string',
+	'AUTH_.+_GROUP_DN': 'string',
+	'AUTH_.+_BIND_PASSWORD': 'string',
 } as const;
 
 export const TYPE_MAP_REGEX: [RegExp, EnvType][] = Object.entries(TYPE_MAP).map(([name, value]) => [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84279c2f3b2a5..767463dc5fcd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -923,9 +923,11 @@ catalogs:
       version: 4.0.2
 
 overrides:
+  fast-xml-parser: 5.3.4
+  minimatch>@isaacs/brace-expansion: 5.0.1
   '@yarnpkg/shell>cross-spawn': 7.0.6
   pm2-sysmonit>systeminformation: 5.27.14
-  tar: 7.5.4
+  tar: 7.5.7
   qs: 6.14.1
 
 importers:
@@ -1350,8 +1352,8 @@ importers:
         specifier: 'catalog:'
         version: 1.9.1
       tar:
-        specifier: 7.5.4
-        version: 7.5.4
+        specifier: 7.5.7
+        version: 7.5.7
       tsx:
         specifier: 'catalog:'
         version: 4.20.6
@@ -4856,8 +4858,8 @@ packages:
     resolution: {integrity: sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==}
     engines: {node: 20 || >=22}
 
-  '@isaacs/brace-expansion@5.0.0':
-    resolution: {integrity: sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==}
+  '@isaacs/brace-expansion@5.0.1':
+    resolution: {integrity: sha512-WMz71T1JS624nWj2n2fnYAuPovhv7EUhk69R6i9dsVyzxt5eM3bjwvgk9L+APE1TRscGysAVMANkB0jh0LQZrQ==}
     engines: {node: 20 || >=22}
 
   '@isaacs/cliui@8.0.2':
@@ -9269,16 +9271,8 @@ packages:
   fast-uri@3.1.0:
     resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
-  fast-xml-parser@4.5.3:
-    resolution: {integrity: sha512-RKihhV+SHsIUGXObeVy9AXiBbFwkVk7Syp8XgwN5U3JV416+Gwp/GO9i0JYKmikykgz/UHRrrV4ROuZEo/T0ig==}
-    hasBin: true
-
-  fast-xml-parser@5.2.5:
-    resolution: {integrity: sha512-pfX9uG9Ki0yekDHx2SiuRIyFdyAr1kMIMitPvb0YBo8SUfKvia7w7FIyd/l6av85pFYRhZscS75MwMnbvY+hcQ==}
-    hasBin: true
-
-  fast-xml-parser@5.3.0:
-    resolution: {integrity: sha512-gkWGshjYcQCF+6qtlrqBqELqNqnt4CxruY6UVAWWnqb3DQ6qaNFEIKqzYep1XzHLM/QtrHVCxyPOtTk4LTQ7Aw==}
+  fast-xml-parser@5.3.4:
+    resolution: {integrity: sha512-EFd6afGmXlCx8H8WTZHhAoDaWaGyuIBoZJ2mknrNxug+aZKjkp0a0dlars9Izl+jF+7Gu1/5f/2h68cQpe0IiA==}
     hasBin: true
 
   fastest-levenshtein@1.0.16:
@@ -10969,6 +10963,10 @@ packages:
     resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
     engines: {node: 20 || >=22}
 
+  minimatch@10.1.2:
+    resolution: {integrity: sha512-fu656aJ0n2kcXwsnwnv9g24tkU5uSmOlTjd6WyyaKm2Z+h1qmY6bAjrcaIxF/BslFqbZ8UBtbJi7KgQOZD2PTw==}
+    engines: {node: 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -13208,9 +13206,6 @@ packages:
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
-  strnum@1.1.2:
-    resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
-
   strnum@2.1.1:
     resolution: {integrity: sha512-7ZvoFTiCnGxBtDqJ//Cu6fWtZtc7Y3x+QOirG15wztbdngGSkht27o2pyGWrVy0b4WAy3jbKmnoK6g5VlVNUUw==}
 
@@ -13425,8 +13420,8 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
-  tar@7.5.4:
-    resolution: {integrity: sha512-AN04xbWGrSTDmVwlI4/GTlIIwMFk/XEv7uL8aa57zuvRy6s4hdBed+lVq2fAZ89XDa7Us3ANXcE3Tvqvja1kTA==}
+  tar@7.5.7:
+    resolution: {integrity: sha512-fov56fJiRuThVFXD6o6/Q354S7pnWMJIVlDBYijsTNx6jKSE4pvrDTs6lUnmGvNyfJwFQQwWy3owKz1ucIhveQ==}
     engines: {node: '>=18'}
 
   tarn@3.0.2:
@@ -14233,8 +14228,8 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
-  webidl-conversions@8.0.0:
-    resolution: {integrity: sha512-n4W4YFyz5JzOfQeA8oN7dUYpR+MBP3PIUsn2jLjWXwK5ASUzt0Jc/A5sAUZoCYFJRGF0FBKJ+1JjN43rNdsQzA==}
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
   webpack-virtual-modules@0.6.2:
@@ -15128,7 +15123,7 @@ snapshots:
   '@aws-sdk/xml-builder@3.921.0':
     dependencies:
       '@smithy/types': 4.9.0
-      fast-xml-parser: 5.2.5
+      fast-xml-parser: 5.3.4
       tslib: 2.8.1
 
   '@aws/lambda-invoke-store@0.1.1': {}
@@ -15216,7 +15211,7 @@ snapshots:
 
   '@azure/core-xml@1.5.0':
     dependencies:
-      fast-xml-parser: 5.3.0
+      fast-xml-parser: 5.3.4
       tslib: 2.8.1
 
   '@azure/identity@4.13.0':
@@ -16231,7 +16226,7 @@ snapshots:
       abort-controller: 3.0.0
       async-retry: 1.3.3
       duplexify: 4.1.3
-      fast-xml-parser: 4.5.3
+      fast-xml-parser: 5.3.4
       gaxios: 6.7.1(encoding@0.1.13)
       google-auth-library: 9.15.1(encoding@0.1.13)
       html-entities: 2.6.0
@@ -16694,7 +16689,7 @@ snapshots:
 
   '@isaacs/balanced-match@4.0.1': {}
 
-  '@isaacs/brace-expansion@5.0.0':
+  '@isaacs/brace-expansion@5.0.1':
     dependencies:
       '@isaacs/balanced-match': 4.0.1
 
@@ -20528,7 +20523,7 @@ snapshots:
       promise-inflight: 1.0.1
       rimraf: 3.0.2
       ssri: 8.0.1
-      tar: 7.5.4
+      tar: 7.5.7
       unique-filename: 1.1.1
     transitivePeerDependencies:
       - bluebird
@@ -20546,7 +20541,7 @@ snapshots:
       minipass-pipeline: 1.2.4
       p-map: 7.0.3
       ssri: 12.0.0
-      tar: 7.5.4
+      tar: 7.5.7
       unique-filename: 4.0.0
 
   cache-parser@1.2.5: {}
@@ -22006,15 +22001,7 @@ snapshots:
 
   fast-uri@3.1.0: {}
 
-  fast-xml-parser@4.5.3:
-    dependencies:
-      strnum: 1.1.2
-
-  fast-xml-parser@5.2.5:
-    dependencies:
-      strnum: 2.1.1
-
-  fast-xml-parser@5.3.0:
+  fast-xml-parser@5.3.4:
     dependencies:
       strnum: 2.1.1
 
@@ -22409,7 +22396,7 @@ snapshots:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 4.1.1
-      minimatch: 10.1.1
+      minimatch: 10.1.2
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
@@ -23850,11 +23837,15 @@ snapshots:
 
   minimatch@10.0.3:
     dependencies:
-      '@isaacs/brace-expansion': 5.0.0
+      '@isaacs/brace-expansion': 5.0.1
 
   minimatch@10.1.1:
     dependencies:
-      '@isaacs/brace-expansion': 5.0.0
+      '@isaacs/brace-expansion': 5.0.1
+
+  minimatch@10.1.2:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.1
 
   minimatch@3.1.2:
     dependencies:
@@ -24070,7 +24061,7 @@ snapshots:
       nopt: 8.1.0
       proc-log: 5.0.0
       semver: 7.7.3
-      tar: 7.5.4
+      tar: 7.5.7
       tinyglobby: 0.2.15
       which: 5.0.0
     transitivePeerDependencies:
@@ -24086,7 +24077,7 @@ snapshots:
       npmlog: 6.0.2
       rimraf: 3.0.2
       semver: 7.7.3
-      tar: 7.5.4
+      tar: 7.5.7
       which: 2.0.2
     transitivePeerDependencies:
       - bluebird
@@ -26295,7 +26286,7 @@ snapshots:
       bindings: 1.5.0
       node-addon-api: 7.1.1
       prebuild-install: 7.1.3
-      tar: 7.5.4
+      tar: 7.5.7
     optionalDependencies:
       node-gyp: 8.4.1
     transitivePeerDependencies:
@@ -26491,8 +26482,6 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
-  strnum@1.1.2: {}
-
   strnum@2.1.1: {}
 
   stubs@3.0.0: {}
@@ -26788,7 +26777,7 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  tar@7.5.4:
+  tar@7.5.7:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
       chownr: 3.0.0
@@ -27733,7 +27722,7 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
-  webidl-conversions@8.0.0: {}
+  webidl-conversions@8.0.1: {}
 
   webpack-virtual-modules@0.6.2: {}
 
@@ -27758,7 +27747,7 @@ snapshots:
   whatwg-url@15.1.0:
     dependencies:
       tr46: 6.0.0
-      webidl-conversions: 8.0.0
+      webidl-conversions: 8.0.1
 
   whatwg-url@5.0.0:
     dependencies: