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 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. 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. Side Panel Chat Demo 
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: 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

​
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