코알못입니다. Next.js + OpenAI 챗봇 프로젝트 - API 응답은 오는데 UI에 메시지가 안 보입니다

Question

저는 코알못입니다.chatgpt ai와 함께 개인화된 챗봇을 만들기 위해 여러가지를 3일동안 해봤는데 안되어서 ai가 아닌 고수분들의 도움을 요청드립니다.다음은 ai가 정리한 현재의 상황입니다. 참고해주세요.본문:안녕하세요!Next.js와 OpenAI API를 사용해 브라우저 기반 챗봇을 실험하고 있는 초보 개발자입니다.Vercel에 배포했고, API 응답은 확인되는데… UI에 메시지가 전혀 표시되지 않는 현상이 발생해서 도움을 요청드립니다!🧩 현재 상황/api/chat 라우트로 POST 요청 시, 응답은 정상적으로 오고 JSON 구조도 확인했습니다 (F12 → Network).응답 포맷 예:json복사편집{ id: "xxxx", role: "assistant", parts: [{ "type": "text", "text": "하영이에요~!" }] }하지만 클라이언트 UI에는 메시지가 출력되지 않음→ 상태 갱신 또는 렌더링 문제로 의심 중입니다.⚙️ 구성 요약Frontend: Next.js (App Router)서버 API: /app/(chat)/api/chat/route.ts → OpenAI API 호출 후 응답 가공호스팅: Vercel상태 관리: createAI()로 초기 상태 설정ts복사편집initialAIState: { messages: [ { id: nanoid(), role: 'assistant', content: '안녕하세요!', } ] }→ 여기서 content 필드를 사용했는데, 서버는 parts 필드로 응답해서 불일치 의심 중입니다.❓ 궁금한 점message.parts 형식으로 응답이 오는데, 클라이언트에서 content를 기준으로 렌더링하고 있어서 생기는 문제일까요?createAI()나 useAIState() 사용 시, parts 포맷을 어떻게 다뤄야 할까요?이 외에 다른 렌더링 문제일 가능성도 있을까요?🆘 시도해 본 것Postman으로 API 테스트 → 응답 OKF12 콘솔에서 message 로그 찍어봄 → 내용이 아예 안 나옴빌드 로그 오류 없음 (Vercel 기준)조금 복잡한 상황이지만… 혹시 유사한 문제를 겪으셨거나, 조언 주실 수 있는 분 계실까요?소중한 의견 감사드립니다! 🙏실제코드는 제대로 첨부된것 같지 않은데.. 이정도면 상황을 파악하실수 있나요? 도움 부탁드립니다.

ㅇㅅㄱ · Answer

파악 안됩니다. 실제 코드 주세요포스트맨에서 같은 리퀘스트로 요청했을 때 정상 응답했으면 프론트 문제겠죠 뭐...

kenu,전독시 · Answer

이 영상이 도움이 되면 좋겠습니다.https://www.youtube.com/watch?v=e1Kyv2J38YE

더미 · Answer

코딩을 전혀 모른다면 공부해보란 말밖에 할게 없습니다..

CodeJohnWick · Answer

여기서 content 필드를 사용했는데, 서버는 parts 필드로 응답해서 불일치 의심 중입니다.이 내용을 확인해보셨나요.서버는 parts로 응답을 하는데 클라이언트는 content로 이용하지 않나요?content로 응답하니까 parts를 content로 변환해보세요 응답이 잘 나온다는 건 저장은 잘되는데 그걸 못써먹고 있다는 거 아니겠나요.그렇다면 받을 클라이언트의 상태 값도 한 번 추가로 넣으셔서 확인해보시면 될 거 같은데요.

zoo**** · Answer

vercel ai 라이브러리 이용해서 구현하세요. vercel ai chatbot 구글검색해보면 오픈소스로 깃허브에 예제도 올라와있습니다

코알못입니다. Next.js + OpenAI 챗봇 프로젝트 - API 응답은 오는데 UI에 메시지가 안 보입니다

5개의 답변

Q&A 목록