AI 채팅 패널
AI 채팅은 AI와 대화하며 앱을 만드는 핵심 공간입니다.
구성 요소
대화 내역
이전 요청과 AI 응답
프롬프트 입력창
새로운 요청 입력
전송 버튼
프롬프트 전송 (Enter 또는 클릭)
+ 버튼
파일 업로드 메뉴
🎯 버튼
Visual Edit 모드 토글
페이지 칩
현재 작업 중인 페이지 경로
프롬프트 작성 가이드
좋은 프롬프트의 특징
구체적이고 명확할수록 원하는 결과를 얻습니다.
예시 비교
폼 만들어줘문제점: 어떤 폼인지, 어떤 필드가 필요한지 불명확
직원 등록 폼을 만들어줘.
필드:
- 이름 (필수, 텍스트)
- 이메일 (필수, 이메일 형식 검증)
- 부서 (드롭다운: 개발팀, 마케팅팀, 영업팀)
- 입사일 (날짜 선택)
제출 버튼은 파란색으로,
필수 필드 미입력 시 에러 메시지 표시장점: 필드, 타입, 검증, 디자인까지 명확
프롬프트 구조 템플릿
대화 내역
메시지 유형
User
내가 보낸 요청
Assistant
AI 응답
Tool Call
파일 생성/수정 작업
Error
오류 발생
Aborted
중단된 요청
Tool Call 메시지
AI가 파일을 수정할 때 표시됩니다.
파일 경로: 수정된 파일 위치
수정 라인: 변경된 코드 라인 수
미리보기: 변경된 코드 일부
후속 제안 (Follow-up Suggestions)
AI 응답 후 관련 후속 작업을 제안합니다.
클릭하면 해당 프롬프트가 자동 입력됩니다.
파일 업로드
업로드 방법
+ 버튼 클릭 → 파일 선택
드래그 앤 드롭: 파일을 입력창에 드롭
붙여넣기: 클립보드 이미지 Ctrl+V
지원 파일 형식
이미지
PNG, JPG, GIF, WebP
문서
PDF, Word (.docx), Excel (.xlsx)
텍스트
TXT, CSV
활용 예시
Visual Edit 토글
🎯 버튼을 클릭하면 Visual Edit 모드가 활성화됩니다.
활성화 시 변화
Preview에서 요소 클릭 가능
선택한 요소 정보가 Chat에 표시
해당 요소에 대한 수정 요청 가능
선택된 요소 칩
태그명: 선택된 HTML 요소
파일 위치: 해당 코드의 파일과 라인 번호
→ Visual Edit Mode 상세
페이지 칩
현재 Preview에서 보고 있는 페이지 경로를 표시합니다.
다중 페이지 앱에서 AI가 어떤 페이지를 수정해야 하는지 알 수 있습니다.
생성 중단
AI가 응답을 생성하는 중에 Stop 버튼을 클릭하면 중단됩니다.
생성 중이던 내용은 일부만 적용될 수 있음
중단 후 새로운 요청 가능
팁
마지막 업데이트