gemini-chatbot

repository·main·Indexed 23 days ago

https://github.com/vercel-labs/gemini-chatbot

An open-source AI chatbot template built with Next.js and the Vercel AI SDK. It features Google Gemini integration, data persistence via Vercel Postgres and Blob, and secure authentication via NextAuth.js. The template supports switching LLM providers and includes pre-configured Gemini model instances (gemini-2.5-pro and gemini-2.5-flash) wrapped with custom middleware.

Tokens
1.4K
Snippets
3
Records
7
Agent score
80%

What's inside gemini-chatbot

  1. Overview of Next.js Gemini Chatbot

    main

    The Next.js Gemini Chatbot is an open-source AI chatbot template built using Next.js and the Vercel AI SDK. It is designed for developers looking to build generative user interfaces with features like chat history persistence and secure authentication.

    Key technologies used:

    • Next.js App Router: Utilizes React Server Components (RSCs) and Server Actions.
    • AI SDK: Provides a unified API for text generation, structured objects, and tool calls. Supports Google (default), OpenAI, Anthropic, Cohere, and more.
    • shadcn/ui & Tailwind CSS: For accessible, styled UI components.
    • Data Persistence: Uses Vercel Postgres (powered by Neon) for chat history and Vercel Blob for object storage.
    • NextAuth.js: For secure user authentication.
  2. Switching LLM Model Providers

    main
    While the template defaults to Google Gemini gemini-1.5-pro, you can switch to other providers like OpenAI, Anthropic, or Cohere by leveraging the Vercel AI SDK. This requires updating the provider configuration within your code to use the corresponding SDK provider.
  3. Deploy the Gemini Chatbot to Vercel

    main
    You can deploy a personal instance of this chatbot to Vercel using the one-click deployment button. When deploying, ensure you provide the necessary environment variables, specifically AUTH_SECRET and GOOGLE_GENERATIVE_AI_API_KEY.
  4. Run the Gemini Chatbot locally

    main

    To run the project on your local machine, follow these steps:

    1. Install Vercel CLI:
      npm i -g vercel
    2. Link your project: Link your local instance to your Vercel and GitHub accounts to create the .vercel directory:
      vercel link
    3. Pull environment variables: Download the required environment variables from your Vercel project to a local .env file:
      vercel env pull
    4. Install dependencies and start development server:
      pnpm install
      pnpm dev

    The application will be available at http://localhost:3000/.

    Important Security Note: Do not commit your .env file to version control, as it contains sensitive secrets for Google Cloud and your authentication providers.

    pnpm install
    pnpm dev
  5. Configure NextAuth authentication routes and callbacks

    main

    The authConfig object defines the authentication behavior for the application using NextAuthConfig. It specifies custom pages for sign-in and new user redirection, and implements an authorized callback to manage access control for different routes.

    Custom Pages

    • signIn: The path to the login page (set to /login).
    • newUser: The path where new users are redirected (set to /).

    Authorization Logic

    The authorized callback handles route protection based on the user's authentication state:

    • Authenticated users attempting to access /login or /register are redirected to the home page (/).
    • Unauthenticated users attempting to access the chat interface (any path starting with /) are denied access (returns false), which typically triggers a redirect to the sign-in page.
    • Public routes: /register and /login are always accessible.
    export const authConfig = {
      pages: {
        signIn: "/login",
        newUser: "/",
      },
      providers: [
        // added later in auth.ts since it requires bcrypt which is only compatible with Node.js
        // while this file is also used in non-Node.js environments
      ],
      callbacks: {
        authorized({ auth, request: { nextUrl } }) {
          // ... logic for route protection
        },
      },
    } satisfies NextAuthConfig;
  6. Configure Drizzle ORM for the project

    main

    The project uses drizzle-kit for database migrations and schema management. The configuration is defined in drizzle.config.ts and relies on environment variables loaded from .env.local.

    Key configuration settings:

    • schema: Points to the source of truth for the database schema at ./db/schema.ts.
    • out: Specifies the directory where migration files are generated (./lib/drizzle).
    • dialect: Set to postgresql.
    • dbCredentials.url: Uses the POSTGRES_URL environment variable to connect to the database.

    To ensure the configuration works, ensure a .env.local file exists in the root directory containing a valid POSTGRES_URL.

    import { config } from "dotenv";
    import { defineConfig } from "drizzle-kit";
    
    config({
      path: ".env.local",
    });
    
    export default defineConfig({
      schema: "./db/schema.ts",
      out: "./lib/drizzle",
      dialect: "postgresql",
      dbCredentials: {
        url: process.env.POSTGRES_URL!,
      },
    });
  7. Use pre-configured Gemini models

    main

    The package exports two pre-configured Gemini model instances that are wrapped with custom middleware for use with the AI SDK. These models are ready to be passed directly into AI SDK functions like generateText or streamText.

    • geminiProModel: Uses the gemini-2.5-pro model.
    • geminiFlashModel: Uses the gemini-2.5-flash model.

    Both models include customMiddleware applied via experimental_wrapLanguageModel.