Agent experience framework

How to use
CopilotKit.

Building product-native agent interfaces with chat, custom components, shared application state, frontend tools, streaming, and deterministic human approval checkpoints.

Open CopilotKit ↗ Official download ↗
What it isopen-source frontend framework for agentic chat, generative UI, shared state, and human-in-the-loop experiences Workflows2 UpdatedJuly 2026

CopilotKit is a open-source frontend framework for agentic chat, generative UI, shared state, and human-in-the-loop experiences. Building product-native agent interfaces with chat, custom components, shared application state, frontend tools, streaming, and deterministic human approval checkpoints. This guide covers the whole path in one place: official access, a first session that produces something reviewable, the checks that make output trustworthy, and the permissions worth limiting before you connect real work.

Troiana principle

AI should make the work easier to inspect. If the workflow removes the source, the owner, or the review step, redesign the workflow.

01

Access & setup

Find, install, and sign in to CopilotKit

Get into the official CopilotKit experience with the right account and a setup you understand.

  1. 01

    Start at https://www.copilotkit.ai/ and confirm the domain before entering account or payment information.

  2. 02

    Availability: CopilotKit is installed into React or React Native applications and connects UI components and hooks to compatible agent backends through AG-UI.

  3. 03

    A supported web or mobile application, a compatible agent backend, a server-side model configuration, and an authorization design for every user, action, and shared state field.

  4. 04

    Sign in with the account you intend to keep using, then review plan, data, notification, and permission settings.

  5. 05

    Run one low-risk test task before connecting sensitive files, repositories, or workspace data.

  • Use official download pages.
  • Review permissions during setup.
  • Keep installers and applications updated.
02

First session

Your first useful CopilotKit session

Learn the interaction loop using a small task with a clear outcome.

  1. 01

    Define one user journey, the agent's data boundary, and every action that must remain deterministic or human-approved.

  2. 02

    Create a minimal CopilotKit application and connect a development agent backend without exposing provider secrets to the client.

  3. 03

    Render read-only agent state first, then add one typed tool with server-side authorization and visible status.

  4. 04

    Test normal, denied, malformed, interrupted, replayed, and failed runs before enabling the workflow for real users.

  • State the outcome before the background.
  • Provide the real source material.
  • Review the result before expanding the task.
03

Quality control

Check the quality of CopilotKit output

Establish that an autonomous run did the right thing, not merely that it finished.

  1. 01

    Define what the run should achieve and what it must never touch before granting it a single tool.

  2. 02

    Read the full execution trace: which tools were called, with what arguments, and in what order.

  3. 03

    Verify the side effects directly in the target system rather than trusting the agent's own report of success.

  4. 04

    Confirm failures surfaced as failures — a silent retry loop or a swallowed error is more dangerous than a crash.

  5. 05

    Re-run the same task and compare: an agent that behaves differently across identical runs is not yet production-ready.

  • Verify side effects in the system of record, not in the agent's summary.
  • Require human approval for any irreversible or outward-facing action.
  • Log every tool call so a run can be reconstructed afterwards.
04

Privacy & permissions

Use CopilotKit safely

Bound what an autonomous system can reach before you let it run unattended.

  1. 01

    Enumerate every tool, credential, and system the agent can reach, and remove the ones it does not need.

  2. 02

    Require explicit human approval for irreversible actions: sending, publishing, paying, deleting, or deploying.

  3. 03

    Run against non-production data until behaviour is predictable across repeated runs.

  4. 04

    Set hard limits on spend, iterations, and runtime so a failure loop cannot run unbounded.

  5. 05

    Treat anything the agent reads from the web or a document as data, never as instructions it may follow.

  • A polished interface does not make an agent action safe. Treat all client input and model tool arguments as untrusted, authenticate users server-side, authorize every resource and side effect, minimize shared state, keep provider keys off the client, use graph-enforced interrupts for mandatory approvals, make resumable actions idempotent, protect against cross-user thread leakage, and trace and test cancellation, retries, and partial failure.
  • Follow your organisation's approved-use policy.
  • Never treat fluent output as authorization to act.
05

Core workflows

Step-by-step ways to use CopilotKit for the work it does best.

Each workflow is a separate guide with its own steps and review checkpoints.

01 WorkflowBuild a secure agent chat with CopilotKit

Connect a product UI to an agent while preserving authentication, resource authorization, state boundaries, and observable failures.

 02 WorkflowAdd a deterministic human approval gate in CopilotKit

Pause an agent before a consequential action and resume only with a validated, auditable human decision.

06

Official references

Check the current product documentation.

Features, plan limits, availability, and data controls change. These official pages are the starting points used for this guide.

Explore the Troiana AI Hub →