Create GO FAST App 🔥

The fastest way to build production-ready AI applications in 2025.

Create GO FAST App is a CLI tool that scaffolds a complete, production-ready application with the GO FAST 🔥 STACK - the most modern AI-first tech stack optimized for speed, performance, and developer experience.

🚀 Quick Start

# Create your app in 30 seconds
npx create-go-fast-app my-ai-app

# Navigate and start developing
cd my-ai-app
npm run dev

That's it! You now have a full-stack AI application with authentication, database, real-time chat, and more.

⚡ The GO FAST Stack

• 🔥 Next.js 15 - React Server Components, App Router, Streaming
• ⚛️ React 19 - Latest React with concurrent features
• 🎨 Tailwind CSS + shadcn/ui - Beautiful, accessible components
• 🔐 NextAuth.js v5 - Secure authentication with multiple providers
• 🗄️ Supabase + Drizzle ORM - Type-safe database with real-time subscriptions
• 🤖 Vercel AI SDK + LangChain.js - Streaming AI responses with advanced orchestration
• 🔌 tRPC - End-to-end type safety for APIs
• 📦 Turborepo - Blazing fast monorepo builds
• 🔍 Full Observability - Sentry, OpenTelemetry, LangSmith
• ☁️ Vercel Ready - One-command deployment

🎯 Build a Production ChatGPT Clone in Minutes

Let's build a complete ChatGPT clone with authentication, streaming responses, chat history, and beautiful UI. This tutorial showcases the power of the GO FAST stack.

Step 1: Create Your Project

npx create-go-fast-app chatgpt-clone
cd chatgpt-clone

When prompted, select:

• ✅ Full Stack Template
• ✅ Include Authentication
• ✅ Include Database
• ✅ Include AI Features
• ✅ Include Observability

Step 2: Environment Setup

Copy .env.example to .env.local and add your keys:

# Database (Supabase)
DATABASE_URL="postgresql://user:pass@host:port/db"
DIRECT_URL="postgresql://user:pass@host:port/db"

# Authentication
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# OAuth Providers (optional)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# AI Providers
OPENAI_API_KEY="sk-your-openai-key"
ANTHROPIC_API_KEY="sk-ant-your-anthropic-key"

# Observability
LANGSMITH_API_KEY="your-langsmith-key"
SENTRY_DSN="your-sentry-dsn"

Step 3: Set Up Database

# Generate and run migrations
npm run db:generate
npm run db:migrate

# View your database (optional)
npm run db:studio

Step 4: Create the Chat Schema

Update src/lib/db/schema.ts:

import { pgTable, text, timestamp, uuid, jsonb } from "drizzle-orm/pg-core";

export const users = pgTable("users", {
  id: uuid("id").primaryKey().defaultRandom(),
  email: text("email").unique().notNull(),
  name: text("name"),
  image: text("image"),
  createdAt: timestamp("created_at").defaultNow(),
});

export const conversations = pgTable("conversations", {
  id: uuid("id").primaryKey().defaultRandom(),
  userId: uuid("user_id").references(() => users.id).notNull(),
  title: text("title").notNull(),
  createdAt: timestamp("created_at").defaultNow(),
  updatedAt: timestamp("updated_at").defaultNow(),
});

export const messages = pgTable("messages", {
  id: uuid("id").primaryKey().defaultRandom(),
  conversationId: uuid("conversation_id").references(() => conversations.id).notNull(),
  role: text("role").notNull(), // 'user' | 'assistant' | 'system'
  content: text("content").notNull(),
  metadata: jsonb("metadata"), // For storing additional AI metadata
  createdAt: timestamp("created_at").defaultNow(),
});

Step 5: Create the Chat API

Update src/app/api/ai/chat/route.ts:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
import { NextRequest } from 'next/server';
import { getServerSession } from 'next-auth';
import { authConfig } from '~/lib/auth/config';
import { db } from '~/lib/db';
import { conversations, messages } from '~/lib/db/schema';
import { eq } from 'drizzle-orm';

export const runtime = 'edge';

export async function POST(req: NextRequest) {
  try {
    const session = await getServerSession(authConfig);
    if (!session?.user?.id) {
      return new Response('Unauthorized', { status: 401 });
    }

    const { messages: chatMessages, conversationId } = await req.json();

    // Save user message to database
    if (conversationId) {
      await db.insert(messages).values({
        conversationId,
        role: 'user',
        content: chatMessages[chatMessages.length - 1].content,
      });
    }

    // Stream AI response
    const result = await streamText({
      model: openai('gpt-4-turbo'),
      messages: chatMessages,
      temperature: 0.7,
      maxTokens: 1000,
      onFinish: async (completion) => {
        // Save AI response to database
        if (conversationId) {
          await db.insert(messages).values({
            conversationId,
            role: 'assistant',
            content: completion.text,
            metadata: {
              usage: completion.usage,
              finishReason: completion.finishReason,
            },
          });
        }
      },
    });

    return result.toDataStreamResponse();
  } catch (error) {
    console.error('Chat API error:', error);
    return new Response('Internal Server Error', { status: 500 });
  }
}

Step 6: Create tRPC Routes for Chat Management

Create src/server/api/routers/chat.ts:

import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
import { conversations, messages } from "~/lib/db/schema";
import { eq, desc } from "drizzle-orm";

export const chatRouter = createTRPCRouter({
  // Get user's conversations
  getConversations: protectedProcedure.query(async ({ ctx }) => {
    return ctx.db
      .select()
      .from(conversations)
      .where(eq(conversations.userId, ctx.session.user.id))
      .orderBy(desc(conversations.updatedAt));
  }),

  // Create new conversation
  createConversation: protectedProcedure
    .input(z.object({ title: z.string() }))
    .mutation(async ({ ctx, input }) => {
      const [conversation] = await ctx.db
        .insert(conversations)
        .values({
          userId: ctx.session.user.id,
          title: input.title,
        })
        .returning();
      return conversation;
    }),

  // Get conversation messages
  getMessages: protectedProcedure
    .input(z.object({ conversationId: z.string() }))
    .query(async ({ ctx, input }) => {
      return ctx.db
        .select()
        .from(messages)
        .where(eq(messages.conversationId, input.conversationId))
        .orderBy(messages.createdAt);
    }),

  // Delete conversation
  deleteConversation: protectedProcedure
    .input(z.object({ id: z.string() }))
    .mutation(async ({ ctx, input }) => {
      await ctx.db.delete(conversations).where(eq(conversations.id, input.id));
    }),
});

Update src/server/api/root.ts:

import { createTRPCRouter } from "~/server/api/trpc";
import { chatRouter } from "~/server/api/routers/chat";

export const appRouter = createTRPCRouter({
  chat: chatRouter,
});

export type AppRouter = typeof appRouter;

Step 7: Create the Chat Interface

Create src/components/chat-interface.tsx:

'use client';

import { useState } from 'react';
import { useChat } from 'ai/react';
import { Button } from '~/components/ui/button';
import { Input } from '~/components/ui/input';
import { Card } from '~/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
import { ScrollArea } from '~/components/ui/scroll-area';
import { Send, Bot, User } from 'lucide-react';
import { cn } from '~/lib/utils';

interface ChatInterfaceProps {
  conversationId?: string;
  initialMessages?: any[];
}

export function ChatInterface({ conversationId, initialMessages = [] }: ChatInterfaceProps) {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/ai/chat',
    initialMessages,
    body: { conversationId },
  });

  return (
    <div className="flex flex-col h-full">
      {/* Messages */}
      <ScrollArea className="flex-1 p-4">
        <div className="space-y-4">
          {messages.map((message) => (
            <div
              key={message.id}
              className={cn(
                "flex gap-3",
                message.role === 'user' ? 'justify-end' : 'justify-start'
              )}
            >
              {message.role === 'assistant' && (
                <Avatar className="h-8 w-8">
                  <AvatarFallback>
                    <Bot className="h-4 w-4" />
                  </AvatarFallback>
                </Avatar>
              )}
              
              <Card
                className={cn(
                  "max-w-[70%] p-3",
                  message.role === 'user'
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-muted'
                )}
              >
                <p className="text-sm whitespace-pre-wrap">{message.content}</p>
              </Card>

              {message.role === 'user' && (
                <Avatar className="h-8 w-8">
                  <AvatarFallback>
                    <User className="h-4 w-4" />
                  </AvatarFallback>
                </Avatar>
              )}
            </div>
          ))}
          
          {isLoading && (
            <div className="flex gap-3 justify-start">
              <Avatar className="h-8 w-8">
                <AvatarFallback>
                  <Bot className="h-4 w-4" />
                </AvatarFallback>
              </Avatar>
              <Card className="bg-muted p-3">
                <div className="flex space-x-1">
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                  <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                </div>
              </Card>
            </div>
          )}
        </div>
      </ScrollArea>

      {/* Input */}
      <form onSubmit={handleSubmit} className="p-4 border-t">
        <div className="flex gap-2">
          <Input
            value={input}
            onChange={handleInputChange}
            placeholder="Type your message..."
            disabled={isLoading}
            className="flex-1"
          />
          <Button type="submit" disabled={isLoading || !input.trim()}>
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </form>
    </div>
  );
}

Step 8: Create the Sidebar

Create src/components/chat-sidebar.tsx:

'use client';

import { useState } from 'react';
import { Button } from '~/components/ui/button';
import { ScrollArea } from '~/components/ui/scroll-area';
import { Separator } from '~/components/ui/separator';
import { Plus, MessageSquare, Trash2 } from 'lucide-react';
import { trpc } from '~/lib/trpc/client';
import { cn } from '~/lib/utils';

interface ChatSidebarProps {
  currentConversationId?: string;
  onSelectConversation: (id: string) => void;
  onNewConversation: () => void;
}

export function ChatSidebar({ 
  currentConversationId, 
  onSelectConversation, 
  onNewConversation 
}: ChatSidebarProps) {
  const utils = trpc.useUtils();
  const { data: conversations = [] } = trpc.chat.getConversations.useQuery();
  
  const deleteConversation = trpc.chat.deleteConversation.useMutation({
    onSuccess: () => {
      utils.chat.getConversations.invalidate();
    },
  });

  const handleDelete = (e: React.MouseEvent, id: string) => {
    e.stopPropagation();
    deleteConversation.mutate({ id });
  };

  return (
    <div className="w-64 border-r bg-muted/30 flex flex-col h-full">
      <div className="p-4">
        <Button 
          onClick={onNewConversation} 
          className="w-full" 
          variant="outline"
        >
          <Plus className="h-4 w-4 mr-2" />
          New Chat
        </Button>
      </div>
      
      <Separator />
      
      <ScrollArea className="flex-1">
        <div className="p-2 space-y-1">
          {conversations.map((conversation) => (
            <div
              key={conversation.id}
              className={cn(
                "group flex items-center justify-between p-3 rounded-lg cursor-pointer hover:bg-muted transition-colors",
                currentConversationId === conversation.id && "bg-muted"
              )}
              onClick={() => onSelectConversation(conversation.id)}
            >
              <div className="flex items-center gap-2 flex-1 min-w-0">
                <MessageSquare className="h-4 w-4 shrink-0" />
                <span className="text-sm truncate">{conversation.title}</span>
              </div>
              
              <Button
                variant="ghost"
                size="sm"
                className="opacity-0 group-hover:opacity-100 h-6 w-6 p-0"
                onClick={(e) => handleDelete(e, conversation.id)}
              >
                <Trash2 className="h-3 w-3" />
              </Button>
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}

Step 9: Create the Main Chat Page

Update src/app/page.tsx:

'use client';

import { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { ChatInterface } from '~/components/chat-interface';
import { ChatSidebar } from '~/components/chat-sidebar';
import { Button } from '~/components/ui/button';
import { SignIn } from '~/components/auth/signin';
import { trpc } from '~/lib/trpc/client';

export default function HomePage() {
  const { data: session, status } = useSession();
  const [currentConversationId, setCurrentConversationId] = useState<string>();
  const [messages, setMessages] = useState<any[]>([]);

  const utils = trpc.useUtils();
  const { data: conversationMessages = [] } = trpc.chat.getMessages.useQuery(
    { conversationId: currentConversationId! },
    { enabled: !!currentConversationId }
  );

  const createConversation = trpc.chat.createConversation.useMutation({
    onSuccess: (conversation) => {
      setCurrentConversationId(conversation.id);
      setMessages([]);
      utils.chat.getConversations.invalidate();
    },
  });

  useEffect(() => {
    if (conversationMessages.length > 0) {
      setMessages(conversationMessages.map(msg => ({
        id: msg.id,
        role: msg.role,
        content: msg.content,
      })));
    }
  }, [conversationMessages]);

  if (status === 'loading') {
    return <div className="flex items-center justify-center h-screen">Loading...</div>;
  }

  if (!session) {
    return <SignIn />;
  }

  const handleNewConversation = () => {
    createConversation.mutate({ 
      title: `New Chat ${new Date().toLocaleString()}` 
    });
  };

  const handleSelectConversation = (id: string) => {
    setCurrentConversationId(id);
  };

  return (
    <div className="flex h-screen">
      <ChatSidebar
        currentConversationId={currentConversationId}
        onSelectConversation={handleSelectConversation}
        onNewConversation={handleNewConversation}
      />
      
      <div className="flex-1 flex flex-col">
        {currentConversationId ? (
          <ChatInterface
            conversationId={currentConversationId}
            initialMessages={messages}
          />
        ) : (
          <div className="flex-1 flex items-center justify-center">
            <div className="text-center">
              <h1 className="text-2xl font-bold mb-4">Welcome to ChatGPT Clone</h1>
              <p className="text-muted-foreground mb-6">
                Start a new conversation to begin chatting with AI
              </p>
              <Button onClick={handleNewConversation}>
                Start New Chat
              </Button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Step 10: Create Authentication Components

Create src/components/auth/signin.tsx:

'use client';

import { signIn } from 'next-auth/react';
import { Button } from '~/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '~/components/ui/card';

export function SignIn() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Card className="w-[400px]">
        <CardHeader className="text-center">
          <CardTitle>Welcome to ChatGPT Clone</CardTitle>
          <CardDescription>
            Sign in to start chatting with AI
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Button 
            onClick={() => signIn('google')} 
            className="w-full"
            variant="outline"
          >
            Continue with Google
          </Button>
          <Button 
            onClick={() => signIn('github')} 
            className="w-full"
            variant="outline"
          >
            Continue with GitHub
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

Step 11: Deploy to Production

# Deploy to Vercel (requires VERCEL_TOKEN environment variable)
npm run deploy

# Or deploy preview
npm run deploy-preview

🎉 Congratulations!

You've just built a production-ready ChatGPT clone with:

• ✅ Real-time streaming responses using Vercel AI SDK
• ✅ User authentication with Google/GitHub OAuth
• ✅ Persistent chat history in Supabase database
• ✅ Beautiful, responsive UI with shadcn/ui components
• ✅ Type-safe APIs with tRPC
• ✅ Production observability with Sentry and LangSmith
• ✅ One-command deployment to Vercel

🏗️ Architecture Overview

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Next.js App   │    │   Supabase DB   │    │   OpenAI API    │
│                 │    │                 │    │                 │
│ • React 19      │◄──►│ • PostgreSQL    │    │ • GPT-4 Turbo   │
│ • App Router    │    │ • Real-time     │    │ • Streaming     │
│ • Server Comp.  │    │ • Type-safe     │    │ • Function Call │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Vercel Edge   │    │   Drizzle ORM   │    │   LangChain.js  │
│                 │    │                 │    │                 │
│ • Edge Runtime  │    │ • Schema Mgmt   │    │ • Orchestration │
│ • Global CDN    │    │ • Migrations    │    │ • Memory        │
│ • Instant Scale │    │ • Type Safety   │    │ • RAG Pipeline  │
└─────────────────┘    └─────────────────┘    └─────────────────┘

🚀 Performance & Developer Experience

Lightning Fast Development

• Hot Module Replacement - Instant updates
• Type Safety - Catch errors at compile time
• Auto-completion - IntelliSense everywhere
• Database Introspection - Live schema updates

Production Performance

• Edge Runtime - Sub-100ms response times globally
• Streaming Responses - Progressive content loading
• Optimistic Updates - Instant UI feedback
• Smart Caching - Automatic optimization

Built-in Observability

• Error Tracking - Sentry integration
• Performance Monitoring - Real User Metrics
• AI Observability - LangSmith tracing
• Database Insights - Query performance

🔧 Available Templates

Minimal Template

Perfect for simple projects:

npx create-go-fast-app my-app --template minimal

• Next.js 15 + React 19
• Tailwind CSS
• TypeScript

Frontend Template

For frontend-focused applications:

npx create-go-fast-app my-app --template frontend

• Everything in Minimal +
• shadcn/ui components
• AI SDK integration

Full Stack Template (Recommended)

Complete production setup:

npx create-go-fast-app my-app --template full

• Everything in Frontend +
• Authentication (NextAuth.js v5)
• Database (Supabase + Drizzle)
• tRPC for type-safe APIs
• Turborepo monorepo setup
• Full observability stack

🎛️ CLI Options

npx create-go-fast-app [project-name] [options]

Options:
  -t, --template <template>  Choose template (minimal|frontend|full)
  -y, --yes                 Skip interactive prompts
  --skip-install            Skip dependency installation
  --skip-checks             Skip system compatibility checks
  --force                   Proceed despite warnings
  -h, --help                Display help information

🔍 Advanced Features

Custom AI Models

Easily switch between AI providers:

// src/app/api/ai/chat/route.ts
import { anthropic } from '@ai-sdk/anthropic';
import { google } from '@ai-sdk/google';

// Use Claude
const result = await streamText({
  model: anthropic('claude-3-sonnet-20240229'),
  messages,
});

// Use Gemini
const result = await streamText({
  model: google('gemini-pro'),
  messages,
});

Real-time Features with Supabase

Add real-time subscriptions:

// Subscribe to conversation updates
const { data, error } = supabase
  .channel('conversations')
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'messages',
  }, payload => {
    // Handle new message
  })
  .subscribe();

Advanced LangChain Integration

Build complex AI workflows:

import { ChatOpenAI } from '@langchain/openai';
import { PromptTemplate } from '@langchain/core/prompts';
import { LLMChain } from 'langchain/chains';

const chain = new LLMChain({
  llm: new ChatOpenAI({ temperature: 0.7 }),
  prompt: PromptTemplate.fromTemplate(
    "You are a helpful assistant. Context: {context}\nQuestion: {question}"
  ),
});

📊 Performance Benchmarks

| Metric | Value | Industry Average | |--------|-------|------------------| | Cold Start | <100ms | 500ms+ | | Hot Response | <50ms | 200ms+ | | Time to Interactive | 1.2s | 3.5s | | Lighthouse Score | 99/100 | 85/100 | | Bundle Size | 180kb | 400kb+ |

🛠️ Scripts Reference

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript checks

# Database
npm run db:generate  # Generate migrations
npm run db:migrate   # Run migrations
npm run db:studio    # Open Drizzle Studio

# Deployment
npm run deploy       # Deploy to production
npm run deploy-preview # Deploy preview

# Turborepo (Full template)
npm run clean        # Clean build artifacts

🌍 Environment Variables

Complete environment setup guide:

# Required for all templates
NEXTAUTH_SECRET="your-secret-key"
NEXTAUTH_URL="http://localhost:3000"

# Database (if included)
DATABASE_URL="postgresql://..."
DIRECT_URL="postgresql://..."

# AI Providers (if included)
OPENAI_API_KEY="sk-..."
ANTHROPIC_API_KEY="sk-ant-..."
GOOGLE_PALM_API_KEY="..."

# OAuth Providers (optional)
GOOGLE_CLIENT_ID="..."
GOOGLE_CLIENT_SECRET="..."
GITHUB_ID="..."
GITHUB_SECRET="..."

# Observability (if included)
SENTRY_DSN="https://..."
LANGSMITH_API_KEY="..."
LANGSMITH_PROJECT="..."

# Deployment
VERCEL_TOKEN="..." # For automated deployment

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

git clone https://github.com/jroell/create-go-fast-app.git
cd create-go-fast-app
npm install
npm run dev

Running Tests

npm test              # Run all tests
npm run test:watch    # Watch mode
npm run test:coverage # Coverage report

📚 Learn More

• Next.js 15 Documentation
• Vercel AI SDK
• LangChain.js
• tRPC
• Drizzle ORM
• Supabase
• shadcn/ui

⭐ Show Your Support

If this project helped you, please give it a ⭐ on GitHub!

📄 License

MIT License - see LICENSE for details.

Start building the future of AI applications today with the GO FAST 🔥 STACK.