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

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.

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.

Floating Chat

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;
}

Understanding & Customising Chat

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

AgentContext

AgentContext 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)
• User @mentions of specific items in your application (learn more about 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 - Enable real-time response streaming
• Configuring the Cedar Editor - Customize the chat input experience
• Custom Message Rendering - Create custom message types and interactions
• Understanding Chat Components - Deep dive into individual chat components for advanced customization

Next Steps

1. Try it out: Visit the 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