AI Connectors
AI
Tuner
Block
External data source integration component. Manage connections to databases, APIs, and third-party services that provide context to AI.
Card Variant
Full card with expandable connector details
Data Connectors
2 of 4 connected
PostgreSQL
Production database
Google Docs
Team documentation
REST API
External data source
Slack
Team messaging
Inline Variant
Compact status pills
Sources:
Compact Variant
Toggle switches for quick control
Data Connectors
2/4
PostgreSQL
Google Docs
REST API
Slack
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
connectors* | Connector[] | — | List of available connectors |
variant | 'card' | 'inline' | 'compact' | 'card' | Display variant |
onToggle | (connectorId: string) => void | — | Callback when a connector is toggled |
onSync | (connectorId: string) => void | — | Callback to sync a connector |
onConfigure | (connectorId: string) => void | — | Callback to configure a connector |
title | string | 'Data Connectors' | Title override |
Usage
Import and examples
import { AIConnectors } from '@/blocks/ai-tools/ai-connectors'
<AIConnectors connectors={[ { id: 'db', name: 'PostgreSQL', status: 'connected', icon: Database }, { id: 'api', name: 'REST API', status: 'disconnected', icon: Globe }, ]} onToggle={(id) => handleToggle(id)} onSync={(id) => handleSync(id)}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Four statuses: Connected, disconnected, error, and syncing states
- Expandable details: Data types and last sync time per connector
- Sync control: Manual sync trigger for connected sources
- Custom icons: Per-connector icon support via Lucide
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Status dots paired with text labelsConnect/disconnect buttons have clear labelsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between connectors |
| Enter / Space | Toggle connector or expand details |
Notes
- Color-coded status indicators always paired with text
- Expand/collapse state indicated by chevron direction