작업실 옆 메모장

LLM을 처음 써보면서 모델 이름과 입력 텍스트만 보냈었고,조금 더 정밀하게 답변을 제어하고 싶어서 옵션을 추가해봤었습니다. 이전 프로젝트:https://devbrew.tistory.com/120 [Next.js] 개인 프로젝트 - AI 원두 설명기 제작 (1)저는 카페를 참 좋아하고, 필터 커피를 좋아하고, 원두 설명지 보는 것을 좋아하는데요.원두가 이름과 설명이 복잡하다보니 주변에서 필터 커피 자체를 어렵게 느끼는 분들이 많았고,메뉴판에devbrew.tistory.com 직접 만든 커피 원두 설명기 프로젝트에서도 답변이 매번 달라지고 길이도 제각각이었는데옵션을 적절하게 추가해주니 원하는 답변을 비교적 일관되게 받을 수 있었죠. 이번 글에서는 Responses API 를 기준으로,앞으로도 자주 사용할법..

이전 글에서 원두 설명기를 실제 카페에서 제공 받는 원두 설명지를 기준으로 제작을 해봤고,사실과 다른 정보들이 등장해 문제가 있었습니다. 이전 글:https://devbrew.tistory.com/123 [Next.js] 개인 프로젝트 - AI 원두 설명기 제작 (2)(문제 발생)이전 글에서 OpenAI 가 원두 제품명만 하드 코딩해도 제법 정보를 설명해주는 것을 확인했습니다 ! 이전 글:https://devbrew.tistory.com/120 [Next.js] 미니 프로젝트 - AI 원두 설명기 제작 (1)저는 카페를 참devbrew.tistory.com 그래서 다시 생각을 해보니,이 정보들은 카페든 온라인 원두 판매 페이지든 어차피 제공될 명확한 정보인데,사용자 입장에서 AI 요약으로 이 정보들이 굳..

이전 글에서 OpenAI 가 원두 제품명만 하드 코딩해도 제법 정보를 설명해주는 것을 확인했습니다 ! 이전 글:https://devbrew.tistory.com/120 [Next.js] 미니 프로젝트 - AI 원두 설명기 제작 (1)저는 카페를 참 좋아하고, 필터 커피를 좋아하고, 원두 설명지 보는 것을 좋아하는데요.원두가 이름과 설명이 복잡하다보니 주변에서 필터 커피 자체를 어렵게 느끼는 분들이 많았고,메뉴판에devbrew.tistory.com 이제 이 답변에서 어떤 정보를 표시할지, 또 어떻게 요약해서 보여줄지를 고민해봤습니다. 1. 어떤 정보를 표시할지 고민하기우선, 카페에서 일반적으로 받게되는 원두 설명지를 다시 한 번 살펴봤습니다. 항목 별로 국가, 지역, 농장(농부), 고도, 품종, 가공 방식..

저는 카페를 참 좋아하고, 필터 커피를 좋아하고, 원두 설명지 보는 것을 좋아하는데요.원두가 이름과 설명이 복잡하다보니 주변에서 필터 커피 자체를 어렵게 느끼는 분들이 많았고,메뉴판에는 이름만 있는 경우도 있어서, 저 역시도 사장님께 물어보는 경우가 많았습니다. 그러다 이번에 OpenAI 를 공부하면서 문득 생각이 들었습니다.'AI가 원두 이름만 입력해주면 요약해서 설명해줄 수 있으면 좋겠다 !'흥미롭게도 원두는 이름 자체에 많은 주요 정보가 포함되있어 결과를 기대할 수 있었습니다. 그래서, 우선 이전에 공부한 것을 토대로 하드 코딩하는 방식의 틀을 구현해봤습니다. 서버 Route )import OpenAI from "openai";const client = new OpenAI({ apiKey: proc..

이전 글에서 규칙을 추가해 일관된 응답과 원하는 형식으로 답변하도록 만들어봤습니다.이번에는 공식적으로 지원되는 OpenAI 옵션을 추가하여 응답의 성격을 제어해보겠습니다. 이전 글:https://devbrew.tistory.com/116 Next.js 에서 OpenAI 에 규칙을 추가해 일관된 응답 만들기이전 글에서 사용자가 입력한 프롬프트를 그대로 모델에 전달했다면,이번에는 규칙을 추가해 모델이 조금 더 일관된 톤과 형식으로 응답하도록 만들어보겠습니다. 이전 글:https://devbrew.tistory.comdevbrew.tistory.com 1. 규칙과 옵션의 다른 점규칙은 형식이나 방향 같은 것을 어떻게 답변해야 하는지 텍스트로 지시하는거라면,옵션은 모델이 어떤 방식으로 생성할지를 response..

이전 글에서 사용자가 입력한 프롬프트를 그대로 모델에 전달했다면,이번에는 규칙을 추가해 모델이 조금 더 일관된 톤과 형식으로 응답하도록 만들어보겠습니다. 이전 글:https://devbrew.tistory.com/114 Next.js에서 OpenAI 랑 프롬프트 입력 연동하기이전 글에 이어서 사용자 입력을 그대로 프롬프트로 전달해,모델이 해당 내용을 반영해 답하도록 만들어보겠습니다. 이전 글:https://devbrew.tistory.com/113 Next.js에서 OpenAI 연동 및 UI 구현 기초 가이devbrew.tistory.com 1. 서버에 규칙 추가하기규칙은 서버 Route 에만 보관해 외부에 노출되지 않도록 하는 것을 권장합니다.import OpenAI from "openai";const..

이전 글에 이어서 사용자 입력을 그대로 프롬프트로 전달해,모델이 해당 내용을 반영해 답하도록 만들어보겠습니다. 이전 글:https://devbrew.tistory.com/113 Next.js에서 OpenAI 연동 및 UI 구현 기초 가이드OpenAI 에 가입하고 API 키를 발급 받았다면 이제 실제로 사용을 해볼 차례입니다.다행히도 OpenAI에서도 빠르게 시작할 수 있는 Developer Quickstart 가이드를 제공해줍니다.https://platform.openai.com/docs/quickdevbrew.tistory.com 구성은 다음과 같습니다.클라이언트: textarea에 프롬프트 입력 → 버튼 클릭 시 /api/openai로 POST서버(Route): 요청 본문에서 prompt만 받고 Op..

OpenAI 에 가입하고 API 키를 발급 받았다면 이제 실제로 사용을 해볼 차례입니다.다행히도 OpenAI에서도 빠르게 시작할 수 있는 Developer Quickstart 가이드를 제공해줍니다.https://platform.openai.com/docs/quickstart?lang=javascript 이 글에서는 해당 메뉴얼을 기반으로 내용을 조금 보완해Next.js 환경에서 OpenAI API를 연동하는 기초 가이드를 작성해보고자 합니다. 1. OpenAI 설치 및 API 키 설정먼저 OpenAI SDK 를 설치합니다.npm i openai 이후 발급받은 API 키를 안전하게 저장하기 위해,프로젝트 루트에 .env.local 파일을 만들고 아래 같이 작성합니다.OPENAI_API_KEY=sk-... ..