<ui-audio-provider src="podcast.mp3"> <ui-orb id="orb"></ui-orb> <ui-audio-play-button></ui-audio-play-button> <ui-audio-progress-slider></ui-audio-progress-slider> </ui-audio-provider>

<ui-audio-provider .items="${myPlaylistArray}"> <ui-scrolling-waveform></ui-scrolling-waveform> <div class="controls"> <ui-audio-prev-button></ui-audio-prev-button> <ui-audio-play-button></ui-audio-play-button> <ui-audio-next-button></ui-audio-next-button> </div> </ui-audio-provider>

<ui-3d-flip> <div slot="front"> <img src="cover.png" /> <ui-spectrum-visualizer></ui-spectrum-visualizer> </div> <div slot="back"> <ui-playlist></ui-playlist> </div> </ui-3d-flip>

<ui-audio-provider .items="${playlist}"> <ui-spectrum-visualizer></ui-spectrum-visualizer> <ui-playlist></ui-playlist> <div class="transport"> <ui-audio-prev-button></ui-audio-prev-button> <ui-audio-play-button></ui-audio-play-button> <ui-audio-next-button></ui-audio-next-button> </div> </ui-audio-provider>

<ui-voice-button state="recording"></ui-voice-button>

<ui-speech-provider simulation> <textarea></textarea> <ui-speech-record-button size="sm"></ui-speech-record-button> <ui-speech-preview></ui-speech-preview> </ui-speech-provider>

<ui-chat-list> <ui-chat-item direction="inbound"> <ui-orb slot="avatar" agentState="talking"></ui-orb> Hello! How can I help you? </ui-chat-item> <ui-chat-item direction="outbound"> I need help building a UI. </ui-chat-item> <ui-chat-item direction="inbound"> <ui-typing-indicator></ui-typing-indicator> </ui-chat-item> </ui-chat-list>

<!-- Custom Coral with specific seed --> <ui-orb agentState="talking" seed="12345" .colors="${['#F28B82', '#E57373']}"> </ui-orb>

<ui-orb agentState="thinking"></ui-orb>

<ui-waveform .data="${myData}" height="64" fadeEdges="true"> </ui-waveform>

<ui-scrolling-waveform speed="50" barWidth="4"> </ui-scrolling-waveform>

<ui-shimmering-text text="Loading..." duration="2"> </ui-shimmering-text>

<ui-live-waveform .analyserNode="${node}" active="true"> </ui-live-waveform>

Selected ID: (none)

<ui-mic-selector></ui-mic-selector>

Selected Voice: (none)

<ui-voice-picker .voices="${list}"></ui-voice-picker>

State: idle

<ui-voice-button state="idle" label="Record"></ui-voice-button>