API Endpoint List

Fetch pattern JSON: curl https://webspire.de/patterns/code-preview/api-endpoint.json

api-endpoint.html

<div class="ws-code-preview space-y-px overflow-hidden rounded-xl border border-[var(--ws-code-preview-border)]">

  <!-- Endpoint 1: POST -->
  <div class="group bg-[var(--ws-code-preview-header-bg)] transition hover:bg-[var(--ws-code-preview-bg)]">
    <button class="flex w-full items-center gap-4 px-5 py-4 text-left" aria-expanded="false">
      <span class="inline-flex min-w-[52px] items-center justify-center rounded-md bg-emerald-500/15 px-2 py-1 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>
      <span class="ml-auto text-xs text-slate-500">Chat</span>
    </button>
  </div>

  <!-- Endpoint 2: POST (expanded state — inline representation) -->
  <div class="border-t border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-bg)]">
    <div class="flex w-full items-center gap-4 px-5 py-4">
      <span class="inline-flex min-w-[52px] items-center justify-center rounded-md bg-emerald-500/15 px-2 py-1 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/embeddings</span>
      <span class="ml-auto text-xs text-slate-500">Embeddings</span>
    </div>
    <!-- Expanded content -->
    <div class="border-t border-[var(--ws-code-preview-border)] px-5 py-5">
      <p class="text-sm text-slate-400">Create embeddings for text inputs. Useful for semantic search, clustering, and classification tasks.</p>

      <!-- Parameters table -->
      <div class="mt-5 space-y-0 overflow-hidden rounded-lg border border-[var(--ws-code-preview-border)]">
        <div class="grid grid-cols-[1fr_auto_1fr] gap-x-4 border-b border-[var(--ws-code-preview-border)] bg-slate-800/50 px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
          <span>Parameter</span>
          <span>Type</span>
          <span>Description</span>
        </div>
        <div class="grid grid-cols-[1fr_auto_1fr] items-start gap-x-4 border-b border-[var(--ws-code-preview-border)] px-4 py-3">
          <span class="flex items-center gap-2 font-mono text-xs text-[var(--ws-code-preview-text)]">
            model
            <span class="rounded bg-red-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-red-400">required</span>
          </span>
          <span class="rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-mono font-medium text-sky-400">string</span>
          <span class="text-xs text-slate-400">ID of the model to use for embeddings.</span>
        </div>
        <div class="grid grid-cols-[1fr_auto_1fr] items-start gap-x-4 border-b border-[var(--ws-code-preview-border)] px-4 py-3">
          <span class="flex items-center gap-2 font-mono text-xs text-[var(--ws-code-preview-text)]">
            input
            <span class="rounded bg-red-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-red-400">required</span>
          </span>
          <span class="rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-mono font-medium text-sky-400">string | array</span>
          <span class="text-xs text-slate-400">Text or list of texts to embed.</span>
        </div>
        <div class="grid grid-cols-[1fr_auto_1fr] items-start gap-x-4 px-4 py-3">
          <span class="flex items-center gap-2 font-mono text-xs text-slate-500">
            encoding_format
            <span class="rounded bg-slate-700 px-1.5 py-0.5 text-[10px] font-medium text-slate-400">optional</span> <!-- ws-ok -->
          </span>
          <span class="rounded bg-sky-500/15 px-1.5 py-0.5 text-[10px] font-mono font-medium text-sky-400">string</span>
          <span class="text-xs text-slate-400">Default: <code class="rounded bg-slate-700 px-1 font-mono text-[11px] text-slate-300">"float"</code>. Use <code class="rounded bg-slate-700 px-1 font-mono text-[11px] text-slate-300">"base64"</code> for binary.</span> <!-- ws-ok -->
        </div>
      </div>
    </div>
  </div>

  <!-- Endpoint 3: GET -->
  <div class="group border-t border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] transition hover:bg-[var(--ws-code-preview-bg)]">
    <button class="flex w-full items-center gap-4 px-5 py-4 text-left">
      <span class="inline-flex min-w-[52px] items-center justify-center rounded-md bg-sky-500/15 px-2 py-1 text-xs font-bold uppercase tracking-wide text-sky-400">GET</span>
      <span class="font-mono text-sm text-[var(--ws-code-preview-text)]">/v1/models</span>
      <span class="ml-auto text-xs text-slate-500">Models</span>
    </button>
  </div>

  <!-- Endpoint 4: DELETE -->
  <div class="group border-t border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] transition hover:bg-[var(--ws-code-preview-bg)]">
    <button class="flex w-full items-center gap-4 px-5 py-4 text-left">
      <span class="inline-flex min-w-[52px] items-center justify-center rounded-md bg-red-500/15 px-2 py-1 text-xs font-bold uppercase tracking-wide text-red-400">DEL</span>
      <span class="font-mono text-sm text-[var(--ws-code-preview-text)]">/v1/files/{file_id}</span>
      <span class="ml-auto text-xs text-slate-500">Files</span>
    </button>
  </div>

</div>

Details

Family

code-preview

Tier

enhanced

Kind

component

Extends

code-preview/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

apiendpointhttpmethodbadgedocumentationrest

Slots

Name	Required	Description
endpoints	Yes	Endpoint rows with HTTP method badge, URL path, and optional category label.
expanded	No	Inline expanded state showing description and parameter table.

API endpoint list for documentation pages. Each row shows a colored HTTP method badge (POST=emerald, GET=sky, DELETE=red), a monospace URL path, and a category label. One row shows the expanded state with a description and inline parameter table. Uses the same dark theme as other code-preview components.