TypeScript React agentes IA · 2026-07-11

TypeScript React Agentes IA: Tutorial de Componentes com Claude Code e Codex

Tutorial completo de TypeScript React agentes IA: crie componentes React com Claude Code e Codex, do design system ao componente final com testes automáticos.

Desenvolver componentes React com TypeScript é o pão de cada dia do frontend moderno. Quando esse processo é turbinado com TypeScript React agentes IA, o desenvolvedor ganha um assistente que gera a estrutura do componente, escreve os testes, valida as props e mantém a consistência com o design system — tudo em paralelo. Este tutorial mostra, passo a passo, como criar componentes React do zero usando Claude Code e Codex como seus copilotos de frontend. Você vai aprender a configurar um projeto Next.js com TypeScript, criar componentes atômicos com React Claude Code, gerar testes unitários com TypeScript Codex, evoluir para um design system coeso e integrar tudo em um pipeline de desenvolvimento acelerado.

Sumário

Cenário: o que vamos construir

Vamos desenvolver o frontend de um dashboard de gerenciamento de tarefas usando Next.js 14 com App Router e TypeScript. O projeto incluirá:

  • Design system com componentes atômicos (Button, Input, Badge, Card, Modal)
  • Páginas do dashboard com layout responsivo
  • Formulários com validação em tempo real
  • Testes unitários e de snapshot para cada componente
  • Tema claro/escuro via CSS Variables e Context API

A escolha dos agentes segue a mesma lógica de orquestração que já mostramos em tutoriais anteriores: Claude Code para tarefas que exigem compreensão de contexto (estrutura de componentes, integração entre páginas, refatoração), e Codex para geração de código padronizado (testes, stories do Storybook, validações de schema).

Imagem sugerida: Diagrama de arquitetura do frontend mostrando a árvore de componentes: Design System (atômico) -> Componentes de página -> Páginas Next.js, com agentes de IA atuando em cada camada.

Setup do projeto: Next.js + TypeScript com agentes de IA

Antes de escrever qualquer componente manualmente, vamos usar Claude Code para configurar todo o ambiente de desenvolvimento. Isso economiza cerca de 20-30 minutos de configuração manual e garante que as versões das dependências sejam compatíveis.

Inicialização com Claude Code

Abra o terminal na pasta onde o projeto será criado e execute:

claude "Crie um projeto Next.js 14 com TypeScript e App Router para um dashboard de gerenciamento de tarefas. Use create-next-app com as seguintes opções: TypeScript habilitado, ESLint, Tailwind CSS, App Router, import alias @/. Depois de criar, instale class-variance-authority, clsx, tailwind-merge, lucide-react, zod, @hookform/resolvers, react-hook-form e @radix-ui/react-dialog. Crie a estrutura de pastas: src/components/ui (componentes atômicos), src/components/forms, src/components/layout, src/lib (utils), src/hooks, src/types, src/app/dashboard, tests/."

Claude Code executa o scaffolding, instala as dependências e cria a estrutura de diretórios. Em segundos, o projeto está pronto para começar o desenvolvimento.

Configuração do TypeScript estrito

Peça ao Claude Code para ajustar o TypeScript para o modo estrito — essencial para segurança de tipos em componentes React:

claude "Atualize o tsconfig.json para habilitar strict mode, noUncheckedIndexedAccess e exactOptionalPropertyTypes. Adicione paths para @/components/* mapeando para src/components/* e @/lib/* mapeando para src/lib/*. Configure o baseUrl como '.'."

Tailwind CSS e tema

claude "Crie src/lib/theme.ts com um contexto ThemeContext que gerencia tema claro/escuro via CSS Variables. Defina as variáveis CSS no arquivo globals.css para cores primária, secundária, superfície, texto e borda, tanto para light mode quanto dark mode. Use a classe .dark no elemento html para alternar."

Estrutura resultante

Após o setup, a estrutura do projeto deve se parecer com:

task-dashboard/ ├── src/ │ ├── app/ │ │ ├── dashboard/ │ │ │ ├── page.tsx │ │ │ └── layout.tsx │ │ ├── layout.tsx │ │ └── page.tsx │ ├── components/ │ │ ├── ui/ (Button, Input, Badge, Card, Modal) │ │ ├── forms/ (TaskForm, LoginForm) │ │ └── layout/ (Sidebar, Header, MainContent) │ ├── hooks/ (useLocalStorage, useMediaQuery) │ ├── lib/ (theme.ts, utils.ts, validation.ts) │ └── types/ (task.ts, user.ts) ├── tests/ ├── tailwind.config.ts ├── tsconfig.json └── package.json

A criação de Next.js agente com Claude Code nessa etapa inicial elimina o trabalho braçal de configuração. O agente também já valida se as versões das dependências instaladas são compatíveis entre si, prevenindo conflitos comuns como incoerência entre React 18 e @radix-ui/react-dialog.

Imagem sugerida: Captura de tela do terminal (Windows Terminal) mostrando Claude Code criando a estrutura de pastas e instalando dependências automaticamente.

Componentes atômicos com Claude Code

Com a estrutura pronta, o próximo passo é criar os componentes React IA da camada atômica do design system. Claude Code é o agente ideal aqui, porque ele entende o contexto do projeto, respeita a arquitetura já estabelecida e mantém consistência entre os componentes.

Button com variantes

Vamos começar pelo componente mais básico e mais usado: o Button. Peça ao Claude Code para criá-lo com suporte a múltiplas variantes, tamanhos e estados:

claude "Crie src/components/ui/Button.tsx com as seguintes características: 1. Props tipadas com TypeScript: variant ('primary' | 'secondary' | 'ghost' | 'danger'), size ('sm' | 'md' | 'lg'), isLoading (boolean), disabled (boolean), leftIcon e rightIcon (ReactNode), children (ReactNode), className (string para merge) 2. Use class-variance-authority (cva) para definir as variantes de estilo 3. Use tailwind-merge (twMerge) + clsx para combinar classes 4. O botão deve mostrar um spinner SVG quando isLoading=true e desabilitar o clique 5. Use forwardRef para permitir refs externas 6. Os estilos devem usar as variáveis CSS do tema (bg-primary, text-primary-foreground, etc.) 7. Exporte também os tipos ButtonProps e ButtonVariant"

Claude Code analisa a estrutura existente, verifica se as dependências (cva, clsx, tailwind-merge) estão instaladas e gera o componente completo. O resultado é um Button tipado, acessível e consistente com o tema.

Input com validação

O próximo componente essencial é o Input, com suporte a label, erro e mensagem de ajuda:

claude "Crie src/components/ui/Input.tsx com: 1. Props tipadas: label (string), error (string | undefined), helperText (string | undefined), e todas as props nativas de <input> via ComponentPropsWithoutRef<'input'> 2. Renderização: label acima do input, input com estilo consistente, mensagem de erro em vermelho abaixo, helperText em cinza 3. O input deve ter borda vermelha quando error está presente 4. Use forwardRef para integração com react-hook-form 5. Use twMerge para permitir className customizado 6. Estilos baseados nas variáveis CSS do tema"

Badge para status

Badges são úteis para exibir status de tarefas (Pending, In Progress, Completed). Peça ao Claude Code:

claude "Crie src/components/ui/Badge.tsx com variantes de cor: default, success, warning, danger, info. Cada variante deve ter cores de fundo e texto apropriadas. Use cva para as variantes. O badge deve aceitar children e className. Deve ser um componente leve, sem forwardRef (é só um visual)."

Card e Modal

Componentes compostos exigem mais contexto. Claude Code se destaca aqui:

claude "Crie src/components/ui/Card.tsx: um componente card com três subcomponentes: Card.Header, Card.Body, Card.Footer. O Card principal aceita className. Cada subcomponente aceita children e className. Use estilos baseados nas variáveis CSS do tema. Crie src/components/ui/Modal.tsx usando @radix-ui/react-dialog: deve aceitar isOpen (boolean), onClose (função), title (string), description (string opcional), children (conteúdo do modal), footer (ReactNode opcional para botões de ação). Inclua animação de fade/scale na entrada e saída. Use Portal para renderizar fora da árvore DOM atual."

O que Claude Code faz de diferente de um template engine

Diferente de geradores de código comuns, Claude Code:

  • Lê o contexto global: antes de criar Button.tsx, ele verifica como o Tailwind está configurado, quais cores CSS variables existem e se os utilitários (cn, twMerge) estão disponíveis em src/lib/utils.ts
  • Mantém consistência: se o Button usa cva para variantes, o Badge também usará — Claude Code aplica os mesmos padrões arquiteturais em todos os componentes
  • Valida tipos: ao gerar props tipadas, ele garante que os tipos são exportados e importáveis por outros componentes
  • Previne conflitos: se você pedir um Modal que usa @radix-ui/react-dialog, ele verifica se o pacote está instalado e se a versão é compatível com o React do projeto

Isso significa que o frontend agentes IA resultante tem coesão arquitetural de ponta a ponta — como se um único desenvolvedor sênior tivesse escrito todos os componentes seguindo o mesmo padrão.

Imagem sugerida: Split screen do VS Code mostrando três componentes (Button, Input, Badge) lado a lado, com realce nas props TypeScript e nas variantes do cva.

Testes de componentes com Codex

Enquanto Claude Code é excelente para criar a estrutura e a lógica dos componentes, Codex (via OpenCode) se destaca na geração de testes — uma tarefa de alto volume e baixa complexidade, ideal para um agente especializado em código padronizado.

Configuração do ambiente de testes

Primeiro, use Claude Code para configurar o Jest no projeto Next.js:

claude "Configure testes no projeto Next.js com Jest e @testing-library/react. Instale jest, @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, jest-environment-jsdom, @types/jest. Crie jest.config.ts com testEnvironment jsdom, moduleNameMapper para @/ apontando para src/, e setupFilesAfterSetup apontando para tests/setup.ts. Crie tests/setup.ts com import de @testing-library/jest-dom. Adicione script 'test' no package.json."

Testes do Button com Codex

Agora, use Codex para gerar os testes do componente Button:

opencode "Crie tests/Button.test.tsx com testes para o componente Button em src/components/ui/Button.tsx: 1. Renderização: deve renderizar o texto do children, deve aplicar className customizado via twMerge 2. Variantes: deve aplicar classes corretas para variant primary, secondary, ghost, danger 3. Tamanhos: deve aplicar classes corretas para size sm, md, lg 4. Estados: deve exibir spinner quando isLoading, deve estar disabled quando isLoading ou disabled 5. Eventos: deve chamar onClick quando clicado, NÃO deve chamar onClick quando disabled 6. Acessibilidade: o botão deve ter role='button', deve suportar aria-label 7. Ícones: deve renderizar leftIcon e rightIcon quando fornecidos Use @testing-library/react (render, screen, fireEvent) e @testing-library/jest-dom (toBeInTheDocument, toBeDisabled)."

Testes do Input com Codex

opencode "Crie tests/Input.test.tsx: 1. Renderização: deve renderizar o label, deve renderizar o input, deve exibir helperText 2. Estados de erro: deve exibir mensagem de error, deve aplicar borda vermelha quando error presente, deve priorizar error sobre helperText 3. Eventos: deve chamar onChange quando o valor muda 4. forwardRef: deve funcionar com ref (use createRef e verifique se a ref aponta para o input) 5. Props nativas: deve repassar placeholder, type, disabled para o elemento input nativo"

Testes de layout e integração

opencode "Crie tests/Card.test.tsx: teste de renderização de Card com Header, Body e Footer. Verifique se o texto de cada seção aparece no DOM. Crie tests/Modal.test.tsx: teste de abertura (isOpen=true renderiza conteúdo), fechamento (isOpen=false não renderiza), chamada de onClose ao clicar no backdrop ou no botão de fechar."

Snapshot testing

Para garantir que os componentes não mudem inesperadamente:

opencode "Crie tests/Button.snapshot.test.tsx com testes de snapshot para Button: botão primary md, botão secondary lg com ícone, botão danger com isLoading, botão ghost desabilitado. Use render e toMatchSnapshot."

Após a geração, execute os testes:

npm test

Se algum teste falhar, Claude Code pode diagnosticar e corrigir:

claude "Analise a saída dos testes de Button e Input. Identifique as falhas e corrija os componentes em src/components/ui/ para que todos os testes passem. Não modifique os arquivos de teste."

Isso fecha o ciclo: Codex gera os testes -> Claude Code corrige a implementação -> testes passam.

A economia aqui é enorme. Escrever testes manualmente para 5 componentes com múltiplos cenários levaria facilmente 2-3 horas. Com agentes de IA, o mesmo trabalho é feito em 10-15 minutos de comandos e revisão.

Imagem sugerida: Terminal mostrando npm test com todos os testes passando (checkmarks verdes) e relatório de cobertura.

Evolução para um design system completo

Com os componentes atômicos criados e testados, o próximo passo é organizá-los em um design system coeso. Aqui, Claude Code brilha novamente — ele consegue refatorar componentes existentes para seguir um padrão unificado sem quebrar a compatibilidade.

Centralização de exports

claude "Crie src/components/ui/index.ts que re-exporta todos os componentes atômicos: Button, Input, Badge, Card, Modal. Use export * from ou export { default } para cada componente. Garanta que os tipos também sejam re-exportados (ButtonProps, InputProps, BadgeVariant, etc.)."

Utilitários compartilhados

claude "Crie src/lib/utils.ts com a função cn que combina clsx e twMerge: export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) }. Esta função será usada por todos os componentes para merge de classes Tailwind. Atualize Button.tsx, Input.tsx, Badge.tsx e Card.tsx para usar cn() em vez de chamar twMerge + clsx manualmente."

Hooks customizados

claude "Crie src/hooks/useLocalStorage.ts: hook genérico que persiste estado no localStorage com tipagem TypeScript. Deve aceitar key (string) e initialValue (T), retornar [T, (value: T | ((prev: T) => T)) => void] igual ao useState. Deve tratar erros de SSR (window não definido) e erros de quota excedida. Crie src/hooks/useMediaQuery.ts: hook que aceita uma query string (ex.: '(min-width: 768px)') e retorna boolean indicando se a media query corresponde. Deve atualizar em tempo real quando a viewport muda."

Tipos compartilhados

claude "Crie src/types/task.ts com os tipos: - TaskStatus: 'pending' | 'in_progress' | 'completed' - TaskPriority: 'low' | 'medium' | 'high' | 'critical' - Task: { id: string, title: string, description?: string, status: TaskStatus, priority: TaskPriority, assignedTo?: string, createdAt: string, updatedAt: string } - CreateTaskInput: Omit<Task, 'id' | 'createdAt' | 'updatedAt'> - UpdateTaskInput: Partial<CreateTaskInput> Crie src/types/user.ts com: - User: { id: string, name: string, email: string, avatar?: string } - LoginInput: { email: string, password: string } - RegisterInput: LoginInput & { name: string, confirmPassword: string }"

Validações com Zod

opencode "Crie src/lib/validation.ts com schemas Zod: - loginSchema: email (email válido), password (string min 8) - registerSchema: name (string 3-100), email (email válido), password (strongPassword: 8+ chars, 1 uppercase, 1 number), confirmPassword (must match password via refine) - createTaskSchema: title (string 3-200), description (string opcional), priority (enum opcional) - updateTaskSchema: todos opcionais Exporte também os tipos inferidos: type LoginInput = z.infer<typeof loginSchema>"

Integração com formulários

claude "Crie src/components/forms/TaskForm.tsx usando react-hook-form com zodResolver. O formulário deve ter campos: title (Input), description (textarea), priority (select). Deve usar o schema createTaskSchema para validação. Props: onSubmit (função que recebe dados validados), initialValues (opcional para edição). Deve exibir erros de campo inline usando o componente Input com a prop error."

Com isso, o componentes React IA evolui de um conjunto solto de elementos para um design system estruturado com padrões consistentes, utilitários compartilhados e validação centralizada.

Imagem sugerida: Árvore de diretórios do projeto com os componentes atômicos, hooks, tipos e schemas organizados, destacando a estrutura do design system.

Exemplo completo: formulário de cadastro integrado

Para mostrar como tudo se conecta, vamos criar uma página de dashboard que usa todos os componentes do design system em um fluxo real. Este exemplo integra Claude Code (estrutura) e Codex (dados mockados e testes) em um único comando coordenado.

Página do dashboard

claude "Crie src/app/dashboard/page.tsx com: 1. Um header com o título 'Dashboard' e um botão 'Nova Tarefa' que abre o Modal com o TaskForm 2. Uma grade de cards (Card) mostrando estatísticas: total de tarefas, concluídas, pendentes, em andamento 3. Uma lista de tarefas usando Card com Badge de status e prioridade 4. Toggle de tema claro/escuro no header 5. Dados mockados em src/lib/mock-data.ts para teste (5 tarefas com status e prioridades variados) Use os componentes Button, Input, Badge, Card, Modal criados anteriormente. Importe os tipos de task.ts. Use os hooks useLocalStorage e useMediaQuery. Faça a página ser fully responsive com Tailwind."

Testes da página

opencode "Crie tests/Dashboard.test.tsx: 1. Renderização: deve mostrar título 'Dashboard', deve exibir botão 'Nova Tarefa', deve mostrar os 5 cards de tarefas 2. Interação: clicar em 'Nova Tarefa' abre o modal com o formulário, preencher título e submit fecha o modal 3. Filtragem (mock): ao clicar em um badge de status, a lista deve filtrar tarefas por aquele status 4. Tema: o toggle de tema deve alternar entre claro e escuro Use MockServiceWorker ou mocking manual para os dados mockados. Dica: importe os dados de src/lib/mock-data.ts."

Pipeline de build e validação

claude "Verifique o projeto completo: rode 'npm run build' para garantir que o Next.js compila sem erros de TypeScript. Se houver erros, analise a causa raiz e corrija. Depois rode 'npm test' para garantir que todos os testes passam. Faça os ajustes necessários para build e testes verdes."

Resultado final

O dashboard completo inclui:

  • Design system consistente: Button, Input, Badge, Card, Modal seguindo as mesmas convenções de props e estilo
  • Validação em tempo real: formulários com Zod + react-hook-form exibem erros inline
  • Testes automatizados: cada componente tem testes unitários e de snapshot
  • Tema claro/escuro: toggle funcional com persistência em localStorage
  • Código 100% TypeScript: sem any, sem violações de strict mode
  • Build zero erros: Next.js compila sem warnings

Tudo isso gerado em aproximadamente 2 horas de trabalho com agentes, contra 8-10 horas se feito manualmente.

Imagem sugerida: Captura de tela do dashboard final no navegador, mostrando cards de tarefas com badges de status, modal de criação aberto e toggle de tema.

FAQ — Perguntas Frequentes

Preciso saber TypeScript para usar agentes de IA no desenvolvimento React?

Sim, é fundamental. Agentes de IA geram código tipado, mas você precisa entender os tipos para revisar, ajustar e integrar os componentes. O agente acelera a escrita, mas a responsabilidade pela correção e segurança do código é sempre do desenvolvedor.

Claude Code ou Codex: qual é melhor para componentes React?

Não existe o melhor — existe o mais adequado para cada tarefa. Claude Code entende melhor o contexto do projeto e é ideal para criar a estrutura dos componentes, refatorar e integrar páginas. Codex é mais rápido para gerar testes, schemas de validação e código repetitivo. A melhor estratégia é usar os dois em orquestração.

Os componentes gerados por IA seguem boas práticas de acessibilidade?

Depende do prompt. Se você explicitamente pedir atributos ARIA, roles, focus management e suporte a teclado, os agentes geram código com boas práticas de acessibilidade. Mas a revisão humana ainda é necessária — especialmente para padrões complexos como modais e menus dropdown.

Como garantir que o design system gerado por IA seja consistente?

Use um arquivo de tokens de design (cores, tipografia, espaçamentos) e faça todos os componentes referenciarem esses tokens. Claude Code respeita padrões existentes no projeto — se você definir os tokens primeiro, todos os componentes gerados seguirão as mesmas referências.

Agentes de IA funcionam bem com Next.js App Router?

Sim. Claude Code e Codex conhecem as convenções do App Router (layout.tsx, page.tsx, loading.tsx, error.tsx, server components vs client components). Basta especificar no prompt que o projeto usa App Router que os agentes geram o código com as exportações e diretivas corretas (use client, etc.).

Dá para usar Claude Code e Codex simultaneamente no mesmo frontend?

Sim. Com o Orquestra, você conecta Claude Code e Codex no mesmo canvas infinito, define papéis (ex.: Claude Code cuida dos componentes, Codex cuida dos testes) e sincroniza o diretório do projeto. Ambos trabalham em paralelo nos mesmos arquivos sem conflito de edição.

Comece a desenvolver componentes React com agentes hoje

Neste tutorial, você viu na prática como TypeScript React agentes IA pode transformar o desenvolvimento frontend. Usamos Claude Code para estruturar o projeto, criar componentes atômicos e integrar páginas; Codex para gerar testes e schemas de validação; e a combinação dos dois para evoluir de componentes soltos para um design system coeso e testado.

O resultado é um dashboard funcional com componentes tipados, testes automatizados, tema dinâmico e formulários com validação — tudo construído em horas, não dias.

O segredo não está em usar um único agente para tudo, mas em orquestrar Claude Code e Codex onde cada um entrega mais valor:

EtapaAgentePor quê
Setup do projeto Next.js + TypeScriptClaude CodeEntende o ecossistema Next.js e configura dependências compatíveis
Componentes atômicos (Button, Input, Badge, Card, Modal)Claude CodeMantém consistência arquitetural e reusa padrões do projeto
Testes unitários e de snapshotCodexGeração rápida de código repetitivo com cobertura ampla
Schemas de validação ZodCodexCódigo padronizado e sem erros de digitação
Refatoração e integração de páginasClaude CodeCompreensão profunda do contexto e da arquitetura

Quer levar essa orquestração para o próximo nível? O Orquestra foi construído exatamente para isso: conectar Claude Code, Codex e outros agentes no mesmo canvas infinito, definir papéis, sincronizar diretórios e coordenar tarefas em paralelo — tudo nativo no Windows 11, sem WSL.

Baixe o Orquestra para Windows 11 e comece seu teste grátis de 7 dias — sem necessidade de cartão de crédito.

Links internos recomendados

Links externos recomendados

Imagens/GIFs sugeridos para o post

  1. Diagrama de arquitetura: Árvore de componentes mostrando Design System (atômico) -> Componentes de página -> Páginas Next.js, com agentes de IA em cada camada
  2. Setup do projeto: Captura de tela do Windows Terminal mostrando Claude Code criando pastas e instalando dependências
  3. Componentes no VS Code: Split screen com Button, Input e Badge lado a lado, destacando props TypeScript e variantes cva
  4. Testes passando: Terminal com npm test mostrando todos os testes verdes e relatório de cobertura
  5. Dashboard final: Navegador exibindo o dashboard com cards de tarefas, badges de status, modal de criação e toggle de tema claro/escuro
  6. Árvore de diretórios: Estrutura do projeto mostrando a organização do design system, hooks, tipos e schemas

Pronto para orquestrar seus agentes?

Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Grátis por 7 dias.

Começar teste grátis