# AccessGrants > Who and what can act for you. Authorized apps and agents per workspace with their scopes and revoke, delegated agent keys, and a matrix of agents by resource with no access, read or read and write. Source: https://docs.nasaqui.com/components/access-grants ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/access-grants.json ``` The other side of `OAuthConsent`: after you approve an app or connect an agent, this is where you see it, narrow it and cut it off. Apps show their scopes; agents also get a row in a matrix where you decide, per resource, whether they can read it or change it. ## When to use - A "Connected apps" or "Agents and access" page of account or workspace settings. ## When not to use - Signing in with Google or GitHub: use `ConnectedAccounts`. - Your own API keys, not delegated to an agent: use `ApiKeys`. ## Import ```tsx import { AccessGrants } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx api.revoke(app.id)} resources={[{ id: "docs", label: "Documents" }, { id: "billing", label: "Billing" }]} grants={grants} onChangeGrant={(agentId, resourceId, level) => api.setGrant(agentId, resourceId, level)} agentKeys={{ keys, scopes, onCreate, onRotate, onRevoke: revokeKey }} /> ``` ## Anatomy ``` AccessGrants data-slot="access-grants" ├─ Alert outcome of the last action ├─ apps data-slot="access-apps": workspace filter, rows with scopes, dates, Revoke ├─ agent keys ApiKeys, data-slot="access-agent-keys" └─ matrix data-slot="access-matrix": agents by resources, a Select per cell ``` ## API | Prop | Type | Description | | --- | --- | --- | | `apps` | `ConnectedApp[]` | `{ id, name, kind: "app" \| "agent", publisher?, logo?, orgId?, scopes, authorizedAt, lastUsedAt? }`. | | `scopeLabels` | `Record` | Friendly scope names. | | `organizations` | `{ id, name }[]` | Adds a workspace filter when there is more than one. | | `onRevoke` | `(app) => Promise` | Adds Revoke, with a confirm dialog. | | `resources`, `grants`, `onChangeGrant` | | The matrix. `grants[agentId][resourceId]` is `"none" \| "read" \| "write"`. Optimistic, rolls back on failure. | | `agentKeys` | subset of `ApiKeysProps` | Renders `ApiKeys` for delegated keys. Omit to hide. | | `sections` | `("apps" \| "keys" \| "grants")[]` | | | `labels` | `AccessGrantsLabels` | English and Arabic built in. | ## Accessibility The matrix is a table; each cell select is named "agent: resource". Access is written out (No access, Read, Read and write), never colour alone. Revoke asks first. ## RTL & i18n Built-in English and Arabic. There are no brand logos: apps show the `logo` URL you pass, or their initials. ## Styling & tokens Built on `SettingsSection`, `ApiKeys`, `Select` and `Badge`. ## Do / Don't - Do enforce grants on the server for every agent call; this screen only edits them. - Do not give an agent write access by default. ## Related - [ApiKeys](https://docs.nasaqui.com/components/api-keys) - [ConnectedAccounts](https://docs.nasaqui.com/components/connected-accounts) - [OAuthConsent](https://docs.nasaqui.com/components/oauth-consent) ## Lab https://docs.nasaqui.com/?path=/docs/components-security-access-grants--docs ## Code ### React ```tsx api.revoke(app.id)} resources={[{ id: "docs", label: "Documents" }, { id: "billing", label: "Billing" }]} grants={grants} onChangeGrant={(agentId, resourceId, level) => api.setGrant(agentId, resourceId, level)} agentKeys={{ keys, scopes, onCreate, onRotate, onRevoke: revokeKey }} /> ``` ### shadcn ```tsx api.revoke(app.id)} resources={[{ id: "docs", label: "Documents" }, { id: "billing", label: "Billing" }]} grants={grants} onChangeGrant={(agentId, resourceId, level) => api.setGrant(agentId, resourceId, level)} agentKeys={{ keys, scopes, onCreate, onRotate, onRevoke: revokeKey }} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $apps = [ ['id' => 'a1', 'name' => 'Notion Sync', 'kind' => 'app', 'publisher' => 'Acme Labs', 'orgId' => 'o1', 'scopes' => ['docs:read', 'users:read'], 'authorizedAt' => '2026-08-01', 'lastUsedAt' => '2026-09-28T10:00:00Z'], ['id' => 'g1', 'name' => 'Support Agent', 'kind' => 'agent', 'publisher' => 'Nasaq', 'orgId' => 'o1', 'scopes' => ['docs:read', 'docs:write', 'billing:read', 'users:read', 'users:write'], 'authorizedAt' => '2026-09-01', 'lastUsedAt' => null], ]; $scopeLabels = ['docs:read' => 'Read documents', 'docs:write' => 'Write documents', 'billing:read' => 'Read billing', 'users:read' => 'Read users', 'users:write' => 'Write users']; $organizations = [['id' => 'o1', 'name' => 'Acme'], ['id' => 'o2', 'name' => 'Globex']]; $resources = [['id' => 'docs', 'label' => 'Documents'], ['id' => 'billing', 'label' => 'Billing']]; $grants = ['g1' => ['docs' => 'write', 'billing' => 'read']]; @endphp ``` ### HTML + Alpine ```html

Authorized apps and agents

Apps and AI agents you have allowed to act on your behalf. Revoking cuts their access at once.
  • NS
    Notion Sync App Read only

    Acme Labs · Acme

    Read documents Read users

    Authorized · Last used

  • SA
    Support Agent Agent

    Nasaq · Acme

    Read documents Write documents Read billing
    +2 more

    Authorized · Last used Never used

What agents can reach

Choose, per agent, which resources it can read and which it can change. Write includes read.
Agent Documents Billing
Support Agent Reads 2, writes 1
```