DEV Community: Analise Burtet

✅ Crie uma to-do list com next, gemini, zustand, shadcn e tailwind 🐻

Analise Burtet — Fri, 25 Apr 2025 11:55:21 +0000

Um dos primeiros projetos que toda pessoa desenvolvedora cria é uma to-do list. Mas essa não é mais uma to-do e sim uma que tem:

integração com api (Gemini pra gerar emojis)
gerenciamento de estado com zustand 🐻,
utilização de componentes prontos com shadcn
armazenamento dos estados no local storage 💿

Ou seja, o projeto completo pra tu iniciar teus estudos em desenvolvimento frontend.

Te sugiro tentar desenvolver do zero a tua, e se precisar pode usar o código do meu repo pra consulta.

👩🏻‍💻 repositório no github:

https://github.com/analiseburtet/to-do-list

💬 feedbacks e comentários:

Caso tenha alguma sugestão pode deixar aqui nos comentários ou no repo. Se precisar de ajuda pra desenvolver a tua, conte comigo!

🚀 Chat Next Gemini – Uma Interface de Chat com IA usando Next.js, Gemini API e Tailwind

Analise Burtet — Mon, 21 Apr 2025 16:04:09 +0000

Olá pessoal, tudo bem? Hoje eu trouxe uma integração com o gemini e next pra criar um simples chat funcional e responsivo. A ideia aqui é fazer algo que seja simples de entender e implementar pra ser um dos teus primeiros projetos usando Gemini API.

🛠️ Tecnologias usadas:

⚡ Next.js
🎨 TailwindCSS – estilização moderna e responsiva
💬 Gemini API – modelo de linguagem da Google
💻 TypeScript – segurança e escalabilidade

Pra tu poder implementar esse projeto, pode dar fork no meu projeto no github aqui -> repo
e criar tua chave de api no -> aistudio

depois cria um arquivo chamado .env.local e coloca essa chave que foi gerada lá.

GEMINI_API_KEY=tua-chave-aqui

🧐 analisando o projeto:

src/app/api/gemini/route.ts

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

Para que esse arquivo funcione, tu precisou usar o npm install @google/genai. O await ai.models.generateContent é a função que vai se comunicar com a api e trazer o conteúdo gerado de volta pra ti. Nela tu vai informar o model do gemini api que está usando, nesse caso a gente utilizou o gemini-2.0-flash.

src/components/ChatMessage.tsx

Já o componente ChatMessage é bem simples, sua função é saber se a mensagem foi gerada pela api ou pela usuária:

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;

importante: ele também utiliza esse ReactMarkdown pra interpretar e deixar a UI bonitinha com o que foi recebido em markdown.

Por fim: src/components/Chat.tsx

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;

Aqui nesse componente é onde as mensagens são digitadas, enviadas, recebidas e passadas pro ChatMessage.
o handleSendMessage é quem controla isso basicamente. Nele tu pode notar que existe controle de estado e chamada de api.

🤝 Contribuições:

O projetinho está bem simples e com potencial pra muitas features! Manda tua PR com algumas sugestões!

💬 Feedback:
Me chama aqui nos comentários, ou dá uma olhada no projeto completo no GitHub:

🔗 github.com/analiseburtet/chat-next-gemini

Crie seu primeiro projeto com Gemini: um gerador de bios para Instagram usando Next.js

Analise Burtet — Thu, 17 Apr 2025 12:17:11 +0000

Quer aprender como integrar a API Gemini da Google em um projeto real? Vamos construir um gerador de bios para Instagram com Next.js e IA generativa — simples, útil e divertido!

🧰 O que você vai usar:

Next.js (App Router)
Google AI SDK
Gemini 2.0 Flash
Tailwind CSS
Shadcn

🚀 Resultado final

Um formulário onde a usuária preenche nome e profissão, e recebe bios criativas para usar no Instagram, geradas por IA. Cada bio aparece em um card estilizado.

📦 Pré-requisitos

Conta Google
Acesso ao Google AI Studio
Chave da API Gemini
Projeto Next.js já configurado (pode usar npx create-next-app@latest)

Crie um arquivo .env.local com:

GEMINI_API_KEY=sua-chave-aqui

Instale o SDK:

npm install @google/genai

🧠 Criando a rota API com Gemini

Crie o arquivo app/api/generate-bio/route.ts:

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

const ERROR_MESSAGE_500 = {
  error: "Erro ao gerar bio. 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 { name, profession } = await req.json();

  try {
    const prompt = `Crie algumas bios criativa para Instagram com:
    - Nome: ${name}
    - Profissão: ${profession}
    Limite de 150 caracteres. E cada uma em um paragrafo separado.`;

    const result = await ai.models.generateContent({
      model: MODEL,
      contents: prompt,
    });

    const text = result.text?.split("\n").filter((bio) => bio.trim() !== "");

    return NextResponse.json({ bio: text });
  } catch (err) {
    return NextResponse.json(ERROR_MESSAGE_500, { status: 500 });
  }
}

🧾 Formulário para entrada de dados

Crie um componente Form.tsx:

"use client";

import { useRef } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";

interface FormProps {
  handleGeneratedBios: (bios: string[]) => void;
}

export default function Form({ handleGeneratedBios }: FormProps) {
  const nameInputRef = useRef<HTMLInputElement>(null);
  const professionInputRef = useRef<HTMLInputElement>(null);

  const fetchBios = async () => {
    const response = await fetch("/api/generate-bio", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: nameInputRef.current?.value || "",
        profession: professionInputRef.current?.value || "",
      }),
    });

    if (!response.ok) {
      console.error("Error generating bio");
      return;
    }

    const { bio } = await response.json();

    handleGeneratedBios(bio);
    if (nameInputRef.current) nameInputRef.current.value = "";
    if (professionInputRef.current) professionInputRef.current.value = "";
  };

  return (
    <form
      className="flex flex-col gap-4"
      onSubmit={(e) => {
        e.preventDefault();
        fetchBios();
      }}
    >
      <Input placeholder="Nome" ref={nameInputRef} />
      <Input placeholder="Profissão" ref={professionInputRef} />
      <Button type="submit">Gerar bio</Button>
    </form>
  );
}

🧠 Renderizando as bios em cards

Crie um componente GeneratedBios.tsx:

import { Card, CardContent } from "@/components/ui/card";

interface Props {
  generatedBios: string[];
}

export default function GeneratedBios({ generatedBios }: Props) {
  return (
    <div className="flex flex-col gap-10 w-full max-w-3xl">
      <div>
        <h2 className="text-xl font-semibold mb-4">Bios Geradas</h2>
        <div className="grid gap-4 md:grid-cols-2">
          {generatedBios.map((bio, index) => (
            <Card key={index}>
              <CardContent className="p-4">{bio}</CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

🏠 Página principal (app/page.tsx)

"use client";

import Form from "@/components/Form";
import GeneratedBios from "@/components/GeneratedBios";
import { useState } from "react";

export default function Home() {
  const [generatedBios, setGeneratedBios] = useState<string[]>([]);

  const handleGeneratedBios = (bios: string[]) => {
    setGeneratedBios(bios);
  };

  return (
    <main className="flex flex-col min-h-screen justify-between px-6 py-10 sm:px-20 font-sans bg-white text-gray-900">
      <section className="flex flex-col items-center gap-6">
        <h1 className="text-2xl font-semibold text-center">
          Gere sua nova bio do Instagram!
        </h1>

        <Form handleGeneratedBios={handleGeneratedBios} />

        {!!generatedBios.length && (
          <GeneratedBios generatedBios={generatedBios} />
        )}
      </section>

      <footer className="text-sm text-gray-500 text-center mt-12">
        &copy; 2025 Gerador de Bio para Instagram. Todos os direitos reservados.
      </footer>
    </main>
  );
}

💡 Melhorias possíveis

Adicionar botão "Copiar"
Permitir escolher estilo de bio: profissional, divertida, minimalista…
Salvar as favoritas localmente
Adicionar animações

🗒️ Notas:

Você pode ter percebido que eu utilizei o componente Button, Card e Input diretamente do shadcn, para fazer isso tem o passo a passo na documentação: https://ui.shadcn.com/docs/components/card

👩🏻‍💻 Link do repo: https://github.com/analiseburtet/gerador-bio-instagram

✨ Conclusão

Você acabou de criar sua primeira integração com Gemini em um projeto Next.js! Um passo simples, mas poderoso, pra explorar as possibilidades da IA generativa nos seus apps.

Curtiu? Salva esse post, compartilha e comenta aqui o que você criaria com Gemini! 🚀