Preview
InstructionsReview the supplied diff. Explain material issues and cite the relevant file.
Tools (2)read_file
Read a file from the selected workspace.
$: Object
type: "object"
properties: Object
required: Array (1)
list_files
List files in a directory.
$: Object
type: "object"
properties: Object
Output schematype Review = {
summary: string;
findings: { file: string; line: number }[];
}
In action
Inspect model, instructions and tool schemas
InstructionsReview the supplied diff. Explain material issues and cite the relevant file.
Tools (2)read_file
Read a file from the selected workspace.
$: Object
type: "object"
properties: Object
required: Array (1)
list_files
List files in a directory.
$: Object
type: "object"
properties: Object
Output schematype Review = {
summary: string;
findings: { file: string; line: number }[];
}
When to use
Use it for
- Inspect supplied model configuration, instructions and named tools before starting work.
- Use renderSchema to supply a syntax renderer; objects use the bounded JsonViewer by default and strings use CodeBlock.
Avoid
- Executing tool definitions or treating displayed instructions as authorization.
- Assuming this component calls a model or highlights source without a supplied renderer.
Install
React package
npm install @noorddev/vlak-react
Load the stylesheet once at your app root, then import the components you use.
import "@noorddev/vlak-react/css";
import { Agent } from "@noorddev/vlak-react";Per-component imports are available at @noorddev/vlak-react/components/agent.
Copy the source
npx @noorddev/vlak-cli add agent
Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.
shadcn registry
npx shadcn add https://vlak.dev/r/agent.json
Installs the same source through the shadcn CLI.
React
import { Agent } from "@noorddev/vlak-react";
<Agent name="Code reviewer" model="Workspace model" instructions="Review the supplied diff." tools={[{ name: "read_file", inputSchema: { type: "object", properties: { path: { type: "string" } } } }]} outputSchema="type Review = { summary: string }" />See the integration example to compose these components with your application's model and data.
Props
Agent
Inspect agent configuration without instantiating tools or executing instructions.
| Prop | Type | Default | Description |
|---|
namerequired | string | | |
model | string | | |
instructions | ReactNode | | |
tools | AgentToolDefinition[] | [] | |
outputSchema | unknown | | |
renderSchema | (schema: unknown, context: "input" | "output") => ReactNode | | Optional rich/schema renderer. The default safely displays objects or escaped source text. |
Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.
The ref reaches HTMLElement.
Keyboard
| Keys | Does |
|---|
| Tab | Tab reaches tool disclosures and schema controls. |
| Enter, Space | Enter or Space on a summary expands or collapses a tool schema. |
Accessibility
- An article has an accessible agent name; model and tool identities are visible text.
- Native tool disclosures provide keyboard access. The default object viewer does not invoke getters.
- Instructions accept React content; applications configure any Markdown renderer they supply.
Markup
The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.
npm install @noorddev/vlak
import "@noorddev/vlak/css";
<article class="rs-agent" aria-label="Agent Code reviewer"><header class="rs-agent-header"><span class="rs-agent-title">Code reviewer</span></header><div class="rs-agent-content"><div class="rs-agent-section"><span class="rs-agent-label">Instructions</span><div class="rs-agent-instructions">Review the supplied diff and cite relevant files.</div></div></div></article>
Classes
.rs-agent.rs-agent-header.rs-agent-title.rs-agent-content.rs-agent-section.rs-agent-label.rs-agent-instructions.rs-agent-description