API reference

Code

<ApiReference  tools={[    {      id: "create_issue",      name: "create_issue",      summary: "Create an issue in a project.",      category: "Issues",      scope: "issues:write",      minRole: "Member",      access: "write",      args: [{ name: "title", type: "string", required: true, description: "Short title." }],      examples: [{ call: '{ "title": "Fix login" }', result: '{ "id": "MH-1" }' }],    },  ]}/>

Developer Tools · beta

Live examples and controls: API reference in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/api-reference.json

A docs page for the things a caller can invoke. A searchable list sits beside the selected tool: its name, scope, minimum role, access level, an arguments table and an example call with its result. A second view shows every tool as a card, grouped by category. It renders the data you pass; generate it from your schema.

When to useCopy Anchor Link

• Documenting an MCP server's tools or a REST API inside your product.

When not to useCopy Anchor Link

• Long prose docs: use a docs layout with markdown.
• Trying calls live: this page only shows examples.

ImportCopy Anchor Link

import { ApiReference } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

<ApiReference
  tools={[
    {
      id: "create_issue",
      name: "create_issue",
      summary: "Create an issue in a project.",
      category: "Issues",
      scope: "issues:write",
      minRole: "Member",
      access: "write",
      args: [{ name: "title", type: "string", required: true, description: "Short title." }],
      examples: [{ call: '{ "title": "Fix login" }', result: '{ "id": "MH-1" }' }],
    },
  ]}
/>

AnatomyCopy Anchor Link

ApiReference                data-slot="api-reference"
├─ toolbar                  search, category chips, access filter, Reference/Catalog switch
├─ list                     tools grouped by category
└─ ApiToolDetail            name, badges, scope, min role, args Table, examples in CodeBlock
ApiToolCatalog              card grid of tools

APICopy Anchor Link

ApiToolDetail takes tool; ApiToolCatalog takes tools and onSelect?. ApiArg is { name, type, required?, description?, default?, values? }; ApiExample is { title?, call, result, callLanguage?, resultLanguage? }.

ExamplesCopy Anchor Link

Catalog firstCopy Anchor Link

<ApiReference tools={tools} defaultView="catalog" />

AccessibilityCopy Anchor Link

• The list is a labelled navigation of buttons with aria-current on the open tool. The switch and filters are named groups.
• Access level is written out (Read, Write, Destructive), not colour alone. Required arguments say "required".
• On small screens the list and detail swap with a Back button; focus moves to the heading.

RTL & i18nCopy Anchor Link

• English and Arabic built in. Tool names, scopes, types, defaults and code stay left-to-right in <bdi dir="ltr">; the code blocks are always left-to-right.
• Search folds Arabic letter variants. Localise category and minRole in your data.

Styling & tokensCopy Anchor Link

• bg-card, border-border, rounded-card; code uses the CodeBlock tokens. No raw hex.
• Target [data-slot=api-reference].

Do / Don'tCopy Anchor Link

• Do give every example both a call and a result.
• Do mark destructive tools so the badge warns before use.
• Don't put secrets in examples.

RelatedCopy Anchor Link

• CodeBlock · Table · Badge

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-developer-tools-api-reference--docs