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

# Demo Showcases

> Explore Cedar-OS capabilities through these comprehensive examples featuring AI-native interfaces, voice interactions, and custom components.

# Demo Showcases

Explore the power of Cedar-OS through these comprehensive examples that demonstrate various capabilities including voice interactions, state management, custom message rendering, and more.

## AI-Native Email

Custom message rendering, voice, voice streaming, and more.

<iframe width="560" height="315" src="https://www.youtube.com/embed/2QEX2Gf_xKA" title="AI-Native Email (Voice)" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<iframe width="560" height="315" src="https://www.youtube.com/embed/y6oEyCjSiPA" title="AI-Native Email" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

### How we built this ([open source code here](https://github.com/CedarCopilot/smail))

1. 👀 **State**: useRegisterState(state) allows the agent to see the email draft and email opened.
2. 🧱 **Cedar Components**: Download `<SidePanelCedarChat/>` to own a fully functional chat component
3. 🎤 **Microphone**: Cedar manages audio blogs to send it back to the backend
4. 🌊 **Streaming**: Cedar-OS auto-manages streaming
5. 🧶 **Custom Message Rendering**: Define custom react components for rendering.
6. 🔨 **Change Local State**: Cedar-OS takes the Agent's response and makes the local state change
7. 🔎 **Render Diff**: Render diffs through `<DiffText/>`
8. 🛝 **Slider Spell**: Use the slider spell to intuitively redraft

***

## AI-Native Canvas

Voice, diff, set state

<iframe width="560" height="315" src="https://www.youtube.com/embed/DJsn5uetu8Y" title="AI-Native Canvas Flow" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

***

## Onboarding Agent (No Chat)

Create custom, interactive onboarding experiences.

<iframe width="560" height="315" src="https://www.youtube.com/embed/LfjFg03i8kc" title="No Chat Onboarding Agent" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

{' '}
