Frontend Kit: Adding an AI Chat Feature with Gemma 3 27B

Frontend Kit is a PWA web app I built for studying frontend interview questions as flashcards.

To study interview questions, I used to bookmark well-organized GitHub repositories and blogs and study from them. To make studying easier on mobile, I reorganized that material into a card-based UI.

The first version was built around review.

• Flip through cards by swiping or with buttons
• Answers revealed with a slide animation
• Filter by 6 topics (CS, HTML/CSS, JavaScript, React, data structures, algorithms)
• Random shuffle mode
• Dark mode / light mode
• Text size (small / medium / large)
• Keyboard shortcuts (← →, Space / Enter)
• PWA support (add to home screen, offline access)

But as I used it, one limitation became clear.

When I needed a deeper explanation while studying, I had to leave the app to search, or open a separate AI app.

To solve this, I added an in-app AI chat feature.

How I chose the AI model

I went through Google's Gemini API and compared several models.

At first, I mainly considered Gemini 2.5 Flash, the model used in a project I had looked at for reference.

That was because it responds quickly and is relatively light to use.

But on a free account, it was limited to 20 requests per day.

A study tool is built around users asking many questions and reviewing again and again, so I judged that this limit could become a clear constraint on running the service.

On the other hand, the Gemma 3 27B model could handle about 14.4K (14,400) requests per day, so I judged it a better fit for letting users ask questions without worrying.

In the end, I chose the Gemma 3 27B model.

Differences between Gemini 2.5 Flash and Gemma 3 27B

Here is the biggest difference I noticed while using the two models.

Gemini 2.5 Flash lets you set a systemInstruction separately, but Gemma 3 27B doesn't support it directly.

So instead of passing the system prompt as an option, I put it directly into the first turn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25const BASE_SYSTEM_PROMPT = `당신은 프론트엔드 개발자 면접 준비를 돕는 AI 튜터입니다.
JavaScript, React, CSS, CS, 자료구조, 알고리즘 등 프론트엔드 관련 개념에 대해 명확하고 이해하기 쉽게 설명해 주세요.
간결하게 답변하되, 필요한 경우 코드 예시를 포함하세요.
항상 한국어로 답변해 주세요.`;

const systemPrompt = cardContext
  ? `${BASE_SYSTEM_PROMPT}

현재 사용자가 학습 중인 플래시카드:
질문: ${cardContext.question}
답변: ${cardContext.answer}`
  : BASE_SYSTEM_PROMPT;

// Gemma doesn't support systemInstruction,
// so inject systemPrompt directly into the first turn
const contents = [
  { role: "user" as const, parts: [{ text: systemPrompt }] },
  { role: "model" as const, parts: [{ text: "알겠습니다. 프론트엔드 면접 준비를 도와드리겠습니다." }] },
  { role: "user" as const, parts: [{ text: message }] },
];

const response = await ai.models.generateContent({
  model: "gemma-3-27b-it",
  contents,
});

When I actually tested it, the answer quality was more consistent than I expected, and the answers were good enough to use as a study aid.

An unexpected billing issue

While I was getting an API key and setting up Cloud Console, my account was unintentionally switched to a paid plan (Tier 1).

I had only sent 7 questions as a quick test, but the next day I found a charge of 13 won (KRW).

Luckily, I noticed the problem quickly, deleted the project, and set it up again on a free account, so it didn't turn into bigger charges.

If you're using this post as a reference, I recommend that you be sure to check whether your account is on a free or paid plan before using the API!

Reflections

I was able to put together this project's initial questions because 이준희, the author of prepare_frontend_interview, a GitHub repository I often referred to, kindly gave me permission to use it.

I was also inspired by an AI project I saw on LinkedIn that automatically draws a flow chart when you type in business logic. It made me think, "Could I bring AI into a study tool too?"

Before starting this project, I thought any feature built on an AI API was something that costs money.

But using the Gemini API, I saw firsthand that it can be built well within the free plan.

GitHub

GitHub - umsungjun/frontend-kit: A flashcard web app for frontend developer interview prep

Frontend Developer Interview Prep | Frontend Kit

Frontend Developer Interview Prep | Frontend Kit