# Module 14: Agentic Development
## Lesson 4: Choosing Your Code Format
**Understanding what the agent produces and which technology fits your needs**
---
## The Agent Writes Code. Which Kind?
When you ask an agent to build something, one of the first decisions is: what technology should it use? This choice affects how fast you can iterate, how easy it is to share, and how close the output is to production.
You don't need to become an expert. But you need to understand the options well enough to make good decisions — or at least ask the right questions.
---
## The Most Common Stack: React + Tailwind
Most modern web projects use some version of this combination. If you're building production code, this is likely what you'll work with.
**React** handles structure and behavior — you build reusable components that manage their own state.
**Tailwind CSS** handles styling — instead of writing CSS in separate files, you apply utility classes directly to elements.
**Next.js** ties it all together — routing between pages, server features, and deployment.
```jsx
function SignupForm() {
const [email, setEmail] = useState('')
const [error, setError] = useState('')
function handleSubmit() {
if (!email.includes('@')) {
setError('Please enter a valid email')
}
}
return (
)
}
```
Notice how everything — structure, styling, and behavior — lives in one component file. This is what modern web development looks like.
| | |
|---|---|
| **Pros** | Industry standard. Components are reusable. Real interactivity. Deploys easily to Vercel. The agent is very good at generating this stack. |
| **Cons** | Requires a development environment (Node.js, package manager). Can't just open a file in the browser. Errors can be cryptic. Steeper learning curve. |
| **Best for** | Production projects. Interactive prototypes. Building within an existing codebase. |
---
## Component Libraries and Your Design System
In Module 13, you built a design system — tokens for colors, typography, spacing, and component definitions. In code, these come to life through **component libraries**.
A component library is a collection of pre-built, styled components (buttons, inputs, cards, modals) that you use as building blocks. Instead of writing a button from scratch every time, you import one:
```jsx
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
function SignupForm() {
return (
)
}
```
### Popular component libraries
| Library | What it is |
|---|---|
| **shadcn/ui** | Copy-paste components built on Tailwind. You own the code. Highly customizable. Currently the most popular choice. |
| **Radix UI** | Accessible, unstyled primitives. You add your own styling. The foundation under shadcn/ui. |
| **Material UI (MUI)** | Google's design system as React components. Opinionated look and feel. |
| **Chakra UI** | Utility-based components with built-in accessibility. |
### How this connects to your design system
Your design tokens (Module 13) define the rules. The component library implements them:
| Design token | Code implementation |
|---|---|
| Primary color: `#0066FF` | `--primary: #0066FF` in your Tailwind config |
| Font: Inter, 16px base | `fontFamily: { sans: ['Inter'] }` in config |
| Spacing: 8px scale | `spacing: { 1: '8px', 2: '16px', ... }` |
| Button: primary variant | `