Skip to content
Fabrials UI
Agents / MCP

Connection panel

An endpoint, an auth method, and a clear connection state.

Registry
Loading state

Server connection

disconnected

Direct connections stay in your browser. The endpoint must allow CORS. Use the optional server connector for private credentials.

Installation

  1. Add the registry entry to your app.

    npx shadcn@latest add @fabrials/connection-panel

    Without the named registry, use the address: https://ui.fabrials.com/r/connection-panel.json

API reference

Prop / exportTypeDescription
statusstringConnection lifecycle state.
onConnect(ConnectionOptions) => Promise<void>Connect with the selected method.
onDisconnect() => Promise<void>Release the connection.
defaultEndpointstring?Initial endpoint URL.

Behavior

Bearer tokens stay in memory. OAuth requires callback and client metadata routes; see the authentication guide. CORS is controlled by the destination server.

Accessibility

Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.