AI

AI interface components ported from Vercel AI Elements onto nx-ui — chat, reasoning, tools, citations and an agent-workflow canvas. Every surface is purely presentational and runs on canned data, so nothing here needs a backend.

Artifact

A side-panel wrapper for a generated artifact, with title, actions and close control.

Chain of Thought

A collapsible step-by-step chain-of-thought trace with search results and images.

Chat

A full chat surface — conversation, streamed messages, reasoning, tools, sources, suggestions and composer — assembled from the AI primitives.

Checkpoint

A restore-checkpoint divider shown between conversation turns.

Code Block

A Shiki-highlighted code block with light and dark rendering and a copy button.

Confirmation

A human-in-the-loop approve or reject card for a pending tool call.

Context

A token-usage and context-window meter with a hover breakdown of input, output and cost.

Conversation

A scroll container that sticks to the bottom while streaming, with a scroll-to-bottom control.

Image

Renders an AI-generated image from a base64 or URL file part.

Inline Citation

Inline citation badges with a hover-card carousel of source cards and quotes.

Loader

An animated multi-dot loading indicator for pending AI responses.

Message

Renders a single message within a conversational or chat layout.

Model Selector

A command-palette model picker with provider logos and keyboard shortcuts.

Open in Chat

A dropdown that deep-links the current prompt into external chat apps.

Plan

A collapsible multi-step plan card with per-step status and actions.

Prompt Input

A full chat composer: auto-growing textarea, model select, tools, attachments and speech input.

Queue

A sectioned, collapsible list of queued user turns with attachments and todos.

Reasoning

A collapsible reasoning panel that auto-opens while thinking and tracks duration.

Shimmer

A text shimmer sweep, used for pending or thinking states.

Sources

A collapsible list of cited sources shown beneath an answer.

Task

A collapsible task and subtask list with file chips for agent activity.

Tool

Renders a single tool invocation with header, collapsible input and output.

Web Preview

An embedded iframe live preview with a URL bar, navigation and console panel.

Workflow

An agent-workflow canvas built on React Flow, with custom nodes, edges, controls and a toolbar.

Search nx-ui

AI