import { NextRequest, NextResponse } from "next/server";
import { GoogleGenAI } from "@google/genai";

const ERROR_MESSAGE_500 = { error: "Erro ao gerar mensagem. Verifique sua chave ou modelo." };
const MODEL = "gemini-2.0-flash";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });

export async function POST(req: NextRequest) {
  const { message: contents } = await req.json();
  try {
    const result = await ai.models.generateContent({
      model: MODEL,
      contents,
    });
    return NextResponse.json(result.text);
  } catch (err) {
    console.error("Error:", err);
    return NextResponse.json(ERROR_MESSAGE_500, { status: 500 });
  }
}

import ReactMarkdown from "react-markdown";

const ChatMessage = ({
  message,
  isUser,
}: {
  message: string;
  isUser: boolean;
}) => {
  return (
    <div className={`flex ${isUser ? "justify-end" : "justify-start"} mb-4`}>
      <div
        className={`p-3 rounded-lg max-w-xs prose ${
          isUser ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
        }`}
      >
        <ReactMarkdown>{message}</ReactMarkdown>
      </div>
    </div>
  );
};

export default ChatMessage;

import { useRef, useState } from "react";
import ChatMessage from "./ChatMessage";
import { Button } from "./ui/button";
import { Card, CardContent, CardTitle } from "./ui/card";
import { Input } from "./ui/input";

type Msg = { message: string; isUser: boolean };

const Chat = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [messages, setMessages] = useState<Msg[]>([]);

  const handleSendMessage = (message: string | undefined) => {
    if (!message) return;
    setMessages((prev) => [...prev, { message, isUser: true }]);
    inputRef.current!.value = "";
    fetch("/api/gemini", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message }),
    })
      .then((res) => res.json() as Promise<string>)
      .then((message) => {
        setMessages((prev) => [...prev, { message, isUser: false }]);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  };

  return (
    <Card className="mb-4 max-h-[90vh] flex flex-col">
      <CardContent className="flex flex-col max-h-[85vh]">
        <CardTitle className="pb-2">Converse com gemini</CardTitle>
        <div className="flex flex-col overflow-y-scroll mb-4">
          {messages.map(({ message, isUser }, index) => (
            <ChatMessage message={message} isUser={isUser} key={index} />
          ))}
        </div>
        <form
          className="flex gap-2"
          onSubmit={(e) => {
            e.preventDefault();
            handleSendMessage(inputRef.current?.value);
          }}
        >
          <Input
            type="text"
            placeholder="Digite sua mensagem..."
            className="mb-4"
            ref={inputRef}
          />
          <Button className="bg-blue-500 text-white">Enviar</Button>
        </form>
      </CardContent>
    </Card>
  );
};

export default Chat;

git clone https://github.com/your-username/chat-next-gemini.git
cd chat-next-gemini
npm install

GEMINI_API_KEY=tua-chave-aqui

npm run dev