> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/editor/ai-chatting.md).

# AI 채팅 패널

AI 채팅은 AI와 대화하며 앱을 만드는 핵심 공간입니다.

***

### 구성 요소

| 요소           | 설명                    |
| ------------ | --------------------- |
| **대화 내역**    | 이전 요청과 AI 응답          |
| **프롬프트 입력창** | 새로운 요청 입력             |
| **전송 버튼**    | 프롬프트 전송 (Enter 또는 클릭) |
| **+ 버튼**     | 파일 업로드 메뉴             |
| **🎯 버튼**    | Visual Edit 모드 토글     |
| **페이지 칩**    | 현재 작업 중인 페이지 경로       |

***

### 프롬프트 작성 가이드

#### 좋은 프롬프트의 특징

{% hint style="success" %}
**구체적**이고 **명확**할수록 원하는 결과를 얻습니다.
{% endhint %}

#### 예시 비교

{% tabs %}
{% tab title="❌ 나쁜 예" %}

```
폼 만들어줘
```

**문제점**: 어떤 폼인지, 어떤 필드가 필요한지 불명확
{% endtab %}

{% tab title="✅ 좋은 예" %}

```
직원 등록 폼을 만들어줘.

필드:
- 이름 (필수, 텍스트)
- 이메일 (필수, 이메일 형식 검증)
- 부서 (드롭다운: 개발팀, 마케팅팀, 영업팀)
- 입사일 (날짜 선택)

제출 버튼은 파란색으로,
필수 필드 미입력 시 에러 메시지 표시
```

**장점**: 필드, 타입, 검증, 디자인까지 명확
{% endtab %}
{% endtabs %}

#### 프롬프트 구조 템플릿

```
[무엇을] 만들어줘/수정해줘/추가해줘

필요한 기능:
- 기능 1
- 기능 2
- 기능 3

디자인/스타일:
- 색상, 레이아웃 등

동작:
- 버튼 클릭 시 어떤 일이 일어나는지
- 에러 처리 방법
```

***

### 대화 내역

#### 메시지 유형

| 유형        | 설명          |
| --------- | ----------- |
| User      | 내가 보낸 요청    |
| Assistant | AI 응답       |
| Tool Call | 파일 생성/수정 작업 |
| Error     | 오류 발생       |
| Aborted   | 중단된 요청      |

#### Tool Call 메시지

AI가 파일을 수정할 때 표시됩니다.

* **파일 경로**: 수정된 파일 위치
* **수정 라인**: 변경된 코드 라인 수
* **미리보기**: 변경된 코드 일부

#### 후속 제안 (Follow-up Suggestions)

AI 응답 후 관련 후속 작업을 제안합니다.

```
🔹 "테이블에 페이지네이션 추가"
🔹 "검색 필터 기능 추가"
🔹 "모바일 반응형 적용"
```

클릭하면 해당 프롬프트가 자동 입력됩니다.

***

### 파일 업로드

#### 업로드 방법

1. **+ 버튼** 클릭 → 파일 선택
2. **드래그 앤 드롭**: 파일을 입력창에 드롭
3. **붙여넣기**: 클립보드 이미지 Ctrl+V

#### 지원 파일 형식

| 유형      | 형식                               |
| ------- | -------------------------------- |
| **이미지** | PNG, JPG, GIF, WebP              |
| **문서**  | PDF, Word (.docx), Excel (.xlsx) |
| **텍스트** | TXT, CSV                         |

#### 활용 예시

{% tabs %}
{% tab title="디자인 참고" %}

```
[이미지 업로드]
이 디자인을 참고해서 비슷한 스타일로 만들어줘.
색상과 레이아웃을 최대한 따라해줘.
```

{% endtab %}

{% tab title="데이터 구조 참고" %}

```
[Excel 업로드]
이 엑셀 파일의 컬럼 구조를 기반으로
입력 폼과 테이블을 만들어줘.
```

{% endtab %}

{% tab title="기획서 참고" %}

```
[PDF 업로드]
이 기획서에 있는 화면을 구현해줘.
2페이지의 대시보드 화면부터 시작하자.
```

{% endtab %}
{% endtabs %}

***

### Visual Edit 토글

🎯 버튼을 클릭하면 Visual Edit 모드가 활성화됩니다.

#### 활성화 시 변화

* Preview에서 요소 클릭 가능
* 선택한 요소 정보가 Chat에 표시
* 해당 요소에 대한 수정 요청 가능

#### 선택된 요소 칩

```
🎯 <button> | src/App.js:42
```

* **태그명**: 선택된 HTML 요소
* **파일 위치**: 해당 코드의 파일과 라인 번호

→ Visual Edit Mode 상세

***

### 페이지 칩

현재 Preview에서 보고 있는 페이지 경로를 표시합니다.

```
📄 /employees
```

다중 페이지 앱에서 AI가 어떤 페이지를 수정해야 하는지 알 수 있습니다.

***

### 생성 중단

AI가 응답을 생성하는 중에 **Stop 버튼**을 클릭하면 중단됩니다.

* 생성 중이던 내용은 일부만 적용될 수 있음
* 중단 후 새로운 요청 가능

***

### 팁

{% hint style="info" %}
**프롬프트 히스토리**

대화 내역을 스크롤하면 이전 요청을 확인할 수 있습니다. 비슷한 요청을 다시 할 때 참고하세요.
{% endhint %}