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

# Daily Integration

> Connect your LemonSlice-managed agent to a [Daily](https://www.daily.co) room you can embed anywhere.

<Note>
  Check out our [hosted Daily starter project](https://github.com/lemonsliceai/lemonslice-examples/tree/main/01-hosted-daily-app) to see how you can connect your LemonSlice-managed agent to a [Daily](https://www.daily.co) room in a simple web app.
</Note>

## Getting Started

Follow these steps to create a Daily room that your LemonSlice agent joins, and embed it into your application.

#### 1. Get your API key

Retrieve your API key from the LemonSlice [account page](https://lemonslice.com/agents/api).

All API requests must include this header:

```
X-API-Key: YOUR_API_KEY
```

#### 2. Create a room

Use the `POST /liveai/rooms` endpoint to create a Daily room configured with a LemonSlice agent. The agent will automatically join the room once its startup is complete.

```bash BASH theme={null}
curl -X POST https://lemonslice.com/api/liveai/rooms \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "agent_id": "YOUR_AGENT_ID" }'
```

#### 3. Join the room from your frontend

Use [Daily’s JavaScript SDK](https://docs.daily.co/reference/daily-js) to join the room with the URL and token returned by the API.

```javascript JAVASCRIPT theme={null}
import DailyIframe from "@daily-co/daily-js";

const callObject = DailyIframe.createCallObject();

await callObject.join({
  url: room_url,
  token: token
});
```

Once joined, the LemonSlice agent will connect and begin responding in the room.

#### 4. Listen for LemonSlice events

LemonSlice uses Daily’s `app-message` channel to push events about the agent, image updates, and errors.

##### Example event handler

```javascript JAVASCRIPT theme={null}
useDailyEvent("app-message", (ev) => {
  if (ev?.data?.type === "bot_ready") {
    console.log("Agent is ready!");
  }
  if (ev?.data?.type === "daily_error") {
    console.log("An error occurred. ", ev?.data?.err_msg);
  }
});
```

#### You're ready to build

With a room created, the agent connected, and event hooks wired up, you're ready to:

* Build interactive video AI apps
* Customize agent behavior
* Trigger image changes and respond to events

Explore the rest of the API docs for more capabilities.

## Receiving Events

Hook into the Daily event handler to get LemonSlice-specific events.

| Event Type               | Description                                                                                                                                         |
| :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------- |
| `bot_ready`              | Fired when the LemonSlice agent has successfully joined the Daily room and is ready to send and receive audio and video.                            |
| `idle_timeout`           | Emitted when the agent stops due to inactivity. The idle timeout threshold is defined by the agent’s configuration.                                 |
| `user_transcription`     | Emitted when the user's speech has been finalized. Includes the field `transcription`. This event also captures messages sent by the user via text. |
| `agent_transcription`    | Emitted when the agent's response has been finalized. Includes the field `transcription`.                                                           |
| `image_change_requested` | A new agent look has been requested, typically after an `/imagine` request is made.                                                                 |
| `image_created`          | A new agent look has been created and is available for use.                                                                                         |
| `image_change_complete`  | The agent’s look has finished updating and the new look is now active.                                                                              |
| `image_change_error`     | The agent failed to update its look. Includes an `error` field with additional details.                                                             |
| `daily_error`            | A Daily-related error occurred. Includes `error` and `fatal` fields.                                                                                |
| `video_generation_error` | A failure occurred while generating a video segment or rendering agent output.                                                                      |

#### Full event handler

```javascript JAVASCRIPT theme={null}
useDailyEvent(
  "app-message",
  useCallback((ev: DailyEventObjectAppMessage) => {
    if (ev?.data?.type === "bot_ready") {
      console.log("Agent has joined the room")
    }
    if (ev?.data?.type === "idle_timeout") {
      console.log("Agent has timed out")
    }
    if (ev?.data?.type === "user_transcription") {
      console.log("Latest user transcription: ", ev?.data?.transcription);
    }
    if (ev?.data?.type === "agent_transcription") {
      console.log("Latest agent transcription: ", ev?.data?.transcription);
    }
    if (ev?.data?.type === "image_change_requested") {
      console.log("Request to edit agent has been received")
    }
    if (ev?.data?.type === "image_created") {
      console.log("New base image for Agent created")
    }
    if (ev?.data?.type === "image_change_complete") {
      console.log("Updated agent is ready")
    }
    if (ev?.data?.type === "image_change_error") {
      console.log("Failed to update agent", ev?.data?.error)
    }
    if (ev?.data?.type === "daily_error") {
      console.log("An error occurred. ", ev?.data?.error, ev?.data?.fatal);
    }
    if (ev?.data?.type === "video_generation_error") {
      console.log("A video generation error occurred.");
    } 
  }, [])
);
```

## Control Events

Send events through Daily to control the LemonSlice agent.

| Control Event | Description                                                                                                                                                                 |
| :------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `chat-msg`    | Send a message to the agent for it to respond to.<br />Also supports triggering avatar image changes via `/imagine` (see [Avatar image changes with `/imagine`](#imagine)). |
| `force-end`   | Immediately stop the realtime agent. The agent will leave the room and billing will stop.                                                                                   |

#### Sending Events

```javascript JAVASCRIPT theme={null}
sendAppMessage(
  {
    event: "chat-msg",
    message: "Your message here",
    name: "User",
  },
  "*",
);

sendAppMessage(
  { event: "force-end" },
  "*",
);
```

<a id="imagine" />

#### Avatar image changes with `/imagine`

The chat-msg control event also supports avatar image updates using a special `/imagine` prefix.<br />When a message begins with `/imagine`, LemonSlice interprets the remainder of the message as an image prompt and updates the agent’s avatar accordingly.

##### **Example**

```javascript JAVASCRIPT theme={null}
sendAppMessage(
  {
    event: "chat-msg",
    message: "/imagine being in front of a fireplace",
    name: "User",
  },
  "*",
);
```

##### **How it works**

* Messages starting with `/imagine` **do not trigger a spoken response**
* Instead, the agent’s avatar image is regenerated based on the prompt
* The avatar retains its core identity and proportions, while updating the visual context
* Once the image update completes, the agent continues normal interaction
  <Note>**Agent setup requirement:** `Allow users to modify appearance` must be enabled in the agent configuration. This setting is *enabled by default for all newly created agents.*</Note>

## Additional resources

<Columns cols={3}>
  <Card title="Starter project" icon="code" href="https://github.com/lemonsliceai/lemonslice-examples/tree/main/01-hosted-daily-app" cta="View on GitHub" />

  <Card title="REST Endpoints" icon="book-open" href="/api-reference/create-room" cta="View docs" />

  <Card title="Daily Documentation" icon="book-open" href="https://docs.daily.co" cta="View docs" />
</Columns>