# API reference > A reference page for API endpoints or MCP tools with scope, minimum role, an arguments table, an example call and result, and a card catalog of all tools. Source: https://docs.nasaqui.com/components/api-reference ## Install ```bash 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 use - Documenting an MCP server's tools or a REST API inside your product. ## When not to use - Long prose docs: use a docs layout with markdown. - Trying calls live: this page only shows examples. ## Import ```tsx import { ApiReference } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx ``` ## Anatomy ``` 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 ``` ## API | Prop | Type | Default | Description | | --- | --- | --- | --- | | `tools` | `ApiTool[]` | required | `{ id, name, summary, description?, category?, scope, minRole, access?, args?, returns?, examples?, deprecated?, since? }`. | | `selectedId?` / `onSelectedChange?` | `string` / `(id) => void` | first tool | Controlled selection. | | `view?` / `defaultView?` / `onViewChange?` | `"reference" \| "catalog"` | `"reference"` | Which view shows. | | `labels?` | `Partial` | en/ar | Override any string. | `ApiToolDetail` takes `tool`; `ApiToolCatalog` takes `tools` and `onSelect?`. `ApiArg` is `{ name, type, required?, description?, default?, values? }`; `ApiExample` is `{ title?, call, result, callLanguage?, resultLanguage? }`. ## Examples ### Catalog first ```tsx ``` ## Accessibility - 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 & i18n - English and Arabic built in. Tool names, scopes, types, defaults and code stay left-to-right in ``; the code blocks are always left-to-right. - Search folds Arabic letter variants. Localise `category` and `minRole` in your data. ## Styling & tokens - `bg-card`, `border-border`, `rounded-card`; code uses the `CodeBlock` tokens. No raw hex. - Target `[data-slot=api-reference]`. ## Do / Don't - **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. ## Related - [CodeBlock](https://docs.nasaqui.com/components/code-block) · [Table](https://docs.nasaqui.com/components/table) · [Badge](https://docs.nasaqui.com/components/badge) ## Lab https://docs.nasaqui.com/?path=/docs/components-developer-tools-api-reference--docs ## Code ### React ```tsx ``` ### shadcn ```tsx ``` ### Vue ```vue ``` ### Blade ```blade @php $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" }']], ], [ 'id' => 'list_issues', 'name' => 'list_issues', 'summary' => 'List issues in a project.', 'category' => 'Issues', 'scope' => 'issues:read', 'minRole' => 'Viewer', 'args' => [['name' => 'limit', 'type' => 'integer', 'default' => '20', 'description' => 'How many to return.']], 'examples' => [['call' => '{ "limit": 2 }', 'result' => '{ "items": [] }']], ], [ 'id' => 'delete_project', 'name' => 'delete_project', 'summary' => 'Delete a project and everything in it.', 'category' => 'Projects', 'scope' => 'projects:admin', 'minRole' => 'Owner', 'access' => 'destructive', ], ]; @endphp ``` ### HTML + Alpine ```html

create_issue

Create an issue in a project.

Scope
issues:write
Minimum role
Member
Access
Changes data

Arguments

Name Type Description
title Required
string

Short title.

Example

Call 
{ "title": "Fix login" }
Result 
{ "id": "MH-1" }
```