Connectors

A connector directory with connect and disconnect states and per-tool permissions: Allow, Ask or Deny for every tool a connector exposes.

Markdown

On this page

Search, filter and connect. Every state: connected, connecting, reconnect needed, failed, available and turned off by an admin.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/connectors.json

Usage

tsx

import { Connectors } from "@/components/ui/chatcn/connectors"

<Connectors
  connectors={connectors}
  onConnect={(id) => startOAuth(id)}
  onDisconnect={(id) => disconnect(id)}
  onReconnect={(id) => startOAuth(id)}
  onPermissionChange={(id, tool, permission) => setPermission(id, tool, permission)}
/>

chatcn ships no provider logos. Pass your own mark through each connector's icon; without one, the first letter of the name stands in, in a quiet neutral frame.

Examples

Tool permissions

ConnectorRow and ToolPermissionControl work on their own, for a custom MCP server page.

A custom MCP server with Allow, Ask or Deny per tool and one control for all.

States

Status	Shows	Action
`available`	Description	Connect
`connecting`	Spinner, Connecting	Connecting, disabled
`connected`	Green dot, Connected, the account	Tools, More menu
`needs-reauth`	Amber triangle, Reconnect needed	Reconnect
`error`	Red circle, Couldn't connect, the reason	Try again
`disabled`	Lock, Off, the admin note	None

Props

Prop	Type	Notes
`connectors`	`Connector[]`	`{ id, name, status, description?, icon?, category?, account?, error?, adminNote?, tools? }`
`onConnect`, `onReconnect`, `onDisconnect`	`(id) => void`	Disconnect confirms inline first
`onPermissionChange`	`(id, tool, permission) => void`	`"allow" \| "ask" \| "deny"`
`onPermissionChangeAll`	`(id, permission) => void`	Falls back to one call per tool
`searchable`, `filterable`	`boolean`	Default true
`defaultExpanded`	`string`	A connector whose tools start open
`action`	`ReactNode`	End of the toolbar, such as Add custom connector

Keyboard

Key	Action
`Esc` in search	Clear the search
Arrow keys in a permission control	Move and select Allow, Ask or Deny
`Esc` in the disconnect confirmation	Cancel and return focus to the menu

Accessibility

Every permission control is a radio group named after its tool. Status is never color alone: each dot or icon sits next to a word.
The status label is a polite live region, so Connecting to Connected is announced. Buttons carry the connector name: Connect Linear, More for GitHub.

Motion

Status swaps with the 150 ms blur crossfade. The tools panel opens with a 200 ms height and opacity transition.
Permission choices swap instantly: people set a dozen in a row.