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

# Change outfits and scenes

Let the user choose a casual outfit, a floral dress, or a navy dress while staying in the same session. Prepare an image for each look, register them at session creation, and switch the active source image when the user makes a choice.

## 1. Prepare a consistent set of images

<table><tbody><tr><td><img src="https://mintcdn.com/vivix-20d305ce/B_Ljoe3caVyoO-A7/images/streaming-avatar/outfit-white-top.webp?fit=max&auto=format&n=B_Ljoe3caVyoO-A7&q=85&s=dad599ca04d843d39a875d9dceaa587c" alt="The character in a white top and pink skirt" className="w-full h-auto rounded-lg" width="720" height="1280" data-path="images/streaming-avatar/outfit-white-top.webp" /><br /><b>White top and pink skirt</b></td><td><img src="https://mintcdn.com/vivix-20d305ce/B_Ljoe3caVyoO-A7/images/streaming-avatar/outfit-floral-dress.webp?fit=max&auto=format&n=B_Ljoe3caVyoO-A7&q=85&s=bf46e38df3ad7e902e7e05bb25fd5b4c" alt="The same character in a floral dress" className="w-full h-auto rounded-lg" width="720" height="1280" data-path="images/streaming-avatar/outfit-floral-dress.webp" /><br /><b>Floral dress</b></td><td><img src="https://mintcdn.com/vivix-20d305ce/B_Ljoe3caVyoO-A7/images/streaming-avatar/outfit-navy-dress.webp?fit=max&auto=format&n=B_Ljoe3caVyoO-A7&q=85&s=38842165c13ad4ef62b19d1e5a9e6e5d" alt="The same character in a navy dress" className="w-full h-auto rounded-lg" width="720" height="1280" data-path="images/streaming-avatar/outfit-navy-dress.webp" /><br /><b>Navy dress</b></td></tr></tbody></table>

The three example images show a white top with a pink skirt, a floral dress, and a navy dress. Normalize their aspect ratios and keep the character position and framing comparable. The pose, camera distance, and background will also change with the selected image, so consider them alongside the outfit.

**This switches to an image you have already prepared.** A request to “wear a red dress” does not generate a new outfit image by itself. Your application can map a wardrobe button or tool call to an existing image ID.

## 2. Register the looks at session creation

This is a configuration fragment. Merge `visual` into the same avatar in your creation request, preserving its `avatar_id`, `instructions`, and voice settings. With several images, use `default_source_image_id` to choose the opening look. See [Quickstart](/streaming-avatar/get-started/quickstart) for a complete creation request.

```json wrap theme={null}
{
  "visual": {
    "default_source_image_id": "look_pink_skirt",
    "source_images": [
      {
        "source_image_id": "look_pink_skirt",
        "url": "https://static.vivi-x.ai/images/2026/08/03/650665979f5d095f.jpg",
        "media_type": "image/jpeg",
        "description": "A stylized young woman with long wavy brown hair and a white flower hair clip faces the camera. She wears a white off-shoulder top, a pink skirt and a silver necklace. Her arms rest beside her body, with empty hands. Shopfronts and a flower cart line the sunlit street behind her. The vertical composition shows her from the head to the upper legs, in a medium-full shot."
      },
      {
        "source_image_id": "look_floral_dress",
        "url": "https://static.vivi-x.ai/images/2026/08/05/6b3d0c85f73a166f.jpg",
        "media_type": "image/jpeg",
        "description": "A stylized woman with long wavy brown hair and a white hair clip wears a floral dress, facing the camera in a sunlit shopping street. Her arms rest by her sides. Medium-full vertical shot."
      },
      {
        "source_image_id": "look_navy_dress",
        "url": "https://static.vivi-x.ai/images/2026/08/05/7412915837ccf5c2.jpg",
        "media_type": "image/jpeg",
        "description": "A stylized woman with long wavy brown hair wears a navy dress, facing the camera in a sunlit street. Medium-full vertical shot."
      }
    ]
  }
}
```

## 3. Switch when the user chooses a look

Send this event through the current session’s control WebSocket:

```json theme={null}
{
  "event_id": "switch_floral_1",
  "type": "session.update",
  "session": {
    "source_image_id": "look_floral_dress"
  }
}
```

Generate a new `event_id` for each request and show a switching state. `session.updated` confirms acceptance. Wait for `session.update.done` and match `request_event_id` to this request.

```json theme={null}
{
  "type": "session.update.done",
  "event_id": "server_switch_done_1",
  "request_event_id": "switch_floral_1",
  "status": "completed"
}
```

On `completed`, end the waiting state and inspect the new look in the video. On `cancelled`, the request did not complete and may have been superseded. On `failed`, show the failure and investigate its `reason` or error details. Let the result drive the selector state instead of announcing success as soon as a button is pressed.

## 4. Use the same pattern elsewhere

* **Locations:** move between prepared indoor, street, and stage images.
* **Framing:** offer a conversational portrait and a full-body performance view.
* **Virtual try-on:** map a product card to its prepared outfit image and keep the UI selection in sync.

To switch when a user says “Show me the floral dress”, see [Switch outfits with a tool call](/streaming-avatar/character/tools). The model selects an available choice, your application performs the same `session.update`, and the result returns to the conversation. Prepared table-supported and held images can also provide explicit product-support states; see [Object interaction](/streaming-avatar/interaction/object-interaction).

## 5. Check the next turn too

Do more than inspect the moment of the switch. Select the floral dress, allow an idle interval, and send another message. Check that the old outfit does not return. Each description should match its own image; Instructions should not make the white top permanent, and idle motion should not restate an old outfit.

This changes the visual source for the same avatar without clearing the conversation. If a scene change also needs to reset an order, product selection, or task, handle that explicitly in your application.
