g7-chat

g7-chat is a fast, minimalist AI chat interface built for power users who value ownership, efficiency, and full control over their conversations.

Next.js – React framework for fast, full-stack web apps.
tRPC – End-to-end typesafe APIs without needing REST or GraphQL.
Auth.js – Flexible authentication for Next.js apps.
Vercel AI SDK – Seamless integration of AI models and streaming into your frontend.
Tailwind CSS – Utility-first CSS for rapid and consistent styling.
shadcn/ui – Accessible, customizable component library built on Radix UI and Tailwind.
Drizzle ORM – Type-safe SQL ORM for schema-first, declarative database access.
PostgreSQL – Powerful, open-source relational database system.
Zod – Runtime schema validation and type inference.

g7-chat is built to be snappy and lightweight, with a focus on developer experience and maintainability. Thread management is optimized with smart local state and React Query and styles are custom-built for a distraction-free experience.

Features ✨

📁 Project Management
- Organize conversations into Projects (groups of threads).
- Easily edit or delete projects to keep things tidy.
💬 Thread Control
- Full control over each thread:
  - Edit, delete, or pin important threads.
  - Toggle visibility between private and public.
  - Move threads between projects for better organization.
  - Export threads in the json format for other use.
📨 Message Tools
- Interact deeply with each message:
  - Edit your own messages.
  - Copy content easily.
  - Use Redo/Retry to ask AI to regenerate responses.
🧠 Personalizing the Assistant
- Personalize your AI assistant:
  - Set your display name and how the AI refers to you.
  - Define AI personality traits, tone, and response style.
  - Specify your profession or role to guide context-aware replies.
  - All preferences are used in a dynamic system prompt.
📦 Model Selection & API Key Management
- Bring Your Own Keys (BYOK) - Use your own API keys for maximum privacy and control.
- Choose from a range of available AI models:
  - Use a searchable popover and selector powered by shadcn/ui
  - Models are grouped by provider with clean headings
  - Only models with configured API keys are enabled
  - Instantly switch between available models
- All API keys are stored locally in your browser for privacy.
- At least one API key is required to use the chat functionality.
🎨 Clean & Dynamic UI
- Built with shadcn/ui for accessible and elegant components.
- Code blocks are beautifully rendered for easy reading and copying.
- Fast, reactive updates using tRPC—no unnecessary reloads.
🙋 User-Friendly Design
- Minimalist interface that puts your content first.
- Built for speed, clarity, and efficient navigation.

Optimizations ⚡

tRPC + React Query Integration
Leveraged tRPC with React Query to enable:
- Automatic caching of API responses to reduce redundant requests.
- Background refetching for real-time freshness without interrupting the user.
- Optimistic updates and smart invalidation for a snappy UI experience.
Minimal Overhead Architecture
The full-stack type safety and tightly coupled frontend/backend model reduce bugs and eliminate unnecessary data handling layers.
Fast UI Rendering
Thanks to efficient data fetching and state management, the UI remains highly responsive—even with complex thread/project structures.
Incremental Loading
Designed for fast initial load with lazy fetching where possible, ensuring minimal delay during navigation.

Lessons Learned 📚

Gained deep understanding of Next.js routing and API handling for building full-stack features efficiently.
Learned how AI integrations work across frontend and backend, including prompt handling and streaming responses.
Faced and overcame challenges in database schema design and migration management for scalable systems.
Realized the power of TypeScript in ensuring type safety, reducing runtime errors, and improving developer experience.

Getting Started 🚀

Prerequisites

Node.js (v16 or higher)
pnpm, npm, or yarn package manager
Git
PostgreSQL database (for local development)

Installation

Clone the repository

git clone https://github.com/Gr1shma/g7-chat.git
cd g7-chat

Install dependencies

Using pnpm (recommended):

pnpm install

Or using npm:

npm install

Or using yarn:

yarn install

Set up environment variables

Copy the example env file and fill in your credentials:

cp .env.example .env

Edit .env and provide values for:

AUTH_SECRET (random secure string)
Google OAuth credentials: AUTH_GOOGLE_ID, AUTH_GOOGLE_SECRET
DATABASE_URL (your PostgreSQL connection string)

Run the development server

pnpm dev
# or
npm run dev
# or
yarn dev

Open your browser and visit http://localhost:3000 to see the app live.

Build for Production

Build the app with:

pnpm build
# or
npm run build
# or
yarn build

Then start the production server with:

pnpm start
# or
npm start
# or
yarn start

Note: Next.js outputs the production build in the .next folder.

Environment Variables

g7-chat requires several environment variables to run properly, especially for authentication, database connection, and AI integration. Below is a description of each variable in the .env file:

Variable	Description	Example / Notes
`AUTH_SECRET`	A secret string used to encrypt session data and cookies for authentication.	Generate a strong random string (e.g., `openssl rand -hex 32`)
`AUTH_GOOGLE_ID`	Client ID for Google OAuth provider, used for user login via Google.	Obtain from Google Cloud Console Credentials
`AUTH_GOOGLE_SECRET`	Client Secret for Google OAuth provider.	Obtain from Google Cloud Console alongside the client ID
`DATABASE_URL`	Connection string to your PostgreSQL database instance.	Format: `postgresql://username:password@host:port/database`

Example `.env`

AUTH_SECRET="your-random-secret-string"
AUTH_GOOGLE_ID="your-google-client-id"
AUTH_GOOGLE_SECRET="your-google-client-secret"
DATABASE_URL="postgresql://postgres:password@localhost:5432/g7-chat"

How to generate auth secret

You can generate a strong secret using command-line tools like:

openssl rand -hex 22

or refer Auth.js Setup Environment

Setting Up Google OAuth Credentials

Visit the Google Cloud Console - Credentials page.
Click Create Credentials and select OAuth 2.0 Client ID.
Choose Web application as the application type.
Under Authorized JavaScript origins, add:
- http://localhost:3000 (for local development)
- Your production URL (e.g., https://yourdomain.com)
Under Authorized redirect URIs, add:
- http://localhost:3000/api/auth/callback/google
- The corresponding production callback URL (e.g., https://yourdomain.com/api/auth/callback/google)
Save and copy the generated Client ID and Client Secret into your .env file as AUTH_GOOGLE_ID and AUTH_GOOGLE_SECRET.

AI Model Providers 🧠

g7-chat supports multiple AI model providers with a clean, type-safe integration using the Vercel AI SDK. The app uses a Bring Your Own Keys (BYOK) approach, where you provide your own API keys for maximum privacy and control. You can switch between different models at runtime using a unified provider:model string format.

Supported Providers and Models ✅

Provider	Model Key	Display Name	Description
Google	`google:gemini-2.0-flash-001`	Gemini 2.0 Flash	Latest multimodal model with enhanced speed and capabilities
	`google:gemini-1.5-flash`	Gemini 1.5 Flash	Fast and efficient model for general-purpose tasks
Groq	`groq:llama-3.1-8b-instant`	Llama 3.1 8B Instant	Ultra-fast inference with Llama 3.1 8B parameters
	`groq:deepseek-r1-distill-llama-70b`	DeepSeek R1 Distill 70B	Distilled version of DeepSeek R1 with 70B parameters
OpenRouter	`openrouter:deepseek/deepseek-r1-0528:free`	DeepSeek R1 (Free)	Free tier access to DeepSeek R1 reasoning model
	`openrouter:deepseek/deepseek-chat-v3-0324:free`	DeepSeek Chat v3 (Free)	Free tier conversational AI model
OpenAI	`openai:gpt-4o`	GPT-4o	OpenAI's flagship omni-modal model
	`openai:gpt-4.1-mini`	GPT-4.1 Mini	Compact version of GPT-4.1 for efficient tasks

API Key Management 🔑

All models require their respective API keys to function:

Google: Get your API key from Google AI Studio
Groq: Get your API key from Groq Console
OpenRouter: Get your API key from OpenRouter Keys
OpenAI: Get your API key from OpenAI Platform

API keys are stored locally in your browser using Zustand persistence and are never sent to any server except the respective AI provider.

How It Works 🧩

The app uses a type-safe model registry defined in src/lib/ai/models.ts:

export const PROVIDER_MODELS = {
    google: [
        {
            id: "gemini-2.0-flash-001",
            displayName: "Gemini 2.0 Flash",
            description: "Latest multimodal model with enhanced speed and capabilities"
        },
        {
            id: "gemini-1.5-flash",
            displayName: "Gemini 1.5 Flash", 
            description: "Fast and efficient model for general-purpose tasks"
        },
    ],
    // ... other providers
} as const;

You can get a model configuration with:

const modelConfig = getModelConfigByKey("google:gemini-2.0-flash-001");

State Management 📦

The app uses two Zustand stores for managing models and API keys:

API Key Store (useAPIKeyStore):

Stores API keys for all providers
Validates that at least one API key is provided
Persists keys locally in browser storage

Model Store (useModelStore):

Tracks the currently selected model
Provides model configuration details
Automatically falls back to available models based on API keys

Default Model 🧾

The default model is google:gemini-2.0-flash-001 (Gemini 2.0 Flash). This can be changed in the model store configuration.

Model Selection UI 🎨

The app includes a sophisticated model selector component that:

Groups models by provider with clean headings
Shows only models with configured API keys as enabled
Provides search functionality across model names and providers
Displays model descriptions and current selection status
Supports keyboard navigation (arrow keys, Enter)

Adding More Models or Providers

To add new models or providers, follow these steps:

1. Update the Model Registry

Add your new provider and models to PROVIDER_MODELS in src/lib/ai/models.ts:

export const PROVIDER_MODELS = {
    // Existing providers...
    anthropic: [
        {
            id: "claude-3-5-sonnet-20241022",
            displayName: "Claude 3.5 Sonnet",
            description: "Anthropic's most capable model"
        }
    ]
} as const;

2. Update Provider Constants

Add the new provider to the PROVIDERS array in src/lib/ai/store.ts:

export const PROVIDERS = ["google", "openrouter", "openai", "groq", "anthropic"] as const;

3. Add Header Configuration

Update PROVIDER_HEADER_KEYS in src/lib/ai/models.ts:

const PROVIDER_HEADER_KEYS: Record<Provider, string> = {
    // Existing providers...
    anthropic: "X-Anthropic-API-Key",
} as const;

4. Update API Key Form

Add the new provider to apiKeyFields in your API key form component:

const apiKeyFields = [
    // Existing fields...
    {
        id: "anthropic",
        label: "Anthropic API Key",
        placeholder: "sk-ant-...",
        linkUrl: "https://console.anthropic.com/",
    },
];

5. Update Default Keys

Add default empty key in useAPIKeyStore:

keys: {
    google: "",
    openrouter: "",
    openai: "",
    groq: "",
    anthropic: "", // Add new provider
},

The type system will automatically pick up your changes and ensure type safety across the entire application.

Acknowledgements 🌟

t3.chat – The core inspiration behind g7-chat. Much of the UI and architecture are modeled after this powerful and elegant chat experience.
T3 Stack – A robust and opinionated Next.js starter kit that accelerated development with best-in-class tools.
shadcn/ui – For beautifully designed, headless UI components that made building clean, accessible interfaces effortless.

License 📄

MIT License – see the LICENSE file.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Empowering users with speed, control, and efficiency.

Name		Name	Last commit message	Last commit date
Latest commit History 131 Commits
.github/workflows		.github/workflows
assets		assets
public		public
src		src
tests		tests
.env.example		.env.example
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
drizzle.config.ts		drizzle.config.ts
next.config.js		next.config.js
package.json		package.json
playwright.config.ts		playwright.config.ts
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
prettier.config.js		prettier.config.js
start-database.sh		start-database.sh
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

g7-chat

Table of Contents

Demo

What It Does

Tech Stack

Features ✨

Optimizations ⚡

Lessons Learned 📚

Getting Started 🚀

Prerequisites

Installation

Build for Production

Environment Variables

Example .env

How to generate auth secret

Setting Up Google OAuth Credentials

AI Model Providers 🧠

Supported Providers and Models ✅

API Key Management 🔑

How It Works 🧩

State Management 📦

Default Model 🧾

Model Selection UI 🎨

Adding More Models or Providers

1. Update the Model Registry

2. Update Provider Constants

3. Add Header Configuration

4. Update API Key Form

5. Update Default Keys

Acknowledgements 🌟

License 📄

Contributing

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Uh oh!

Contributors

Uh oh!

Languages

Example `.env`