---
title: "Fully Headless UI"
description: "Fully customize your Copilot's UI from the ground up using headless UI"
icon: "lucide/Settings"
hideTOC: true
---
import { IntegrationGrid } from "@/components/content/integration-grid";

## What is this?

A headless UI gives you full control over the chat experience — you bring your own components, layout, and styling while CopilotKit handles agent communication, message management, and streaming.

## When should I use this?

Use headless UI when the [slot system](/custom-look-and-feel/slots) isn't enough — for example, when you need a completely different layout, want to embed the chat into an existing UI, or are building a non-chat interface that still communicates with an agent.

## Get started by choosing your AI backend

<IntegrationGrid path="custom-look-and-feel/headless-ui" />