import { VideoPanel } from '@components/VideoPanel';

# Web UI

在 Agent TARS 中，官方默认提供了一个功能完备的 Web UI，支持会话管理、呈现 MCP Tool Result，拥有 [Native Streaming](#native-streaming)、[GUI Grounding Transition](#gui-grounding-transition)、[Share 与 Reply](#share-and-reply) 等能力：

<VideoPanel
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/docs/videos/quick-start.mp4"
  loop
  autoPlay
/>

## 能力

### Native Streaming

从 Agent TARS Beta 开始，支持原生的流式，目前：

<br />

<VideoPanel
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/docs/videos/streaming.mp4"
  loop
  autoPlay
/>

<br />

### GUI Grounding Transition

从 Agent TARS Beta 开始，Agent TARS 支持了 GUI Groundig，GUI Grounding 的过程也会有 “实时的鼠标动画”

<VideoPanel
  src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/docs/videos/flight.mp4"
  loop
  autoPlay
/>

<br />
<br />

### Share and Reply

Agent TARS Web UI 默认支持将 Replay 保存到本地，也支持配置 [share.provider]() 来上传到你的服务端。

<Grid columns={2} gap="md">
  <GridItem>
    <img src="/share.png" alt="Trouble Shooting" className="w-full" />
  </GridItem>
  <GridItem>
    <VideoPanel
      src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zyha-aulnh/ljhwZthlaukjlkulzlp/docs/videos/share.mp4"
      loop
      autoPlay
    />
  </GridItem>
</Grid>

<br />
<br />


### Dark Mode Support

Agent TARS Web UI 支持 Dark 和 Light 两种模式，默认为 Dark 模式，当你的选择切换后，会自动保存在本地，并进行采纳：

import { Figure } from '@components/Figure';
import { Grid, GridItem } from '@components/Grid';

<Grid columns={2} gap="md">
  <GridItem>
    <Figure src="/web-ui.png" title="Figure 1: Agent TARS Web UI (Dark)" />
  </GridItem>
  <GridItem>
    <Figure src="/web-ui-light.png" title="Figure 2: Agent TARS Web UI (Light)" />
  </GridItem>
</Grid>

## 指南

### 自定义 Web UI

施工中
