Agent Patterns

Copy-paste UI patterns optimized for AI code generation.

Beautiful, production-ready React components designed for LLM code generation. Each pattern has a Zod schema that AI models understand. No dependencies, just copy and paste.

---

🚀 Quick Start

# 1. Copy a pattern into your project
npx agent-patterns@latest add metric-card

# 2. Use it in your code
import { MetricCard } from '@/patterns/metric-card/component'

<MetricCard 
  label="Revenue" 
  value="$45,231" 
  trend={{ value: 12.5, direction: "up", label: "vs last month" }}
/>

That's it. No npm install, no version conflicts, no build config.

---

📦 15 Production-Ready Patterns

Pattern	Use Case	Preview
MetricCard	KPIs, dashboards, stats	Metrics with trends & sparklines
Chart	Analytics, data visualization	Bar, line, area, pie, donut charts
DataTable	Lists, tables, data management	Sort, filter, paginate, select rows
AgentForm	User input, settings	11 field types + Zod validation
DetailCard	User profiles, record details	Structured info with edit mode
InsightsList	AI insights, notifications	Prioritized insights with actions
StreamingIndicator	Loading, AI processing	5 variants + progress steps
ChatMessage	Chat interfaces, AI assistants	Bubbles with streaming text
CommandPalette	Quick actions, ⌘K menus	Fuzzy search command menu
KanbanBoard	Project management, pipelines	Drag-and-drop task boards
Timeline	Activity feeds, audit logs	Event/activity timelines
Sidebar	App navigation, menus	Collapsible nav with nesting
StatsGrid	Dashboard headers, overview	Responsive grid of metrics
ConfirmDialog	Confirmations, warnings	Modal confirmations
CodeBlock	Documentation, code display	Syntax highlighting + copy

→ View Live Demos — Try all patterns, switch themes, copy code

---

🤖 Built for AI Code Generation

Every pattern has an LLM-optimized Zod schema:

import { metricCardSchema } from '@/patterns/metric-card/schema'

// AI models understand this:
const props = metricCardSchema.parse({
  label: "Total Revenue",
  value: "$45,231",
  trend: { value: 12.5, direction: "up", label: "vs last month" }
})

Use our prompts to make any LLM generate components using these patterns:

• prompts/system-prompt.md — Add to your Cursor rules or Claude project
• prompts/build-dashboard.md — Generate complete dashboards
• prompts/build-admin-panel.md — Generate admin interfaces
• prompts/build-chat-interface.md — Generate AI chat UIs
• prompts/pattern-index.md — Complete schema reference

---

✨ Why Agent Patterns?

1. Zero Dependencies

No npm install. No version conflicts. No build config. Just copy the component file and use it.

2. LLM-First Design

Zod schemas with detailed descriptions that AI models understand. Your LLM generates valid props automatically.

3. Production Ready

Not toy examples. Real components with:

• Loading states
• Error handling
• Accessibility
• Responsive design
• TypeScript strict mode

4. Theme Compatible

Works with all shadcn/ui themes. Change themes, components adapt instantly.

5. Copy-Paste Model

Own your code. Modify freely. No black-box libraries. No "ejecting."

---

🎨 Works With

---

🏗️ Example: Build a Dashboard in 60 Seconds

import { StatsGrid } from '@/patterns/stats-grid/component'
import { Chart } from '@/patterns/chart/component'
import { DataTable } from '@/patterns/data-table/component'

export default function Dashboard() {
  return (
    <div className="p-6 space-y-6">
      {/* 4 Key Metrics */}
      <StatsGrid 
        stats={[
          { id: '1', label: 'Revenue', value: '$847K', change: 12, trend: 'up' },
          { id: '2', label: 'Users', value: '12.4K', change: 8, trend: 'up' },
          { id: '3', label: 'Conversion', value: '3.2%', change: -2, trend: 'down' },
          { id: '4', label: 'Avg Order', value: '$68', change: 5, trend: 'up' },
        ]}
        columns={4}
      />

      {/* Revenue Trend */}
      <Chart
        title="Monthly Revenue"
        type="bar"
        data={[
          { label: 'Jan', value: 125000 },
          { label: 'Feb', value: 132000 },
          { label: 'Mar', value: 148000 },
        ]}
      />

      {/* Transactions Table */}
      <DataTable
        columns={[
          { key: 'id', header: 'ID' },
          { key: 'customer', header: 'Customer' },
          { key: 'amount', header: 'Amount' },
          { key: 'status', header: 'Status' },
        ]}
        data={transactions}
        searchable
        pagination
        pageSize={10}
      />
    </div>
  )
}

---

📚 Documentation

• Pattern Index — Complete schema reference for all 15 patterns
• System Prompt — Use with Cursor, Claude, ChatGPT
• Build Guides — Example prompts for common layouts
• Live Playground — Interactive demos with theme switcher

---

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

What We Need

• New patterns (submit via PR with component + schema + example + prompt)
• Bug fixes (especially theme compatibility issues)
• Documentation improvements
• Example use cases and prompts

---

📄 License

MIT © Agent Patterns

---

⭐ Star This Repo

If you find Agent Patterns useful, give it a star! It helps others discover the project.

---

Built with ❤️ for the AI code generation era.

Website • GitHub • Issues