DEV Community

Cover image for IA no desenvolvimento web: de escrever código para orquestrar sistemas
Taina Costa
Taina Costa

Posted on

IA no desenvolvimento web: de escrever código para orquestrar sistemas

Passei os últimos meses integrando APIs de IA em projetos reais e percebi uma mudança que ninguém está falando: não é sobre substituir desenvolvedores, é sobre mudar fundamentalmente o que a gente faz no dia a dia.

O que mudou de verdade

Todo mundo fala de ChatGPT escrevendo código. Mas o que importa mesmo é que agora você pode adicionar capacidades cognitivas nas suas aplicações tão facilmente quanto você adiciona um banco de dados. Precisa classificar texto? Gerar conteúdo? Extrair estrutura de dados não estruturados? Antes você treinava um modelo ou usava regex insanos. Hoje você chama uma API.

Isso muda o jogo porque você para de escrever lógica complexa e começa a orquestrar comportamentos. É arquitetura, não algoritmo.

O padrão que você vai usar toda hora

Aqui está o código que eu mais escrevo ultimamente - uma edge function que pega input do usuário e retorna JSON estruturado:

// app/api/analyze/route.ts
import { Anthropic } from '@anthropic-ai/sdk';

export async function POST(req: Request) {
  const { content } = await req.json();
  const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

  const message = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 1024,
    messages: [{
      role: 'user',
      content: `Extract key points from this text as JSON with keys: topic, sentiment, actionItems. Text: ${content}`
    }]
  });

  const result = JSON.parse(message.content[0].text);
  return Response.json(result);
}
Enter fullscreen mode Exit fullscreen mode

Simples, mas repara: você não escreveu nenhuma lógica de análise. Você descreveu o que queria e a IA fez. Isso funciona para 80% dos casos de processamento de texto que você encontra.

Streaming: a parte que ninguém mostra

O problema do código acima? Latência. Modelos de IA demoram. A mágica moderna é streaming - você vai renderizando a resposta conforme ela chega:

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

  const stream = await anthropic.messages.stream({
    model: 'claude-3-5-sonnet-20241022',
    max_tokens: 1024,
    messages: [{ role: 'user', content: prompt }]
  });

  const encoder = new TextEncoder();
  const readable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        if (chunk.type === 'content_block_delta' && chunk.delta.type === 'text_delta') {
          controller.enqueue(encoder.encode(chunk.delta.text));
        }
      }
      controller.close();
    }
  });

  return new Response(readable, {
    headers: { 'Content-Type': 'text/plain; charset=utf-8' }
  });
}
Enter fullscreen mode Exit fullscreen mode

No frontend, você consome com um loop simples:

const response = await fetch('/api/analyze', {
  method: 'POST',
  body: JSON.stringify({ prompt: userInput })
});

const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const text = decoder.decode(value);
  setContent(prev => prev + text); // React state update
}
Enter fullscreen mode Exit fullscreen mode

Isso transforma a experiência. Em vez de spinner por 5 segundos, o usuário vê a resposta se formando. Parece detalhe, mas é a diferença entre "lento" e "mágico".

O padrão de composição que você precisa dominar

Aqui está onde fica interessante. Você não chama IA uma vez - você compõe chamadas. Exemplo real que implementei: um sistema de sugestões de código que primeiro analisa o contexto, depois gera sugestões, depois filtra as irrelevantes:

async function generateContextualSuggestions(code: string, cursor: number) {
  // Step 1: Understand context
  const context = await anthropic.messages.create({
    model: 'claude-3-5-haiku-20241022', // fast model for analysis
    max_tokens: 512,
    messages: [{
      role: 'user',
      content: `What is the user trying to do at cursor position ${cursor}? Code: ${code}`
    }]
  });

  const intent = JSON.parse(context.content[0].text);

  // Step 2: Generate suggestions based on intent
  const suggestions = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20241022', // powerful model for generation
    max_tokens: 2048,
    messages: [{
      role: 'user',
      content: `Generate 5 code completions for: ${intent.description}`
    }]
  });

  return suggestions.content[0].text;
}
Enter fullscreen mode Exit fullscreen mode

Repara que usei Haiku para análise (mais rápido, mais barato) e Sonnet para geração (mais capaz). Você orquestra modelos diferentes para partes diferentes do problema. É como escolher entre PostgreSQL e Redis - cada ferramenta tem seu uso.

Os problemas que você vai enfrentar

Custo. Cada chamada custa dinheiro. Você precisa cachear agressivamente. Eu uso um padrão simples: hash do input como chave de cache, TTL de 24h para respostas determinísticas:

const cacheKey = createHash('sha256').update(content).digest('hex');
const cached = await redis.get(cacheKey);
if (cached) return JSON.parse(cached);

// ... make API call ...

await redis.setex(cacheKey, 86400, JSON.stringify(result));
Enter fullscreen mode Exit fullscreen mode

Latência. Mesmo com streaming, é mais lento que lógica tradicional. Use IA para o que humanos fariam devagar (análise de contexto, geração criativa), não para o que código faz rápido (validação, cálculos).

Consistência. LLMs não são determinísticos. Se você precisa de output previsível toda vez, passe temperature: 0 e valide o schema da resposta:

const result = JSON.parse(response);
if (!result.topic || !Array.isArray(result.actionItems)) {
  throw new Error('Invalid response format');
}
Enter fullscreen mode Exit fullscreen mode

O que isso significa para você

Seu trabalho está mudando de "implementar algoritmos" para "desenhar fluxos". Você vai passar mais tempo decidindo quando usar IA (caro, lento, flexível) vs quando usar código tradicional (barato, rápido, rígido).

A skill que importa agora é arquitetura de sistemas: saber decompor problemas, escolher as ferramentas certas para cada parte, e fazer tudo funcionar junto. O código em si? Cada vez menos importante.

Não é sobre IA escrever seu código. É sobre você usar IA como mais uma ferramenta na stack - junto com banco de dados, cache, filas, e tudo mais que você já orquestra.

TL;DR

  • IA em produção não é sobre substituir devs, é adicionar capacidades cognitivas via API
  • O padrão fundamental: edge function + LLM API + streaming para UX fluida
  • Componha múltiplas chamadas com modelos diferentes (rápido vs poderoso) para cada etapa
  • Cache agressivo, valide schemas, use temperature: 0 quando precisar de consistência
  • Seu trabalho está virando orquestração de sistemas, não escrita de algoritmos

Top comments (0)