> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cedarcopilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chat Overview

> Get started with Cedar chat components and understand how they work

With one component, you can download a fully working chat. The chat automatically handles streaming, custom message rendering, input, [mentions](/agent-context/mentions) and more. You also get all of the individual components, so you can customise styling, rendering, and functionality.

## Quick Start

To get started, choose one of the 3 types of chat. See [cedarcopilot.com/examples/cedar-playground](https://cedarcopilot.com/examples/cedar-playground) to see them in action.

### Chat Types

**Caption Chat**
A caption-style chat interface that appears at the bottom center of the screen, perfect for overlay-style interactions. Great for AI assistants that provide contextual help without taking up dedicated screen space.

We realised that in a conversation, you don't need to see an entire history of the chat all the time, just the latest message (of course, we give the user the option to see past texts). This gives a much more central and embedded experience for agentic interactions

<img src="https://vrhlhwfhghqbpdpfnpdq.supabase.co/storage/v1/object/public/logos/caption.gif" alt="Bottom Center Chat Demo" />

**Floating Chat**
A floating chat window that can be positioned on the left or right side of the screen with expand/collapse functionality. Perfect for assistance that doesn't interfere with the main application.

<img src="https://vrhlhwfhghqbpdpfnpdq.supabase.co/storage/v1/object/public/logos/floating.gif" alt="Floating Chat Demo" />

**Side Panel Chat**\
A side panel chat that pushes your main content to make room for the chat interface. This is if you want the chat to not overlap with any elements, and always have its own dedicated spot.

<img src="https://vrhlhwfhghqbpdpfnpdq.supabase.co/storage/v1/object/public/logos/sidepanel.gif" alt="Side Panel Chat Demo" />

<CodeGroup>
  ```tsx Floating Chat theme={null}
  import { FloatingCedarChat } from '@/chatComponents/FloatingCedarChat';

  function App() {
  	return (
  		<div>
  			{/* Your main content */}
  			<FloatingCedarChat
  				side='right'
  				title='Assistant'
  				collapsedLabel='How can I help you today?'
  				dimensions={{
  					width: 400,
  					height: 600,
  					minWidth: 350,
  					minHeight: 400,
  				}}
  				resizable={true}
  			/>
  		</div>
  	);
  }

  // Props interface
  interface FloatingCedarChatProps {
  	side?: 'left' | 'right';
  	title?: string;
  	collapsedLabel?: string;
  	companyLogo?: React.ReactNode;
  	dimensions?: {
  		width?: number;
  		height?: number;
  		minWidth?: number;
  		minHeight?: number;
  		maxWidth?: number;
  		maxHeight?: number;
  	};
  	resizable?: boolean;
  }
  ```

  ```tsx Side Panel Chat theme={null}
  import { SidePanelCedarChat } from '@/chatComponents/SidePanelCedarChat';

  function App() {
  	return (
  		<SidePanelCedarChat
  			side='right'
  			title='Chat Assistant'
  			dimensions={{
  				width: 600,
  				minWidth: 300,
  				maxWidth: 800,
  			}}
  			resizable={true}
  			topOffset={64} // Offset for navbar height (optional)
  			className='' // Additional styling (optional)
  		>
  			{/* Your main page content goes here */}
  			<div className='p-8'>
  				<h1>Your App Content</h1>
  				<p>This content will be pushed to the side when chat opens.</p>
  			</div>
  		</SidePanelCedarChat>
  	);
  }

  // Props interface
  interface SidePanelCedarChatProps {
  	children?: React.ReactNode; // Page content to wrap
  	side?: 'left' | 'right';
  	title?: string;
  	collapsedLabel?: string;
  	showCollapsedButton?: boolean; // Control whether to show the collapsed button
  	companyLogo?: React.ReactNode;
  	dimensions?: {
  		width?: number;
  		minWidth?: number;
  		maxWidth?: number;
  	};
  	resizable?: boolean;
  	className?: string; // Additional CSS classes for positioning
  	topOffset?: number; // Top offset in pixels (e.g., for navbar height)
  }
  ```

  ```tsx Bottom Center Chat theme={null}
  import { CedarCaptionChat } from '@/chatComponents/CedarCaptionChat';

  function App() {
  	return (
  		<div>
  			{/* Your main content */}
  			<CedarCaptionChat
  				dimensions={{
  					width: 600,
  					maxWidth: 800,
  				}}
  				showThinking={true}
  			/>
  		</div>
  	);
  }

  // Props interface
  interface CedarCaptionChatProps {
  	dimensions?: {
  		width?: number;
  		maxWidth?: number;
  	};
  	className?: string;
  	showThinking?: boolean; // Whether to show "Thinking..." state and user messages
  }
  ```
</CodeGroup>

## Understanding & Customising Chat

Chat works through 2 main modules working together: **AgentContext** and **MessagesSlice**.

### AgentContext

[**AgentContext**](/agent-context/agent-context) manages everything that we pass into the agent. This includes not only the user message, but also:

* **State** that the agent is subscribed to ([learn more about state access](/chat/subscribing-state))
* **User @mentions** of specific items in your application ([learn more about mentions](/chat/mentions))
* **Conversation history** and contextual information
* **Custom context** you provide programmatically, such as user role

This ensures your AI agent has full context about your application's current state and what the user is specifically referring to.

### MessagesSlice

**MessagesSlice** takes care of the saving and rendering of messages. It handles:

* **Message storage** and conversation history
* **Message rendering** with support for different message types
* **Streaming responses** from AI providers
* **Custom message components** for rich interactions

### Additional Customization

* **[Streaming](/chat/streaming)** - Enable real-time response streaming
* **[Configuring the Cedar Editor](/chat/configuring-cedar-editor)** - Customize the chat input experience
* **[Custom Message Rendering](/chat/custom-message-rendering)** - Create custom message types and interactions
* **[Understanding Chat Components](/chat/chat-components)** - Deep dive into individual chat components for advanced customization

## Next Steps

1. **Try it out**: Visit the [Cedar Playground](https://cedarcopilot.com/examples/cedar-playground) to see all chat types in action
2. **Choose your style**: Pick the chat type that best fits your application
3. **Add context**: Set up state access and mentions to make your agent context-aware
4. **Customize**: Tailor the appearance and behavior to match your application's needs