Choosing Your Stack

The tools you use for coding matter, but the technologies you build with matter even more. This lesson covers why certain tech stacks work better with AI coding tools—and recommends a stack that maximizes AI effectiveness.

The Recommended Stack

Why This Stack for AI Development

Next.js + TypeScript

TypeScript provides explicit type information that helps AI tools:

// Without types - AI has to guess
function processUser(user) {
  return user.email.toLowerCase()  // Is email always present?
}

// With types - AI knows exactly what to expect
function processUser(user: { id: string; email: string; name?: string }) {
  return user.email.toLowerCase()  // Clear contract
}

Benefits:

• Types catch AI mistakes at compile time
• IntelliSense works better, improving suggestions
• Self-documenting code
• Easier refactoring with AI

Tailwind CSS

Tailwind's utility-first approach is almost purpose-built for AI:

// Traditional CSS - AI needs to manage multiple files
// styles.css
.card { padding: 24px; background: white; }
.card-title { font-size: 18px; font-weight: bold; }

// Tailwind - Everything in one place
<div className="p-6 bg-white rounded-lg shadow-md">
  <h2 className="text-lg font-bold">Title</h2>
</div>

Why AI prefers Tailwind:

• No naming decisions (AI doesn't have to invent class names)
• No cascade debugging (each element is self-contained)
• Predictable output (utility classes have single purposes)
• Design constraints ensure consistency

shadcn/ui

Unlike npm packages, shadcn/ui components live in your codebase:

# Components are copied to your project
pnpm dlx shadcn@latest add button card dialog

# Now they exist in your code
components/
├── ui/
│   ├── button.tsx   # You own this code
│   ├── card.tsx     # AI can see and modify it
│   └── dialog.tsx   # Fully customizable

Benefits:

• AI can see and modify component source code
• No black box dependencies
• Consistent styling with your theme
• Accessible by default

Supabase

Supabase provides backend infrastructure that integrates with AI tools:

// AI can generate Supabase queries naturally
const { data: users } = await supabase
  .from('users')
  .select('*')
  .eq('role', 'admin')
  .order('created_at', { ascending: false })

// MCP integration allows natural language queries
// "Show me all admin users created this month"

Features AI can leverage:

• Database with familiar SQL syntax
• Built-in authentication
• Real-time subscriptions
• File storage
• Edge functions

Alternative Stacks

While the recommended stack works best with AI, here are alternatives for specific use cases:

Why NOT Other Options

Why not CSS Modules or styled-components?

// CSS Modules - AI has to reason across files
import styles from './Card.module.css'
<div className={styles.card}>  // What styles apply?

// styled-components - Runtime overhead, harder to inspect
const Card = styled.div`  // Mixing languages
  padding: ${props => props.large ? '24px' : '16px'};
`

These work fine, but Tailwind's approach is more AI-friendly.

Why not Vue or Svelte?

• Less AI training data available
• Smaller ecosystem
• Fewer tutorials and examples

React/Next.js has the most examples in AI training data, leading to better suggestions.

Project Initialization

Here's how to start a new project with the recommended stack:

# Create Next.js project
pnpm create next-app@latest my-app --typescript --tailwind --app

# Navigate to project
cd my-app

# Initialize shadcn/ui
pnpm dlx shadcn@latest init

# Add common components
pnpm dlx shadcn@latest add button card input form

# Start development
pnpm dev

When prompted by shadcn init:

• Style: Default (or New York)
• Base color: Slate (or your preference)
• CSS variables: Yes

Configuration for AI Tools

TypeScript Configuration

Your tsconfig.json should be strict:

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "forceConsistentCasingInFileNames": true
  }
}

Tailwind Configuration

Your tailwind.config.ts should include shadcn paths:

import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: 'class',
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      // Custom colors and spacing here
    },
  },
  plugins: [require('tailwindcss-animate')],
}

export default config

Summary

• Next.js + TypeScript: Predictable patterns, type safety
• Tailwind CSS: Single-file styling, AI-friendly
• shadcn/ui: Own your components, full AI visibility
• Supabase: Integrated backend with AI tool support
• Vercel: Seamless deployment for Next.js

This stack isn't arbitrary—it's optimized for how AI tools process and generate code. The more predictable and self-contained your code, the better AI assistance you'll receive.

Next Steps

Now that you understand the tech stack, let's set up your complete development environment.