/** * Generative UI — typed JSON the agent emits that downstream * renderers turn into real components. The schema is intentionally * framework-agnostic (React, Vue, Svelte, RN all render the same * tree) and keeps the element set small so model outputs stay * predictable. * * Paired with artifacts (code blocks, charts, markdown, HTML) so a * single `UIMessage` can mix declarative UI + rich content. */ interface UIElementText { kind: 'text'; text: string; weight?: 'normal' | 'bold'; } interface UIElementHeading { kind: 'heading'; level: 1 | 2 | 3; text: string; } interface UIElementList { kind: 'list'; ordered?: boolean; items: string[]; } interface UIElementButton { kind: 'button'; label: string; action: string; payload?: Record; variant?: 'primary' | 'secondary' | 'danger'; } interface UIElementImage { kind: 'image'; src: string; alt?: string; } interface UIElementCard { kind: 'card'; title?: string; children: UIElement[]; } interface UIElementStack { kind: 'stack'; direction?: 'row' | 'column'; children: UIElement[]; } interface UIElementArtifact { kind: 'artifact'; artifact: Artifact; } type UIElement = UIElementText | UIElementHeading | UIElementList | UIElementButton | UIElementImage | UIElementCard | UIElementStack | UIElementArtifact; interface ArtifactCode { type: 'code'; language: string; source: string; filename?: string; } interface ArtifactMarkdown { type: 'markdown'; source: string; } interface ArtifactHtml { type: 'html'; source: string; /** Sandbox policy hint for the renderer (iframe sandbox attrs). */ sandbox?: string; } interface ArtifactChart { type: 'chart'; chartType: 'line' | 'bar' | 'pie' | 'scatter' | 'area'; data: Array>; x?: string; y?: string | string[]; title?: string; } type Artifact = ArtifactCode | ArtifactMarkdown | ArtifactHtml | ArtifactChart; interface UIMessage { version: 1; root: UIElement; } declare function validateArtifact(raw: unknown): Artifact; declare function validateElement(raw: unknown): UIElement; declare function validateUIMessage(raw: unknown): UIMessage; /** * Parse text that may contain a fenced JSON block (```json ... ```), * or a raw JSON object, into a `UIMessage`. Useful when agents emit * prose + UI side-by-side. */ declare function parseUIMessage(input: string): UIMessage; interface DetectedArtifact { artifact: Artifact; /** Offsets in the source where the fence started / ended. */ start: number; end: number; } /** * Scan a string for fenced code blocks and return them as `code` * artifacts. HTML / markdown / chart artifacts are left to the * agent to emit explicitly via `UIMessage`. */ declare function detectCodeArtifacts(input: string): DetectedArtifact[]; export { type Artifact, type ArtifactChart, type ArtifactCode, type ArtifactHtml, type ArtifactMarkdown, type DetectedArtifact, type UIElement, type UIElementArtifact, type UIElementButton, type UIElementCard, type UIElementHeading, type UIElementImage, type UIElementList, type UIElementStack, type UIElementText, type UIMessage, detectCodeArtifacts, parseUIMessage, validateArtifact, validateElement, validateUIMessage };