api parameters table documentation type required optional nested api parameters table type required optional default nested schema documentation API parameter table with type badges request body documentation table required optional parameter display nested object schema table
Data Table API Params
Fetch pattern JSON:
curl https://webspire.de/patterns/data-table/api-params.json api-params.html
<div class="ws-data-table ws-code-preview overflow-hidden rounded-xl border border-[var(--ws-code-preview-border)]">
<!-- Table header -->
<div class="flex items-center justify-between border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-5 py-3">
<div class="flex items-center gap-3">
<span class="inline-flex items-center rounded-md bg-emerald-500/15 px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-emerald-400">POST</span>
<span class="font-mono text-sm text-[var(--ws-code-preview-text)]">/v1/chat/completions</span>
</div>
<span class="text-xs text-slate-500">Request body</span>
</div>
<div class="bg-[var(--ws-code-preview-bg)]">
<!-- Column headers -->
<div class="grid grid-cols-[180px_140px_1fr] gap-x-4 border-b border-[var(--ws-code-preview-border)] bg-slate-800/50 px-5 py-2.5">
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Parameter</span>
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Type</span>
<span class="text-[11px] font-semibold uppercase tracking-wider text-slate-500">Description</span>
</div>
<!-- Row: model (required) -->
<div class="grid grid-cols-[180px_140px_1fr] items-start gap-x-4 border-b border-[var(--ws-code-preview-border)] px-5 py-3.5">
<div class="flex flex-wrap items-center gap-1.5">
<code class="font-mono text-xs font-medium text-[var(--ws-code-preview-text)]">model</code>
<span class="rounded bg-red-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-red-400">required</span>
</div>
<code class="rounded bg-sky-500/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-sky-400 self-start">string</code>
<span class="text-xs leading-relaxed text-slate-400">ID of the model to use. See available <a href="#" class="text-sky-400 hover:underline">models</a>.</span>
</div>
<!-- Row: messages (required) -->
<div class="grid grid-cols-[180px_140px_1fr] items-start gap-x-4 border-b border-[var(--ws-code-preview-border)] px-5 py-3.5">
<div class="flex flex-wrap items-center gap-1.5">
<code class="font-mono text-xs font-medium text-[var(--ws-code-preview-text)]">messages</code>
<span class="rounded bg-red-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-red-400">required</span>
</div>
<code class="rounded bg-sky-500/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-sky-400 self-start">array</code>
<div>
<p class="text-xs leading-relaxed text-slate-400">List of messages comprising the conversation. Each object must have <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">role</code> and <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">content</code>.</p>
<!-- Nested object -->
<div class="mt-2.5 overflow-hidden rounded-lg border border-slate-700">
<div class="border-b border-slate-700 bg-slate-800/60 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500">messages[ ] object</div>
<div class="divide-y divide-slate-700">
<div class="flex items-start gap-4 px-3 py-2">
<code class="w-24 shrink-0 font-mono text-[11px] text-slate-300">role</code>
<code class="shrink-0 rounded bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-mono text-sky-400">string</code>
<span class="text-[11px] text-slate-500"><code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-slate-400">"user"</code> · <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-slate-400">"assistant"</code> · <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-slate-400">"system"</code></span>
</div>
<div class="flex items-start gap-4 px-3 py-2">
<code class="w-24 shrink-0 font-mono text-[11px] text-slate-300">content</code>
<code class="shrink-0 rounded bg-sky-500/10 px-1.5 py-0.5 text-[10px] font-mono text-sky-400">string</code>
<span class="text-[11px] text-slate-500">The message text content.</span>
</div>
</div>
</div>
</div>
</div>
<!-- Row: temperature (optional) -->
<div class="grid grid-cols-[180px_140px_1fr] items-start gap-x-4 border-b border-[var(--ws-code-preview-border)] px-5 py-3.5">
<div class="flex flex-wrap items-center gap-1.5">
<code class="font-mono text-xs font-medium text-slate-500">temperature</code>
<span class="rounded bg-[var(--ws-code-preview-header-bg)] px-1.5 py-0.5 text-[10px] font-medium text-slate-400">optional</span>
</div>
<code class="rounded bg-sky-500/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-sky-400 self-start">number</code>
<div>
<p class="text-xs leading-relaxed text-slate-400">Sampling temperature between 0 and 1. Higher values produce more random output.</p>
<p class="mt-1 text-xs text-slate-500">Default: <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">0.7</code> · Range: <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">0 – 1</code></p>
</div>
</div>
<!-- Row: max_tokens (optional) -->
<div class="grid grid-cols-[180px_140px_1fr] items-start gap-x-4 border-b border-[var(--ws-code-preview-border)] px-5 py-3.5">
<div class="flex flex-wrap items-center gap-1.5">
<code class="font-mono text-xs font-medium text-slate-500">max_tokens</code>
<span class="rounded bg-[var(--ws-code-preview-header-bg)] px-1.5 py-0.5 text-[10px] font-medium text-slate-400">optional</span>
</div>
<code class="rounded bg-sky-500/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-sky-400 self-start">integer | null</code>
<div>
<p class="text-xs leading-relaxed text-slate-400">Maximum number of tokens to generate. <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">null</code> uses the model's maximum.</p>
<p class="mt-1 text-xs text-slate-500">Default: <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">null</code></p>
</div>
</div>
<!-- Row: stream (optional) -->
<div class="grid grid-cols-[180px_140px_1fr] items-start gap-x-4 px-5 py-3.5">
<div class="flex flex-wrap items-center gap-1.5">
<code class="font-mono text-xs font-medium text-slate-500">stream</code>
<span class="rounded bg-[var(--ws-code-preview-header-bg)] px-1.5 py-0.5 text-[10px] font-medium text-slate-400">optional</span>
</div>
<code class="rounded bg-sky-500/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-sky-400 self-start">boolean</code>
<div>
<p class="text-xs leading-relaxed text-slate-400">If <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">true</code>, streams partial message deltas via SSE events.</p>
<p class="mt-1 text-xs text-slate-500">Default: <code class="rounded bg-[var(--ws-code-preview-header-bg)] px-1 font-mono text-[11px] text-slate-300">false</code></p>
</div>
</div>
</div>
</div>
Details
Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
apiparameterstabledocumentationtyperequiredoptionalnested
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Table header with endpoint method badge, path, and section label. |
| rows | Yes | Parameter rows with name, required/optional badge, type badge, description, and defaults. |
| nested | No | Inline nested object schema for array or object parameters. |
API parameter documentation table styled in the dark code-preview theme. Columns: parameter name (monospace), type badge (sky, string | integer | null | array), description with defaults and ranges. Required parameters show a red badge; optional ones show a slate badge. Array parameters include an inline nested object table. Used together with code-preview/api-endpoint and code-preview/language-switcher.