Why Agent Patterns?
-- Built for LLM-Generated UIs -
-- Unlike shadcn/ui which is for general components, Agent Patterns is specifically - optimized for AI agents generating UI dynamically. Every pattern includes Zod schemas - with LLM-friendly descriptions, making it easy for agents to generate correct code. -
-Quick Start
-
- {`# Initialize project
-npx agent-patterns init
-
-# Add a pattern
-npx agent-patterns add metric-card
-
-# Update patterns
-npx agent-patterns update`}
-
- Core Principles
-🤖 LLM-Optimized
-- Zod schemas with detailed descriptions make it easy for AI agents to generate - correct code. This is our key differentiator from shadcn. -
-📋 Copy-Paste Model
-- No npm packages. Just copy the files you need directly into your project, just like - shadcn/ui. -
-🎨 Theme-Compatible
-- Works with all 20+ shadcn themes using CSS variables. Use your existing theme setup. -
-🔌 Agent Integration
-- Built-in CopilotKit examples show exactly how to add patterns to your AI agent. - Ready to use out of the box. -
-Patterns
-{pattern.name}
-{pattern.description}
-Agent Integration
-With CopilotKit
-- Each pattern includes a ready-to-use CopilotKit integration. Your agent can call - render functions and dynamically generate UI components. -
-
- {`import { useRenderToolCall } from "@copilotkit/react-core"
-import { MetricCard } from "@/patterns/metric-card/component"
-import { metricCardSchema } from "@/patterns/metric-card/schema"
-
-useRenderToolCall({
- toolName: "render_metric_card",
- argumentsSchema: metricCardSchema,
- render: (props) =>
-
- - 💡 Tip: See the{" "} - - Playground - {" "} - to try patterns live and see integration examples for each pattern. -
-Best Practices
-1. Use CSS Variables
-- Always use theme CSS variables (e.g., `bg-background`, `text-foreground`) instead of hardcoded colors. -
-2. Validate with Zod
-- Use the provided Zod schemas to validate data before rendering components. -
-3. Type Safety
-- Leverage TypeScript's type inference from Zod schemas for full type safety. -
-