b77.ai로 앱에 AI 기능 넣기

앱에 AI를 넣으려면 보통 모델 제공업체에 가입하고, 서버에 API 키를 저장하고, 키가 브라우저에 닿지 않도록 백엔드 엔드포인트를 만들어야 해요. builder77에서는 이미 다 되어 있어요. 모든 앱에 b77.ai.chat이 있고, 호출 비용은 앱 소유자의 연동 크레딧에서 차감돼요. 500토큰당 1크레딧(입력 + 출력, 호출당 최소 1)이에요.

기본 사용법

const reply = await b77.ai.chat('Suggest three names for a coffee shop by the sea');

const answer = await b77.ai.chat(
  [{ role: 'user', content: question }],
  { system: 'You are a friendly barista. Answer in two sentences.' }
);

한 번만 묻는 프롬프트라면 문자열을, 대화라면 메시지 배열을 넘기세요. 선택 사항인 system 지시문으로 말투와 규칙을 정해요.

json: true로 구조화된 출력 받기

쓸모 있는 AI 기능 대부분은 긴 문장이 필요하지 않아요. 화면에 보여 줄 데이터가 필요하죠. json: true를 설정하고 원하는 형태를 설명하면 파싱된 객체를 돌려받아요.

const recipe = await b77.ai.chat(
  `Create a recipe using: ${ingredients.join(', ')}.
   Return JSON: { "title": string, "minutes": number, "steps": string[] }`,
  { json: true }
);
renderRecipe(recipe);

잘 통하는 AI 기능 패턴 다섯 가지

• 요약: 긴 메모, 리뷰, 고객 문의를 짧게 줄여 페이지 맨 위에 보여 줘요.
• 분류: 들어온 양식 제출을 주제나 긴급도로 분류하고, b77.db.update로 라벨을 저장해요.
• 초안 작성: 상품 설명, SNS 게시물, 이메일 답장. 저장하기 전에 언제든 고칠 수 있게 해요.
• 추출: 자유롭게 쓴 글에서 날짜, 금액, 이름을 뽑아 필드에 넣어요.
• 도우미: 페이지 내용에 관한 질문에 답하는 작은 채팅 창이에요.

두 번 비용을 내지 않도록 결과 저장하기

호출은 토큰 단위로 계산돼요. 500토큰당 연동 크레딧 1개(입력 + 출력, 호출당 최소 1개)라서 일반적인 답변 하나에 3~4크레딧 정도 들어요. 자주 바뀌지 않는 결과(문서 요약, 레코드 태그)는 데이터베이스에 저장해 두고 원본이 바뀔 때만 다시 생성하세요.

if (!note.summary) {
  const summary = await b77.ai.chat(`Summarize in one sentence: ${note.body}`);
  await b77.db.update('notes', note.id, { summary });
}

기다림과 실패에 대비한 설계

AI 호출은 시간이 조금 걸리니 다른 네트워크 요청처럼 다루세요. 버튼을 비활성화하고, 로딩 상태를 보여 주고, 오류는 친절한 메시지로 처리하세요. b77.toast('Something went wrong', 'error')가 간단한 대비책이에요. builder77이 만드는 앱은 기본으로 이렇게 처리하지만, 기능을 직접 추가할 때는 확인해 보는 게 좋아요.

프롬프트를 기획서처럼 쓰기

앱을 만들 때의 조언은 앱 안의 프롬프트에도 그대로 적용돼요. 길이, 말투, 형식, 입력이 없거나 이상할 때 어떻게 할지를 구체적으로 적으세요.

너는 수제 도자기 가게의 상품 설명을 써. 최대 40단어. 따뜻하고 구체적으로, 최상급 표현은 쓰지 마. 입력에 정보가 부족하면 사실을 지어내지 말고 짧고 담백한 설명을 써.

AI 출력은 책임감 있게

• 특히 채팅 화면에서는 AI가 만든 내용이라는 것을 사용자에게 알려 주세요.
• AI 초안은 게시하거나 보내기 전에 사람이 검토하고 고칠 수 있게 하세요.
• 건강, 법률, 금융 질문에서 AI 출력을 최종 답으로 쓰지 마세요.
• 꼭 필요한 경우가 아니라면 민감한 개인정보를 프롬프트에 넣지 마세요.

builder77에게 만들어 달라고 하기

이 코드를 직접 쓸 일은 거의 없어요. “메모마다 태그를 추천하고 저장하는 AI 버튼을 추가해 줘”나 “메뉴에 관한 질문에 답하는 채팅 도우미를 넣어 줘” 같은 프롬프트를 써 보세요. 빌더가 b77.ai를 알고 있어서 화면, 로딩 상태, 저장까지 연결해 줘요.