AI 채팅 패널

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

---

구성 요소

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

---

프롬프트 작성 가이드

좋은 프롬프트의 특징

구체적이고 명확할수록 원하는 결과를 얻습니다.

예시 비교

❌ 나쁜 예

폼 만들어줘

문제점: 어떤 폼인지, 어떤 필드가 필요한지 불명확

✅ 좋은 예

프롬프트 구조 템플릿

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

필요한 기능:
- 기능 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

활용 예시

디자인 참고

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

데이터 구조 참고

기획서 참고

---

Visual Edit 토글

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

활성화 시 변화

• Preview에서 요소 클릭 가능

• 선택한 요소 정보가 Chat에 표시

• 해당 요소에 대한 수정 요청 가능

선택된 요소 칩

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

• 태그명: 선택된 HTML 요소

• 파일 위치: 해당 코드의 파일과 라인 번호

→ Visual Edit Mode 상세

---

페이지 칩

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

📄 /employees

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

---

생성 중단

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

• 생성 중이던 내용은 일부만 적용될 수 있음

• 중단 후 새로운 요청 가능

---

팁

프롬프트 히스토리

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