AeontelAeontel Docs

Connectors hooks

React hooks for connectors — list, get, and connect (to spawn an MCP server).

Usage

TSX
import Aeontel from "@aeontel/sdk";
import { AeontelProvider, useListConnectors } from "@aeontel/react";

const client = new Aeontel(import.meta.env.VITE_AEONTEL_API_KEY);

function App() {
  return (
    <AeontelProvider client={client}>
      <ConnectorsList />
    </AeontelProvider>
  );
}

function ConnectorsList() {
  const { data, isLoading } = useListConnectors();
  if (isLoading) return <p>Loading…</p>;
  return (
    <ul>
      {data?.data.map((c) => (
        <li key={c.id}>{c.provider}</li>
      ))}
    </ul>
  );
}

Hooks

useConnectConnector composite

Initiate a connector OAuth flow. Creates a pending MCP server and returns the authorization URL to open in a popup. Auto-invalidates connector and MCP server queries on success.

TypeScript
useConnectConnector(options?: MutationOpts<ConnectConnectorResponse, ConnectConnectorVars>)
TypeScript
const connect = useConnectConnector();
const { authorizationUrl } = await connect.mutateAsync({
  connectorId: "con_system_notion",
  workspace_id: "wsp_abc123",
});
window.open(authorizationUrl, "connector-oauth", "width=600,height=700");

useListConnectors query

Fetch paginated list of available connectors.

TypeScript
useListConnectors(params?: ListConnectorsParams, options?: QueryOpts<PaginatedResponse<Connector>>)

Types: ListConnectorsParams · Connector

TypeScript
const { data } = useListConnectors();

useRetrieveConnector query

Fetch a single connector by ID.

TypeScript
useRetrieveConnector(id: string, options?: QueryOpts<Connector>)

Types: Connector

TypeScript
const { data: connector } = useRetrieveConnector("cnn_abc");