Agent

Inspects an agent’s model, instructions, tool definitions and output schema in a 4px surface.

Preview

Code reviewer
Instructions
Review the supplied diff and cite relevant files.

In action

Inspect model, instructions and tool schemas

Code reviewerWorkspace model
Instructions
Review 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
path: Object

type: "string"

required: Array (1)

0: "path"

list_files

List files in a directory.

$: Object

type: "object"

properties: Object
directory: Object

type: "string"

Output schema
TypeScript
type 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.

PropTypeDefaultDescription
namerequiredstring
modelstring
instructionsReactNode
toolsAgentToolDefinition[][]
outputSchemaunknown
renderSchema(schema: unknown, context: "input" | "output") => ReactNodeOptional rich/schema renderer. The default safely displays objects or escaped source text.

Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.

The ref reaches HTMLElement.

Keyboard

KeysDoes
TabTab reaches tool disclosures and schema controls.
Enter, SpaceEnter 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

Depends on

BadgeCollapsibleCode blockJson viewer

Use elsewhere

Markdown referenceRegistry JSONSourceAI integration guide
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas