Build a React AI Chatbot with Guided Tutorial

Try Code

    npm create vite@latest

Try Code

    cd your-project-name
    npm install
    npm run dev

Try Code

    src/
      components/
      AppName.tsx
      Headings.tsx
      SearchBar.tsx
      Button.tsx
      Chat.tsx

Try Code

    VITE_GROQ_API_KEY=your_groq_api_key

Try Code

    const apiKey = import.meta.env.VITE_GROQ_API_KEY;

Try Code

    export const fetchGroqResponse = async (prompt: string): Promise<string> => {
      const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${import.meta.env.VITE_GROQ_API_KEY}`,
        },
        body: JSON.stringify({
          model: "mixtral-8x7b-32768",
          messages: [{ role: "user", content: prompt }],
        }),
      });

      const data = await response.json();
      return data.choices[0].message.content;
    };

Try Code

    import { useState } from "react";

    export const SearchBar = ({ onSend }: { onSend: (msg: string) => void }) => {
      const [input, setInput] = useState("");

      const handleSubmit = () => {
        onSend(input);
        setInput("");
      };

      return (
        <div>
          <input value={input} onChange={(e) => setInput(e.target.value)} />
          <button onClick={handleSubmit}>Send</button>
        </div>
      );
    };

Try Code

    const loadHistory = () => {
      const saved = localStorage.getItem("chat_history");
      return saved ? JSON.parse(saved) : [];
    };

    const saveHistory = (history: string[]) => {
      localStorage.setItem("chat_history", JSON.stringify(history));
    };

Try Code

    export const Chat = ({ messages }: { messages: string[] }) => (
      <div>
        {messages.map((msg, idx) => (
          <p key={idx}>{msg}</p>
        ))}
      </div>
    );

Try Code

    function App() {
      const [messages, setMessages] = useState<string[]>(loadHistory());

      const handleSend = async (msg: string) => {
        const aiResponse = await fetchGroqResponse(msg);
        const updated = [...messages, `You: ${msg}`, `AI: ${aiResponse}`];
        setMessages(updated);
        saveHistory(updated);
      };

      return (
        <div>
          <SearchBar onSend={handleSend} />
          <Chat messages={messages} />
        </div>
      );
    }