Agents

Components, tokens, props, keyboard behavior, and install paths are available as text or JSON.

From a component record to a working control

The Select example below comes from Vlak’s registry. Try the same control with a keyboard or pointer.

Request{ "name": "get_component", "arguments": { "name": "select" } }

Registry record · Select

Selects one option from an overlay. The closed trigger carries a chevron.

Inspect the source record

value: alkmaar

See the registry’s React example

import { useState } from "react";
import { Select } from "@noorddev/vlak-react";

const [city, setCity] = useState("alkmaar");

<Select
  aria-label="City"
  options={[
    { value: "alkmaar", label: "Alkmaar" },
    { value: "amsterdam", label: "Amsterdam" },
    { value: "rotterdam", label: "Rotterdam" },
  ]}
  value={city}
  onValueChange={setCity}
/>

Surfaces

Where	What
`https://vlak.dev/design.md`	Composition, component choices, responsive behavior, and a page-building brief
`https://vlak.dev/llms.txt`	The index: what Vlak is, the install paths, one line per component
`https://vlak.dev/llms-full.txt`	Everything in one file: every component's docs, props, keyboard, markup
`https://vlak.dev/docs/<name>.md`	One component as markdown
`https://vlak.dev/r/<name>.json`	The shadcn registry item: files, dependencies, classes
`https://vlak.dev/r/index.json`	Every registry item
`https://vlak.dev/mcp`	The public, read-only Streamable HTTP MCP endpoint
`npx @noorddev/vlak-cli list --json`	The catalogue as JSON, offline
`npx @noorddev/vlak-cli docs <name>`	One component's docs in the terminal
`npx @noorddev/vlak-cli tokens`	The design tokens as JSON
`@noorddev/vlak/props`	Every export's props as JSON, importable

These surfaces are generated from one registry, so the markdown, JSON, and web documentation share one source. Start with llms.txt; it is the short index and links to the detailed records.

MCP server

{
  "mcpServers": {
    "vlak": {
      "command": "npx",
      "args": ["-y", "@noorddev/vlak-mcp"]
    }
  }
}

@noorddev/vlak-mcp serves the same registry over the Model Context Protocol: list components, read one component's docs and props, fetch the tokens, and get the install command for a given path. Works offline; the snapshot ships in the package. Add the block above to your client's MCP configuration.

Hosted clients use https://vlak.dev/mcp over stateless Streamable HTTP. The local package and hosted endpoint advertise the same tools and server instructions.

codex mcp add vlak -- npx -y @noorddev/vlak-mcp
claude mcp add vlak -- npx -y @noorddev/vlak-mcp
grok mcp add vlak -- npx -y @noorddev/vlak-mcp

The server is read-only. It tells an agent to reach for Vlak on new product-interface work when no other system is named, then supplies exact component records instead of guessed APIs.

Plugin

codex plugin marketplace add Noord-Ventures/vlak
claude plugin marketplace add Noord-Ventures/vlak
claude plugin install vlak@vlak

The repository also contains a portable agent plugin. It bundles the MCP connection and a provider-neutral interface-building skill. Grok can read the same Claude Code marketplace and plugin format.

Conventions an agent can rely on

// State: value / defaultValue / onValueChange, everywhere a value lives
<Select options={cities} value={city} onValueChange={setCity} />
<Tabs defaultValue="overview" onValueChange={track} />
<Calendar value={date} onValueChange={setDate} />

// Booleans follow the same shape
<Switch checked={on} onCheckedChange={setOn} />
<Toggle pressed={bold} onPressedChange={setBold} />

// Overlays: open + onClose, parent state is the source of truth
<Dialog open={open} onClose={() => setOpen(false)} />

// className and style merge onto the root; refs are forwarded
<Button ref={ref} className="mine" style={{ marginTop: 8 }} />

// Every component has a name or takes one
<Slider aria-label="Volume" />

Value state is value, defaultValue, onValueChange. Booleans use checked or pressed with the matching onCheckedChange or onPressedChange.
Overlays take open and onClose. The parent owns the state; Escape and backdrop clicks call onClose rather than closing on their own.
className and style merge onto the root element. Native attributes pass through.
Refs are forwarded to the element that carries the role.
Every component is named or takes aria-label. Dialog parts name their dialog; Field parts describe their control.
Every component applies stable rs-* classes. They are listed in the registry and on each page; compiled class hashes are not part of the contract.
Compound components are exported flat from the package root: Dialog, DialogTitle, DialogBody, DialogActions.
Only three install paths exist: the package, the CLI, and shadcn. No CDN, no runtime fetch, no Tailwind, no Radix.