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 zustandState Management
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 });
}
}
}));