AI 요금을 고객이 내게 하는
원가 0원 서비스

You are building a complete, production-ready web service. Follow this spec exactly. If a major decision is not covered, ask me before deciding. # PROJECT: MyGPT — a BYOK (bring-your-own-key) AI chat service (a mini TypingMind) ## What it does The user pastes their own Gemini API key, sets a system prompt (the AI's persona), and chats with streaming responses. Conversations are saved locally. The whole point: the AI cost is paid by the user (BYOK), so our cost is ~zero. ## Tech stack — keep it simple - Next.js 14+ (App Router) + TypeScript + Tailwind CSS. One repo, deployable to Vercel as-is. - No database, no login. All state (API key, conversations, settings) in the browser (localStorage). - One API route: /api/chat. It only proxies the streaming request to Gemini — it must NOT store or log the key. ## BYOK — the single most important rule - The user's Gemini API key is stored ONLY in localStorage on the client. - On each request the client sends the key to /api/chat; the server uses it for that one call and never stores or logs it. - If no key is set, show a friendly Korean onboarding: input field + link to https://aistudio.google.com/apikey labeled "무료 Gemini API 키 발급 (1분)", and one line: "요금은 본인 키로 청구됩니다". ## Chat — exact requirements (streaming, the SDK is new — don't improvise) - Install: npm i @google/genai - /api/chat runs on Node runtime: at the top add export const runtime = 'nodejs' and export const maxDuration = 60 - Stream with the official SDK: import { GoogleGenAI } from '@google/genai'; const ai = new GoogleGenAI({ apiKey }); // the user's key from the request body const stream = await ai.models.generateContentStream({ model: 'gemini-2.5-flash', config: { systemInstruction: systemPrompt }, contents: messages.map(m => ({ role: m.role === 'assistant' ? 'model' : 'user', parts: [{ text: m.content }] })), }); // pipe each chunk (chunk.text) to the client as it arrives (ReadableStream / Server-Sent Events) - The client renders tokens as they stream in, with markdown + code-block highlighting and a copy button on code blocks. - Errors in Korean: ① 키 없음/잘못됨 ② 무료 쿼터 초과 ③ 네트워크 실패. On an invalid-key error, point the user back to the key input. ## UI — all copy in Korean. Design: clean, dark, chat-app feel, Pretendard 1. Left sidebar: "새 대화" button, conversation list (title = first user message, click to reopen), settings (API key input, system prompt textarea, model note). 2. Main: message thread (user right / AI left), streaming assistant bubble, input box with send + Shift+Enter for newline, stop button while streaming. 3. Empty state: a hero explaining "당신의 키로, 당신만의 AI. 요금은 당신이 냅니다 (원가 0)". 4. Persona presets to showcase specialization: 마케팅 카피 / 코드 리뷰 / 이메일 답장 / 번역 — clicking one fills the system prompt. ## Quality bar - Mobile responsive. Conversations persist across reloads (localStorage). Never lose the current draft. - Clean components, Korean comments, a README with setup + Vercel deploy, and a .env.example (note: no server-side key needed — it's BYOK). - Make it crystal clear in the UI that the key never leaves the user's browser except to call Gemini. ## Working style Build in this order and after each step show me how to run and verify: 1) Scaffold + sidebar/main layout 2) API key onboarding + localStorage 3) /api/chat streaming with the user's key 4) Chat thread + markdown + streaming render 5) Conversation save/load 6) System prompt + persona presets 7) polish Never store or log the user's key. Start with step 1 now.