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

> Agent Chat 화면의 3개 주요 영역 (사이드바 / 채팅 영역 / 모델 선택기) + 하단 툴바 + 사용자 메뉴

# Ui

# 기본 화면 구성

**경로**: Agent Chat 화면 영역별 안내

Agent Chat 화면은 크게 3개 영역으로 구성되며, 하단 툴바(12 패널)와 사용자 메뉴가 연동됩니다.

<Frame>
  <img src="https://mintcdn.com/dnotitia-328335e7/3mgjFAVO5t1rKplH/images/image-21.png?fit=max&auto=format&n=3mgjFAVO5t1rKplH&q=85&s=7ec1f625be963da0dd729190e4ee26eb" alt="Image" width="2154" height="1626" data-path="images/image-21.png" />
</Frame>

## 영역 가이드

| 영역       | 페이지                                                        |
| -------- | ---------------------------------------------------------- |
| ① 사이드바   | [사이드바](/agent-chat/ui/sidebar)                             |
| ② 채팅 영역  | [채팅 영역](/agent-chat/ui/chat-area)                          |
| ③ 모델 선택기 | [모델 선택기](/agent-chat/ui/model-selector)                    |
| ④ 하단 툴바  | [하단 툴바](/agent-chat/toolbar) — 12개 기능 패널 (Remote Hosts 포함) |

<Info>
  **Remote Hosts** 는 하단 툴바 **\[5] Remote Hosts (Bash)** 패널에서 관리합니다. 자세한 내용은 [Remote Hosts (Bash)](/agent-chat/toolbar/remote-hosts) 참고.
</Info>

<CardGroup cols={2}>
  <Card title="채팅 인터페이스" href="/agent-chat/ui/chat-area">
    메시지 입력, 세션 정보, 메시지 액션
  </Card>

  <Card title="모델 선택기" href="/agent-chat/ui/model-selector">
    채팅창 우하단 모델 선택기 — 사용 가능 LLM 중 선택 + 모델별 단가에 따른 과금 연결
  </Card>

  <Card title="Search (검색)" href="/agent-chat/ui/search">
    현재 Workspace의 채팅 메시지를 **의미 기반(벡터 유사도)** 으로 검색합니다
  </Card>

  <Card title="사이드바" href="/agent-chat/ui/sidebar">
    Agent Chat 좌측 사이드바 — 채팅 히스토리, 세션 관리, Workspace 전환, 사용자 메뉴
  </Card>

  <Card title="Tool Call (도구 호출 표시)" href="/agent-chat/ui/tool-call">
    에이전트가 채팅 중 도구(MCP tool)를 호출할 때 대화창에 나타나는 Tool Call 카드
  </Card>
</CardGroup>

## 관련 문서

* [Agent Chat (에이전트 채팅)](/)
* [조합 레시피](/agent-chat/recipes)
* [하단 툴바](/agent-chat/toolbar)
* [사용자 메뉴](/agent-chat/user-menu)