YouComplete
Review the launch brief. What should we focus on first?
AI components
Conversations, rich responses, tools, voice, and workflows. Built with the same paper, ink, and controls as the rest of Vlak.
Compose an assistant from React components, then connect your model and data. Each piece works on its own or as part of a conversation.
Try the components
Launch brief
Example project
Connect a live model
The assistant reference app connects these components to the AI SDK and OpenAI. It includes saved conversations, attachments, editing, regeneration, tool approvals, and React and iframe widgets.
Open the live assistant or run it locally with your server credentials. The integration guide explains the setup and the boundary between reusable UI and application code.
Explore the components
50 components and patterns
Conversation
- ChatA subtle 1px outline with 4px corners, a named header, scrollable conversation, and a composer anchored below the history.
- ConversationKeeps a scrollable message history at the latest response until the reader scrolls back.
- ResponsePresents user messages in right-aligned soft bubbles and assistant responses on the left, with speaker identity, avatars, status, actions, and a custom layout API.
- Response markdownRenders streaming markdown, tables, code, math, and diagrams with Vlak typography and safe default links.
- Message composerA compact prompt field with bounded growth, media attachments, and composable input controls.
- Response actionsSelectable subtle 44px icon controls for copying, reading aloud, rating through a combined feedback menu, and sharing an assistant response.
- Response branchNavigates saved response alternatives with stable identity, previous and next controls, and a readable position.
- Response editorA multiline message editor that preserves failed drafts and ignores cancelled saves.
- Conversation exportDownloads a Markdown snapshot from explicit message text, attachments, and structured tool results.
- AttachmentsA responsive file list with image, audio, and video previews, file metadata, removal, and application-owned upload states.
- SuggestionsA wrapping or horizontally scrollable collection of prompt buttons with subtle outlines and 4px corners.
- Model selectorSearches a supplied model catalog by name, provider and capabilities, with metadata and controlled selection.
- Context usageA native disclosure of context occupancy, token categories and estimated costs from application-supplied rates or model catalogs.
- CheckpointA conversation marker with an async restore action, retry feedback, and stable cancellation.
Work and sources
- ReasoningA native disclosure for supplied work summaries, with a chevron and 44px control. Panels use a subtle 1px outline and 4px corners.
- Thought stepsA collapsible sequence of work summaries, with step states, source badges, images, and captions.
- PlanA collapsible proposed plan with streaming title treatment, actions, and supporting context.
- TaskA default-open task disclosure with supplied item states and file references.
- Work queueCollapsible prompt and todo sections with completion counts, attachments, and item actions.
- Tool callShows tool input, output, and execution state in a native disclosure with a subtle 1px outline, 4px corners, and a 44px summary.
- ConfirmationCollects approval or rejection in a surface with a subtle 1px outline and 4px corners, with async recording, error recovery, and 44px actions.
- Inline citationA quiet inline source trigger opening a counted, keyboard-navigable preview with links, descriptions and quotes.
- SourcesA counted native disclosure of application-supplied references, descriptions and supporting quotes.
- ShimmerA monochrome moving highlight over progress text, with reduced-motion and forced-color fallbacks.
Widgets
- WidgetA surface with a subtle 1px outline and 4px corners for React content and provider iframes, with attribution, data states, actions, and supporting context.
- Generated imageDisplays a supplied generated-image result with alt text and responsive 4px corners.
- Open in chatExplicit provider links that encode a supplied prompt for ChatGPT, Claude, Cursor, Scira, T3 Chat and v0.
- Widget patternsCompose application data and third-party integrations with the same widget structure and controls.
Code
- Highlighted codeMonochrome syntax highlighting with lazy grammars, exact-source copy and download, and a scrollable code region.
- AgentInspects an agent’s model, instructions, tool definitions and output schema in a 4px surface.
- File treeA keyboard-navigable tree with file icons, custom labels, selection, and expansion.
- ArtifactFrames generated content with header actions, an optional scroll region and a close request.
- SnippetPresents a compact selectable command with a decorative prefix and exact-value copy action.
- CommitShows a commit message, full-hash copy, author and time, with expandable changed files.
- Environment variablesMasks environment values by default, with deliberate reveal, value copy and quoted shell exports.
- Package infoCompares current and proposed package versions with change type and expandable dependencies.
- Schema displayDisplays an endpoint’s method, path, parameters and nested request and response schemas.
- Test resultsDisplays suites, derived pass/fail/skip totals, elapsed time and failure details with optional retries.
- Stack traceParses JavaScript error frames into function names, file locations and internal-frame labels.
- TerminalRenders streamed console output with incremental ANSI attributes and optional original colors.
- SandboxCombines a tool-status disclosure with keyboard-accessible code and output tabs.
- Web previewProvides URL navigation, a sandboxed iframe and a collapsible console of supplied log messages.
- Jsx previewRenders registered components and plain data expressions from streamed JSX through an optional parser.
Voice
- Audio playerNative audio playback for remote files and generated speech, with composable controls, bounded skip seeking, volume, and recoverable errors.
- Mic selectorSearches available microphone inputs with explicit permission activation, device-change updates, and recoverable selection states.
- Speech inputStarts and stops native speech capture, with final text, optional interim results, and application transcription of recorded audio.
- TranscriptionDisplays timestamped speech segments, highlights playback time, and optionally seeks a player through accessible phrase controls.
- Voice selectorSearches application-supplied voice names and metadata, with controlled selection and optional audio preview playback.
- PersonaNative monochrome waveform, fluid orb, and ring visuals with five conversational states, live intensity, and a custom renderer.
Read the component index as Markdown or the AI integration guide for complete compositions and model integration.
Build a conversation
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
import { Chat, MessageComposer, Reasoning, Response, ResponseActions } from "@noorddev/vlak-react";
<Chat title="Project conversation"
composer={<MessageComposer compact maxRows={6} sendOnEnter onSend={sendMessage}
generating={status === "streaming"} onStop={stop} />}>
<Response from="user">Review the launch brief.</Response>
<Response status={status}
actions={status === "complete" ? <ResponseActions text={text} /> : undefined}>
<Reasoning variant="inline" title="Reviewed the launch brief" status="complete">
<p>Checked the supplied scope, owners, and sources.</p>
</Reasoning>
{renderResponse(text)}
</Response>
</Chat>Supply the response content and its status from your application. In this example, renderResponse, sendMessage, stop, text, and status come from your model integration. The compact composer grows from one line to six, outside the scrolling history. Response actions provide copy, narration, feedback, and share controls.
Use the optional Response Markdown renderer for streamed text, highlighted code, math, and diagrams. The integration guide includes a complete composition, an AI SDK recipe, and mappings for response and tool states.
Compose with Vlak
Add Message composer for prompts and attachments, References for citations, and Code block for code. Chat provides the frame and scrolling history used above. Follow the widget patterns for application data and third-party integrations.