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

# Code Examples

> Ideas for using the Daydream API and SDKs

Here are some examples to inspire building your own applications.

## SDKs

Get started quickly with our official SDKs:

<CardGroup cols={2}>
  <Card title="TypeScript SDK" icon="node-js" href="/sdks/typescript/installation">
    Server-side stream management with `@daydreamlive/sdk`
  </Card>

  <Card title="Browser SDK" icon="browser" href="/sdks/browser/installation">
    WebRTC broadcasting and playback with `@daydreamlive/browser`
  </Card>

  <Card title="TouchDesigner" icon="cube" href="/sdks/touchdesigner/installation">
    Visual programming and VJ applications
  </Card>

  <Card title="OBS Plugin" icon="video" href="/sdks/obs/installation">
    Add AI effects to your OBS streams
  </Card>
</CardGroup>

## Browser SDK Examples

The Browser SDK includes working examples you can try immediately:

| Example                                                                                                    | Description        | Demo                                                                 |
| ---------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------- |
| [with-react](https://github.com/daydreamlive/daydream-browser/tree/main/examples/with-react)               | Basic React hooks  | [Live Demo](https://daydream-browser-kohl.preview.livepeer.monster)  |
| [with-compositor](https://github.com/daydreamlive/daydream-browser/tree/main/examples/with-compositor)     | Canvas composition | [Live Demo](https://daydream-browser-zeta.preview.livepeer.monster)  |
| [with-screen-share](https://github.com/daydreamlive/daydream-browser/tree/main/examples/with-screen-share) | Screen capture     | [Live Demo](https://with-screen-share-lime.preview.livepeer.monster) |
| [with-three](https://github.com/daydreamlive/daydream-browser/tree/main/examples/with-three)               | Three.js streaming | [Live Demo](https://with-three-git-main.preview.livepeer.monster)    |
| [with-vanilla](https://github.com/daydreamlive/daydream-browser/tree/main/examples/with-vanilla)           | Pure JS (no React) | —                                                                    |

## Community Examples

<Columns cols={2}>
  <Card title="FluidCanvas Example" icon="file-code" href="https://github.com/daydreamlive/daydream-examples/tree/main/with-fluid-canvas" arrow="true" cta="Click Here">
    <iframe controls className="w-full aspect-video rounded-xl" src="https://lvpr.tv/?v=580esm5mqyezv6xx&autoplay=0" />

    An interactive WebGL-based fluid simulation built with React, TypeScript, and Vite. This demo showcases real-time fluid dynamics with customizable parameters and visual effects.
  </Card>

  <Card title="DrawingCanvas Example" icon="file-code" href="https://github.com/daydreamlive/daydream-examples/tree/main/with-drawing-canvas" arrow="true" cta="Click Here">
    <iframe controls className="w-full aspect-video rounded-xl" src="https://lvpr.tv/?v=4b9eor6706w1dris&autoplay=0" />

    A React drawing canvas example with WebRTC streaming capabilities. This
    example demonstrates a feature-rich drawing component with multiple tools,
    recording capabilities, and real-time streaming support.
  </Card>

  <Card title="Audio-Reactive Example" icon="file-code" href="https://github.com/daydreamlive/daydream-examples/tree/main/with-audio-input" arrow="true" cta="Click Here">
    <iframe controls className="w-full aspect-video rounded-xl" src="https://lvpr.tv/?v=3a47dhu34059gwsx&autoplay=0" />

    An AudioInput component system that captures microphone or demo audio, analyzes frequency levels in real-time, and renders audio-reactive visualizations to canvas for streaming applications.
  </Card>
</Columns>

## GitHub Repositories

* [daydream-typescript](https://github.com/daydreamlive/daydream-typescript) - TypeScript SDK
* [daydream-browser](https://github.com/daydreamlive/daydream-browser) - Browser SDK with React hooks
* [daydream-touchdesigner](https://github.com/daydreamlive/daydream-touchdesigner) - TouchDesigner plugin
* [daydream-obs](https://github.com/daydreamlive/daydream-obs) - OBS plugin
* [daydream-examples](https://github.com/daydreamlive/daydream-examples) - Community examples