useCapabilities

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.

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.

<Callout type="info"> This composable returns a Vue `ComputedRef`. Read it with `.value` in `<script setup>`, or unwrapped directly in a `<template>`. The ref stays reactive, so it updates automatically once the runtime handshake populates capabilities. </Callout>

Signature

import { useCapabilities } from "@copilotkit/vue/v2";

function useCapabilities(agentId?: string): ComputedRef<AgentCapabilities | undefined>

Parameters

<PropertyReference name="agentId" type="string" default='"default"'> ID of the agent whose capabilities to read. If omitted, uses the default agent. Unlike `useAgent` / `useThreads` / `useSuggestions`, this argument is a plain `string` captured once when the composable runs — it is not a `MaybeRefOrGetter` and does not react to changes. To read a different agent's capabilities at runtime, re-mount the component (for example with a changing `:key`). </PropertyReference>

Return Value

<PropertyReference name="capabilities" type="ComputedRef<AgentCapabilities | undefined>"> A computed ref holding the agent's capability declaration, or `undefined` if the agent hasn't reported capabilities yet (for example, the runtime handshake is still in progress) or declares none. The composable reads the agent's `capabilities` property directly; it does not call `getCapabilities()`.

When defined, the unwrapped 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<string, unknown>"> Arbitrary key-value pairs for integration-specific capabilities. </PropertyReference> </PropertyReference>

Usage

Conditionally render UI based on capabilities

vue

<script setup lang="ts">
import { useCapabilities } from "@copilotkit/vue/v2";

const capabilities = useCapabilities();
</script>

<template>
  <!-- Hide the panel when the agent doesn't support tools -->
  <div v-if="capabilities?.tools?.supported">
    <h3>Tools</h3>
    <p v-if="capabilities.tools.clientProvided">
      This agent accepts client-provided tools.
    </p>
  </div>
</template>

Read capabilities for a specific agent

vue

<script setup lang="ts">
import { useCapabilities } from "@copilotkit/vue/v2";

const props = defineProps<{ agentId: string }>();

const capabilities = useCapabilities(props.agentId);
</script>

<template>
  <p v-if="!capabilities">Loading capabilities...</p>
  <ul v-else>
    <li>Streaming: {{ capabilities.transport?.streaming ? "Yes" : "No" }}</li>
    <li>Tools: {{ capabilities.tools?.supported ? "Yes" : "No" }}</li>
    <li>Human-in-the-loop: {{ capabilities.humanInTheLoop?.supported ? "Yes" : "No" }}</li>
  </ul>
</template>

Read the value in script

Because the composable returns a ComputedRef, access the value with .value outside the template (for example inside a watch or computed):

import { watch } from "vue";
import { useCapabilities } from "@copilotkit/vue/v2";

const capabilities = useCapabilities();

watch(capabilities, (caps) => {
  if (caps?.tools?.supported) {
    console.log("Agent supports tools");
  }
});

Behavior

Synchronous read. The composable reads capabilities directly from the agent instance via useAgent. There is no separate loading state or async fetch: the value is undefined until the runtime /info handshake populates it, then becomes defined.
Reactive computed. The returned ComputedRef recomputes when the underlying agent ref changes, so your component (or watcher) updates once capabilities arrive.

useAgent - access the full agent instance (capabilities are derived from the agent)
AG-UI Protocol - the protocol that defines the capabilities schema