Schema Display for Radix UI

An endpoint on one card: its method and path, what it does, its parameters, and the fields it takes and returns.

Use it to document the HTTP API behind a tool, a webhook your agent receives, or an endpoint it is about to call. Each {param} in the path is highlighted, and an object or array field opens into its own fields. To show a call that already ran, with its input and output, use Tool. In React, Radix UI runs each section as a collapsible, so the parts open from the keyboard.

Installation

The install adds Badge for the method and the field types, and Collapsible for the sections that open.

Anatomy

SchemaDisplay
├── SchemaDisplayHeader
│   ├── SchemaDisplayMethod
│   └── SchemaDisplayPath
├── SchemaDisplayDescription
├── SchemaDisplayContent
│   ├── SchemaDisplayParameters
│   │   └── SchemaDisplayParameter (one per parameter)
│   ├── SchemaDisplayRequest
│   │   └── SchemaDisplayBody
│   │       └── SchemaDisplayProperty (opens when it has fields)
│   └── SchemaDisplayResponse
│       └── SchemaDisplayBody
│           └── SchemaDisplayProperty
└── SchemaDisplayExample

With no children, SchemaDisplay renders the header, the description and a section for each list it was given. Pass children to lay the parts out yourself: they read the method, the path and the lists from the root.

Usage

import { SchemaDisplay } from "@/components/ui/schema-display";

<SchemaDisplay
  description="Send a message to a specific user"
  method="POST"
  parameters={[
    { location: "path", name: "userId", required: true, type: "string" },
  ]}
  path="/api/users/{userId}/messages"
  requestBody={[{ name: "content", required: true, type: "string" }]}
  responseBody={[{ name: "id", type: "string" }]}
/>

Accessibility

• Each section and each field with fields of its own is a button with aria-expanded. A field's description sits outside its button, so the button's name stays short.
• The method is written out, not only colored, and required is a word, so neither relies on color.
• Paths, field names, types and the example always read left to right. The card follows the page direction, and the chevrons point the reading way.
• The example scrolls inside its block and can take focus. Give it an aria-label, such as Example response.

Demos

Nested

An order with a customer, an address inside the customer, and a list of items. A field with properties opens into them, and a field with items opens into one entry named after it with []. The first two levels start open and deeper ones start closed, so a large body still fits on screen. Each level steps in by 1rem.

Methods

Five endpoints of one resource, one per method, each a header with its description on the end. GET is green, POST blue, PUT and PATCH amber and DELETE red, from Badge's status variants, so they follow your theme. A card with only a header is an index: link each row to its full card. Give the method a fixed width so the paths line up.

Composed

The parts laid out by hand: Parameters starts closed with its count in view, there is no request body, and an example response sits under the fields. SchemaDisplayExample is a pre for any text. Compose the parts when the default order doesn't fit, or to add something of your own between them.

From JSON Schema

A tool's input is JSON Schema, and so is an OpenAPI body. Turn its properties into the fields Schema Display takes, and show the tool's input as a request body:

type JsonSchema = {
  description?: string;
  items?: JsonSchema;
  properties?: Record<string, JsonSchema>;
  required?: string[];
  type?: string;
};

const toProperties = (schema: JsonSchema): SchemaProperty[] =>
  Object.entries(schema.properties ?? {}).map(([name, field]) => ({
    description: field.description,
    items: field.items
      ? {
          name: "item",
          properties: field.items.properties
            ? toProperties(field.items)
            : undefined,
          type: field.items.type ?? "unknown",
        }
      : undefined,
    name,
    properties: field.properties ? toProperties(field) : undefined,
    required: schema.required?.includes(name),
    type: field.type ?? "unknown",
  }));

SchemaProperty and SchemaParameter are exported from the schema display file.

Migrating from AI SDK Elements

If you added Schema Display from AI SDK Elements (opens in a new tab), your project has components/ai-elements/schema-display.tsx. Install Schema Display from this page, change the imports from @/components/ai-elements/schema-display to @/components/ui/schema-display, and delete the old file. The parts keep their names and props. What changes:

• SchemaDisplayPath renders {params} as elements, without dangerouslySetInnerHTML. Children passed to it render as they are, never as HTML.
• The method colors are Badge's success, info, warning and destructive variants instead of fixed green, blue, orange and red, so they follow your theme.
• SchemaDisplayRequest and SchemaDisplayResponse put a rule between fields, as nested fields already had.

FAQ

API Reference