---
title: useCopilotKit
description: "useCopilotKit Hook API Reference"
---

`useCopilotKit` is a React hook that provides access to the CopilotKit context, including the core instance, tool
rendering capabilities, and runtime connection status. It's the primary way to interact with CopilotKit's core
functionality from React components.

## What is useCopilotKit?

The useCopilotKit hook:

- Provides access to the `CopilotKitCore` instance for agent and tool management
- Exposes render tool calls for visual tool execution feedback
- Subscribes to runtime connection status changes
- Enables programmatic control over agents, tools, and context

## Basic Usage

```tsx
import { useCopilotKit } from "@copilotkit/react-core";

function MyComponent() {
  const { copilotkit } = useCopilotKit();

  // Access runtime status
  console.log("Runtime status:", copilotkit.runtimeConnectionStatus);

  // Get an agent
  const agent = copilotkit.getAgent("assistant");

  return (
    <div>Connected: {copilotkit.runtimeConnectionStatus === "Connected"}</div>
  );
}
```

## Return Value

The hook returns a `CopilotKitContextValue` object with the following properties:

### copilotkit

`CopilotKitCore`

The core CopilotKit instance that manages agents, tools, context, and runtime connections. This is the main interface
for interacting with CopilotKit programmatically.

### renderToolCalls

`ReactToolCallRenderer<any>[]`

An array of tool call render configurations defined at the provider level. These are used to render visual feedback when
tools are executed.

### currentRenderToolCalls

`ReactToolCallRenderer<unknown>[]`

The current list of render tool calls, including both static configurations and dynamically registered ones.

### setCurrentRenderToolCalls

`React.Dispatch<React.SetStateAction<ReactToolCallRenderer<unknown>[]>>`

A setter function to update the current render tool calls. Useful for dynamically adding or removing tool renderers.

## Examples

### Running an Agent

```tsx
import { useCopilotKit } from "@copilotkit/react-core";
import { useAgent } from "@copilotkit/react-core";

function AgentRunner() {
  const { copilotkit } = useCopilotKit();
  const { agent } = useAgent({ agentId: "assistant" });
  const [message, setMessage] = useState("");

  const handleSubmit = async () => {
    if (!message) return;

    // Add user message
    agent.addMessage({
      id: crypto.randomUUID(),
      role: "user",
      content: message,
    });

    // Run the agent
    await copilotkit.runAgent({ agent, agentId: "assistant" });

    setMessage("");
  };

  return (
    <div>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type a message..."
      />
      <button onClick={handleSubmit}>Send</button>
    </div>
  );
}
```

### Monitoring Runtime Connection

```tsx
import { useCopilotKit } from "@copilotkit/react-core";

function ConnectionStatus() {
  const { copilotkit } = useCopilotKit();

  const getStatusColor = () => {
    switch (copilotkit.runtimeConnectionStatus) {
      case "Connected":
        return "green";
      case "Connecting":
        return "yellow";
      case "Error":
        return "red";
      default:
        return "gray";
    }
  };

  return (
    <div className="connection-status">
      <div className={`indicator ${getStatusColor()}`} />
      <span>Runtime: {copilotkit.runtimeConnectionStatus}</span>
      {copilotkit.runtimeVersion && <span>v{copilotkit.runtimeVersion}</span>}
    </div>
  );
}
```

## Automatic Re-renders

The hook automatically subscribes to runtime connection status changes and triggers re-renders when:

- The runtime connects or disconnects
- The connection status changes
- Connection errors occur

This ensures your components always display the current connection state without manual subscriptions.