The outcome

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

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 narrows that broad capability into one repeatable outcome, with checkpoints that keep the source material and your judgment in the loop.

Before you begin

Set the boundary before the tool starts.

Choose one real task, identify who will use the result, and decide what evidence or test will make the result acceptable. Gather only the source material needed for that task. If the work contains confidential, personal, regulated, or client-owned information, confirm that the platform and account are approved before sharing it.

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.

Step by step

A workflow you can repeat.

  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.

Working standard

What good use looks like.

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

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.

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 collection.