CopilotKit

CopilotChat

Headless chat primitive that wires an agent into context, plus a prebuilt full-screen chat UI from the /components subpath.

Overview

CopilotChat connects an agent and exposes its conversation state to descendants. There are two versions, chosen by import path:

  • Headless (@copilotkit/react-native) renders no UI. It wires up useAgent, manages attachments, and exposes everything through useCopilotChatContext so you build the interface from React Native views.
  • Prebuilt UI (@copilotkit/react-native/components) is a ready-made full-screen chat with a message list, input bar, and optional header. See Prebuilt UI.

Headless CopilotChat

import { CopilotChat, useCopilotChatContext } from "@copilotkit/react-native";

Props

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

useCopilotChatContext

Call inside a <CopilotChat> tree to read the conversation state and actions. Throws if called outside a <CopilotChat>.

function useCopilotChatContext(): CopilotChatContextValue;

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Usage

import { CopilotChat, useCopilotChatContext } from "@copilotkit/react-native";
import { useState } from "react";
import { FlatList, Text, TextInput, TouchableOpacity, View } from "react-native";

function ChatUI() {
  const { messages, isRunning, submitMessage } = useCopilotChatContext();
  const [text, setText] = useState("");

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={messages.filter((m) => m.content)}
        keyExtractor={(m, i) => m.id ?? String(i)}
        renderItem={({ item }) => (
          <Text style={{ padding: 12 }}>{item.content}</Text>
        )}
      />
      <View style={{ flexDirection: "row", padding: 8 }}>
        <TextInput
          style={{ flex: 1, borderWidth: 1, borderRadius: 8, padding: 8 }}
          value={text}
          onChangeText={setText}
          placeholder="Type a message..."
        />
        <TouchableOpacity
          disabled={isRunning}
          onPress={() => {
            submitMessage(text);
            setText("");
          }}
          style={{ padding: 8 }}
        >
          <Text>Send</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export function ChatScreen() {
  return (
    <CopilotChat agentId="default">
      <ChatUI />
    </CopilotChat>
  );
}

Prebuilt UI

For a ready-made interface, import CopilotChat from the /components subpath. It renders a full-screen chat with a message list, input bar, optional header, and inline tool-call rendering via the render-tool registry.

import { CopilotChat } from "@copilotkit/react-native/components";

Props

The prebuilt UI components select their agent with agentName (not the headless agentId). The two are equivalent; agentName is simply the prop name the prebuilt components currently expose.

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Usage

import { CopilotChat } from "@copilotkit/react-native/components";

export function ChatScreen() {
  return (
    <CopilotChat
      agentName="default"
      headerTitle="Assistant"
      placeholder="Ask me anything..."
      initialMessages={["What's the weather?", "Summarize my tasks"]}
    />
  );
}

Related