Back to Copilotkit

useCapabilities

showcase/shell-docs/src/content/reference/react-native/hooks/useCapabilities.mdx

1.60.25.5 KB
Original Source

Overview

useCapabilities returns the AG-UI AgentCapabilities declared by an agent. Capabilities describe what an agent supports: tool calling, streaming, multi-agent coordination, human-in-the-loop, and more.

<Callout type="info"> Re-exported from `@copilotkit/react-core/v2`. It is identical to the [React (V2) `useCapabilities`](/reference/v2/hooks/useCapabilities); only the import path differs. </Callout>

Capabilities are populated from the runtime /info response at connection time. The value is undefined until the runtime handshake completes or if the agent doesn't declare capabilities.

Signature

tsx
import { useCapabilities } from "@copilotkit/react-native";

function useCapabilities(agentId?: string): AgentCapabilities | undefined

Parameters

<PropertyReference name="agentId" type="string" default='"default"'> ID of the agent whose capabilities to read. If omitted, uses the default agent. </PropertyReference>

Return Value

<PropertyReference name="capabilities" type="AgentCapabilities | undefined"> The agent's capability declaration, or `undefined` if the agent hasn't reported capabilities yet (e.g., the runtime handshake is still in progress) or doesn't implement `getCapabilities()`.

When defined, the object contains these optional categories:

<PropertyReference name="identity" type="IdentityCapabilities"> Agent metadata: `name`, `type` (framework), `description`, `version`, `provider`, `documentationUrl`, `metadata`. </PropertyReference> <PropertyReference name="transport" type="TransportCapabilities"> Supported transports: `streaming`, `websocket`, `httpBinary`, `pushNotifications`, `resumable`. </PropertyReference> <PropertyReference name="tools" type="ToolsCapabilities"> Tool support: `supported`, `items`, `parallelCalls`, `clientProvided`. </PropertyReference> <PropertyReference name="output" type="OutputCapabilities"> Output formats: `structuredOutput`, `supportedMimeTypes`. </PropertyReference> <PropertyReference name="state" type="StateCapabilities"> State management: `snapshots`, `deltas`, `memory`, `persistentState`. </PropertyReference> <PropertyReference name="multiAgent" type="MultiAgentCapabilities"> Multi-agent coordination: `supported`, `delegation`, `handoffs`, `subAgents`. </PropertyReference> <PropertyReference name="reasoning" type="ReasoningCapabilities"> Reasoning/thinking visibility: `supported`, `streaming`, `encrypted`. </PropertyReference> <PropertyReference name="multimodal" type="MultimodalCapabilities"> Multimodal input/output: `input` and `output` sub-objects for images, audio, video, PDF, and file support. </PropertyReference> <PropertyReference name="execution" type="ExecutionCapabilities"> Code execution: `codeExecution`, `sandboxed`, `maxIterations`, `maxExecutionTime`. </PropertyReference> <PropertyReference name="humanInTheLoop" type="HumanInTheLoopCapabilities"> Human-in-the-loop: `supported`, `approvals`, `interventions`, `feedback`. </PropertyReference> <PropertyReference name="custom" type="Record&lt;string, unknown&gt;"> Arbitrary key-value pairs for integration-specific capabilities. </PropertyReference> </PropertyReference>

Usage

Conditionally render UI based on capabilities

tsx
import { useCapabilities } from "@copilotkit/react-native";
import { Text, View } from "react-native";

function ToolPanel() {
  const capabilities = useCapabilities();

  if (!capabilities?.tools?.supported) {
    return null; // Agent doesn't support tools, so hide the panel
  }

  return (
    <View>
      <Text>Tools</Text>
      {capabilities.tools.clientProvided && (
        <Text>This agent accepts client-provided tools.</Text>
      )}
    </View>
  );
}

Read capabilities for a specific agent

tsx
import { useCapabilities } from "@copilotkit/react-native";
import { Text, View } from "react-native";

function AgentInfo({ agentId }: { agentId: string }) {
  const capabilities = useCapabilities(agentId);

  if (!capabilities) {
    return <Text>Loading capabilities…</Text>;
  }

  return (
    <View>
      <Text>Streaming: {capabilities.transport?.streaming ? "Yes" : "No"}</Text>
      <Text>Tools: {capabilities.tools?.supported ? "Yes" : "No"}</Text>
      <Text>Human-in-the-loop: {capabilities.humanInTheLoop?.supported ? "Yes" : "No"}</Text>
    </View>
  );
}

Behavior

  • Synchronous read: The hook reads capabilities directly from the agent instance. There is no separate loading state or async fetch. The value stays undefined until the runtime /info handshake populates it, then becomes defined.
  • Re-renders: The hook calls useAgent() internally, so the component re-renders on agent state, message, and run-status changes (the default updates set). If you only need capabilities and want fewer re-renders, read agent.capabilities directly via useAgent({ updates: [] }).
  • Stable reference: The capabilities object reference only changes when the agent reconnects or the runtime response changes. It does not change on every render.
  • useAgent: access the full agent instance (capabilities are a property of the agent)
  • AG-UI Protocol: the protocol that defines the capabilities schema
  • React (V2) reference: the web useCapabilities this hook mirrors