Vitruvyan Docs
Web UI Contracts — TypeScript Interface Documentation
Last updated: Feb 20, 2026 21:20 UTC
Location:ui/contracts/
Purpose: Canonical payload structure + adapter system + domain plugin interfaces
Overview
The Vitruvyan Web UI contract system defines 3 core TypeScript interfaces that enforce separation of concerns between backend, adapters, and UI:
| Contract | Purpose | File |
|---|---|---|
| UIContract | Canonical payload consumed by renderer | UIContract.ts (195 LOC) |
| AdapterContract | Backend state → UI transformation | AdapterContract.ts (260 LOC) |
| DomainPluginContract | Domain extension mechanism | DomainPluginContract.ts (274 LOC) |
Total: 820 lines of TypeScript
1. UIContract — Canonical Payload Structure
Purpose
Defines the single source of truth for all UI payloads consumed by VitruvyanResponseRenderer.
File
ui/contracts/UIContract.ts (195 lines)
Core Interface: UIResponsePayload
Sub-Interfaces
NarrativeBlock
High-level summary with optional VEE annotation.
Example:
FollowUpChips
Interactive follow-up suggestion chips.
Example:
EvidenceSection
Collapsible accordion with metric cards.
Example:
VEEExplanations
Three-level explainability registry.
Example:
ContextMetadata
Additional context for the response.
Example:
Exported Types
2. AdapterContract — Transformation Interface
Purpose
Defines the adapter interface that transforms backend LangGraphFinalState into UIResponsePayload.
File
ui/contracts/AdapterContract.ts (260 lines)
Core Abstract Class: BaseAdapter
Adapter Registry Interface
Implementation: AdapterRegistryImpl
Usage Example
3. DomainPluginContract — Extension Mechanism
Purpose
Enables domain-specific extensions (adapters, VEE content, hooks, theme overrides) without modifying core UI code.
File
ui/contracts/DomainPluginContract.ts (274 lines)
Core Interface: DomainPlugin
Domain Plugin Registry Interface
Implementation: DomainPluginRegistryImpl
Usage Example: Finance Plugin
Contract Enforcement
Type Safety
All contracts are TypeScript interfaces enforced at compile time:
Runtime Validation
Use type guards for runtime validation:
Export Index
All contracts exported via ui/contracts/index.ts:
Contract Versioning
Contracts follow semantic versioning:
- Major (1.0.0 → 2.0.0): Breaking changes (field removal/rename)
- Minor (1.0.0 → 1.1.0): New fields (backward compatible)
- Patch (1.0.0 → 1.0.1): Documentation/fixes (no interface changes)
Current version: 1.0.0 (initial release, Feb 2026)
Migration Guide
From Legacy to Contracts (Pre-Feb 2026 → v1.0.0)
| Legacy Pattern | New Contract Pattern |
|---|---|
Component reads state.summary | Adapter produces narrative: { text: state.summary } |
| Component calculates metrics | Adapter populates evidence: [{ cards: [...] }] |
| Hardcoded VEE in component | Adapter provides vee_explanations: { ... } |
| Intent-based rendering | Adapter registry selects adapter by match() |
References
- UI Philosophy — Constitutional principles enforcing contracts
- Stack — TypeScript configuration for contract enforcement
- UI Overview — Contract usage in UI architecture
- UIContract.ts — Source code
- AdapterContract.ts — Source code
- DomainPluginContract.ts — Source code
Last updated: Feb 20, 2026 21:20 UTC