Connector Card

The connector directory pattern: each integration is a raised key with its OAuth state, a Connect/Reconnect action, the per-conversation enable switch once connected, and discovered tools one disclosure away.

GitHub

Connected

Slack

Connected

Notion

Needs re-authentication

Google Calendar

Not connected

tsx

"use client"

import * as React from "react"
import { Calendar, FileText, GitBranch, MessageSquare } from "lucide-react"

import {
  ConnectorCard,
  ConnectorList,
  type ConnectorState,
} from "@/registry/seam/ui/connector-card"

type Connector = {
  id: string
  name: string
  icon: React.ReactNode
  connection: ConnectorState
  enabled: boolean
}

const INITIAL: Connector[] = [
  {
    id: "github",
    name: "GitHub",
    icon: <GitBranch />,
    connection: "connected",
    enabled: true,
  },
  {
    id: "slack",
    name: "Slack",
    icon: <MessageSquare />,
    connection: "connected",
    enabled: false,
  },
  {
    id: "notion",
    name: "Notion",
    icon: <FileText />,
    connection: "needs-auth",
    enabled: false,
  },
  {
    id: "calendar",
    name: "Google Calendar",
    icon: <Calendar />,
    connection: "disconnected",
    enabled: false,
  },
]

export default function ConnectorListDemo() {
  const [connectors, setConnectors] = React.useState(INITIAL)

  const update = (id: string, patch: Partial<Connector>) =>
    setConnectors((cs) => cs.map((c) => (c.id === id ? { ...c, ...patch } : c)))

  return (
    <ConnectorList>
      {connectors.map((c) => (
        <ConnectorCard
          key={c.id}
          name={c.name}
          icon={c.icon}
          connection={c.connection}
          enabled={c.enabled}
          onEnabledChange={(enabled) => update(c.id, { enabled })}
          onConnect={() =>
            update(c.id, { connection: "connected", enabled: true })
          }
          onDisconnect={() =>
            update(c.id, { connection: "disconnected", enabled: false })
          }
        />
      ))}
    </ConnectorList>
  )
}

bunx --bun @seamui/cli@latest add connector-card

Notes

Controlled and runtime-agnostic: connection (connected / disconnected / needs-auth / error) and enabled in; onConnect / onDisconnect / onEnabledChange out. Wire them to your OAuth flow and MCP client.
The card is a raised key; the icon sits in a carved-in well on it; the switch (labeled “Use in this conversation”) and Connect key are foundation controls. needs-auth and error status text takes the one sanctioned hue.
The tools disclosure reuses the composite-safe collapsible trigger; tool names render as debossed mono chips. Each card announces as a labeled group (“GitHub: Needs re-authentication”).

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.