Writing contentComponents

Schema snippet

View as Markdown

The <SchemaSnippet> component displays type definitions from your API Reference as a JSON code block. Use it on its own to display the JSON representation, or pair it with the <Schema> component to show both the field-by-field breakdown and JSON together.

The component only discovers types referenced by endpoints. Types exclusively used by websockets or webhooks won’t be available. If multiple APIs have the same type name, the component returns the first match.

Usage

The component works with API references already configured in your docs.yml. This example displays the AIChatConfig type as a JSON code block:

The AIChatConfig Object
1{
2  "model": "claude-3.5",
3  "system-prompt": "string"
4}
Markdown
1<SchemaSnippet type="AIChatConfig" title="The AIChatConfig Object" />

Combining with the Schema component

Use <SchemaSnippet> alongside <Schema> to display both the JSON representation and the detailed field breakdown:

The AIChatConfig Object
1{
2  "model": "claude-3.5",
3  "system-prompt": "string"
4}
modelenumOptional
Allowed values:
system-promptstringOptional
This is a system prompt that acts as context given to the LLM for AI chat.
Markdown
1<SchemaSnippet type="AIChatConfig" title="The AIChatConfig Object" />
2
3<Schema type="AIChatConfig" />

Properties

type
stringRequired

The name of the type to display. The component searches for this type across all endpoints in your API definition.

title
string

Optional title displayed above the JSON code block.

className
string

Optional CSS class name for custom styling.