Krave
How to Setup Your AI Frontend

State Management

Using Zustand to manage application state and connect it seamlessly to the frontend UI.

Installation

npm install zustand

State Management

src/app/state/use-store-ai.ts
import { create } from "zustand";

interface Assistant {
    role: 'user' | 'assistant';
    content: string;
}

interface GeminiState {
    isGenerating: boolean
    messages: Assistant[],
    generateResponse: (prompt: string) => Promise<void>
}

export const UseAiStore = create<GeminiState>((set, get) => ({
    isGenerating: false,
    messages: [],

    generateResponse: async (prompt: string) => {
        const trimmedPrompt = prompt.trim();
        if (!trimmedPrompt) return;

        set((state) => ({
            isGenerating: true,
            messages: [...state.messages, { role: 'user', content: trimmedPrompt }]
        }))

        try {
            const res = await fetch("/api/gemini", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ prompt }),
            })

            const generatedResponse = await res.json();
            const text = generatedResponse.text.replace(/\*/g, '') || '';

            set((state) => ({
                isGenerating: false,
                messages: [...state.messages, { role: 'assistant', content: text }]
            }));
        } catch (error) {
            console.log(error)
            set((state) => ({
                isGenerating: false,
                messages: [...state.messages, { role: 'assistant', content: "Something went wrong. Please try again later." }]
            }));
        } finally {
            set({ isGenerating: false });
        }
    }
}));

On this page