Capability Matrix React component
One grid for what every AI bot can reach: click a cell to set no access, read or change, see risky permissions flagged, and save only what you edited.
About the Capability Matrix component
Capability Matrix puts every bot and every tool on one grid, so nobody has to open each bot's settings to see who can do what. Each circle shows no access, read or change.
Change access on anything sensitive and it turns orange and joins the count at the bottom. Edits are outlined until you save, and undoing a change clears it.
When to use it
Use it for agent permissions, API access reviews and admin panels.
It suits up to about eight columns. Beyond that, group tools first.
Installation
Add the Capability Matrix component to your project with the shadcn CLI. It lands in components/capability-matrix.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/capability-matrixProps
<CapabilityMatrix /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "What each bot can reach" |
| subtitle | string | "Click a circle to change its access." |
| bots | { id: string; name: string; role: string }[] | DEFAULT_BOTS |
| tools | { id: string; name: string; sensitive?: boolean }[] | DEFAULT_TOOLS |
| access Access by bot id, then tool id. Anything left out is none. | Record<string, Record<string, AccessLevel>> | DEFAULT_ACCESS |
| onSave | (access: Record<string, Record<string, AccessLevel>>) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "What each bot can reach"
- subtitlestringDefault: "Click a circle to change its access."
- bots{ id: string; name: string; role: string }[]Default: DEFAULT_BOTS
- tools{ id: string; name: string; sensitive?: boolean }[]Default: DEFAULT_TOOLS
- access
Access by bot id, then tool id. Anything left out is none.
Record<string, Record<string, AccessLevel>>Default: DEFAULT_ACCESS - onSave(access: Record<string, Record<string, AccessLevel>>) => void
Capability Matrix FAQ
- Does Save change real permissions?
- No. onSave gives you the full grid, and your backend applies it.
- What makes a permission risky?
- Change access on a tool you've marked as sensitive.
- Can colour-blind people read it?
- Yes. Levels are empty, half or full, not just coloured.
- Is it a real table?
- Yes. Screen readers get proper row and column headers.
