Architecture: How should Vitto render custom Angular components in chat re...

Documentation for Sessions

🏗️ Architecture: How should Vitto render custom Angular components in chat re...

Date: 2026-03-04
Time: 16:32:54 UTC
Session: gspace1-175.7
Agent: angular
Confidence: 85%
Status: ✅ Documented

📋 Decision Context

Question:

How should Vitto render custom Angular components in chat responses (generative UI) and how should tools be scoped per route?

Task: Session 175: Super Vitto Context Plan — Phase D: Generative UI + Route-Scoped Tools

🎯 Decision Made

Chosen:

Created GenerativeUIComponentCatalog as a whitelist registry following the A2UI (Google) pattern — agent returns JSON referencing component names + props, frontend resolves to actual Angular components. Created VittoRenderComponent that uses ViewContainerRef.createComponent() for dynamic rendering. Added generative-ui segment parsing in message-body.component.ts that splits content into markdown and ```generative-ui blocks. Per-route suggestion chips wired via suggestions.plugin.ts integration with VittoPageContextRegistry. T0-only tools declared in FEATURES_BY_USER_TYPE.

Options Considered:

Whitelist component catalog with A2UI pattern (chosen)
Dynamic HTML injection via innerHTML (rejected — XSS risk)
Custom markdown extensions with component tags
Server-side rendering of UI components as images

💭 Reasoning

The A2UI whitelist pattern ensures security: only pre-registered Angular components can be rendered, no dynamic HTML injection possible. The catalog maps string names to component classes, so the LLM can reference 'skill-preview-card' and the frontend resolves it safely. VittoRenderComponent uses Angular's ViewContainerRef.createComponent() API which is tree-shakeable and type-safe. The ```generative-ui block convention is similar to how code blocks work in markdown — easy for LLMs to generate. Route-scoped tools use VittoPageContextProvider.scopedTools which are declared but not yet enforced at the tool-call level (gap identified).

📁 Files Involved

libs/libs-ai/vitto-chat/src/lib/generative-ui/component-catalog.ts
libs/libs-ai/vitto-chat/src/lib/generative-ui/vitto-render.component.ts
libs/libs-ai/vitto-chat/src/lib/components/message/message-body/message-body.component.ts
libs/libs-ai/vitto-chat/src/lib/components/message/message-body/message-body.component.html
libs/libs-ai/vitto-chat/src/lib/plugins/suggestions.plugin.ts
libs/libs-ai/vitto-chat/src/index.ts

🔗 Related

Decision ID: dev_1772641974291_htoqbjy
Session: 175
Workspace: gspace1

Auto-generated by MCP Smart Consolidation