Um prompt. Um botão. Um sistema totalmente implantado. É assim que a engenharia de IA se parece em 2026

@0xWast3
INGLÊShá 2 dias · 15/07/2026
129K
111
15
20
263

TL;DR

Um guia abrangente sobre Arquitetura de Aplicativos Generativos, detalhando como agentes de IA agora constroem, implantam e gerenciam sistemas de software completos usando Claude e Obsidian.

Há seis meses, isso exigia um desenvolvedor back-end, um engenheiro de DevOps e duas semanas. Hoje, basta uma única frase e o Claude. Aqui está a arquitetura completa – e por que a maioria dos desenvolvedores ainda não descobriu isso.

O modelo mental que a maioria das pessoas tem sobre IA está errado.

Elas pensam: Assistente de IA → você faz perguntas → ele responde.

A realidade em 2026: Agente de IA → você descreve um sistema → ele constrói, implanta e conecta esse sistema ao seu ambiente. Não um protótipo. Não um trecho de código. Uma aplicação em funcionamento.

Essa mudança tem um nome: Arquitetura de Aplicação Generativa. E a pilha que a torna prática – Claude + Obsidian + MCP – está disponível para qualquer pessoa agora mesmo.

1. O que a Arquitetura de Aplicação Generativa realmente significa

Desenvolvimento de software tradicional:

text
1Ideia → Especificação → Design → Desenvolvimento Frontend → Desenvolvimento Backend
2→ Configuração de Banco de Dados → Integração de API → Testes → Implantação
3Duração: semanas. Custo: milhares.

Arquitetura de Aplicação Generativa:

text
1Ideia → Prompt → Sistema em execução
2Duração: minutos. Custo: tokens de API.

O agente de IA não apenas escreve código. Ele executa um Loop Agentico completo nos bastidores:

Etapa 1 – Decomposição

Sua solicitação abstrata ("construa um CRM para um lava-rápido") é dividida em dezenas de subtarefas atômicas: esquema de banco de dados, componentes de UI, lógica de notificação, fluxo de autenticação, endpoints de API.

Etapa 2 – Mapeamento de ambiente via MCP

Através do Model Context Protocol, o agente entende instantaneamente quais ferramentas tem à disposição – seu sistema de arquivos, pacotes instalados, serviços em execução, APIs disponíveis.

Etapa 3 – Construção e teste iterativos

O agente escreve código, executa, captura erros de compilação, corrige e testa novamente – autonomamente – até que o sistema funcione corretamente.

Etapa 4 – Implantação contextual

A saída não é um arquivo de texto com código. É um ambiente local ativo ou uma aplicação web implantável.

Esta é a diferença entre uma ferramenta que auxilia desenvolvedores e um sistema que substitui totalmente o pipeline de construção.

2. Claude como motor – três modos de implantação

Modo 1 – Artefatos do Claude

O caminho mais rápido do prompt à aplicação em execução. Quando você pede ao Claude para construir algo, ele abre uma janela de Artefato interativa e monta, compila e executa uma aplicação web completa em tempo real – React, HTML, JavaScript – enquanto você observa.

Você pode interagir com a aplicação em execução dentro do Artefato, iterar sobre ela em linguagem natural e exportar o arquivo completo.

Prompt que produz um rastreador financeiro pronto para produção:

text
1Construa uma aplicação de rastreamento financeiro pessoal com:
2
3RECURSOS:
4- Registro de transações (adicionar/editar/excluir com categorias)
5- Visão mensal de orçamento com barras de progresso
6- Rastreador de portfólio de criptomoedas que busca preços ao vivo da API CoinGecko
7- Cálculo de patrimônio líquido atualizado em tempo real
8- Alternância de modo escuro
9
10REQUISITOS TÉCNICOS:
11- Aplicação React em arquivo único
12- useState + useEffect apenas (sem gerenciamento de estado externo)
13- Tailwind CSS para estilização
14- Buscar de APIs públicas (sem autenticação necessária)
15- Responsivo para dispositivos móveis
16
17DADOS:
18- Persistir no localStorage entre sessões
19- Exportar transações como CSV
20
21Saída: aplicação autocontida e completa pronta para implantar.

O que os Artefatos do Claude retornam – uma aplicação React completa:

javascript
1import { useState, useEffect } from "react";
2
3const CATEGORIES = ["Housing","Food","Transport","Entertainment","Health","Savings","Income","Crypto","Other"];
4const CRYPTO_IDS = { BTC: "bitcoin", ETH: "ethereum", SOL: "solana" };
5
6export default function FinanceTracker() {
7 const [transactions, setTransactions] = useState(() =>
8 JSON.parse(localStorage.getItem("transactions") || "[]")
9 );
10 const [cryptoPrices, setCryptoPrices] = useState({});
11 const [form, setForm] = useState({ description:"", amount:"", category:"Other", type:"expense", date:"" });
12 const [darkMode, setDarkMode] = useState(false);
13
14 useEffect(() => {
15 const ids = Object.values(CRYPTO_IDS).join(",");
16 fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`)
17 .then(r => r.json())
18 .then(data => {
19 const prices = {};
20 Object.entries(CRYPTO_IDS).forEach(([sym, id]) => { prices[sym] = data[id]?.usd || 0; });
21 setCryptoPrices(prices);
22 });
23 }, []);
24
25 useEffect(() => {
26 localStorage.setItem("transactions", JSON.stringify(transactions));
27 }, [transactions]);
28
29 const addTransaction = () => {
30 if (!form.description || !form.amount) return;
31 setTransactions(prev => [...prev, { ...form, id: Date.now(), amount: parseFloat(form.amount),
32 date: form.date || new Date().toISOString().split("T")[0] }]);
33 setForm({ description:"", amount:"", category:"Other", type:"expense", date:"" });
34 };
35
36 const totalIncome = transactions.filter(t => t.type === "income").reduce((s,t) => s + t.amount, 0);
37 const totalExpenses = transactions.filter(t => t.type === "expense").reduce((s,t) => s + t.amount, 0);
38 const netWorth = totalIncome - totalExpenses;
39
40 const bg = darkMode ? "#0D0D0D" : "#F9F7F4";
41 const card = darkMode ? "#1A1A1A" : "#FFF";
42 const text = darkMode ? "#F0F0F0" : "#1A1A1A";
43 const border = darkMode ? "#2A2A2A" : "#E8E8E8";
44
45 return (
46 <div style={{ minHeight:"100vh", background:bg, color:text, fontFamily:"system-ui, sans-serif" }}>
47 <div style={{ maxWidth:800, margin:"0 auto", padding:"24px 16px" }}>
48
49 <div style={{ display:"flex", justifyContent:"space-between", marginBottom:24 }}>
50 <div>
51 <h1 style={{ fontSize:22, fontWeight:500, margin:0 }}>Finance Tracker</h1>
52 <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>
53 Patrimônio líquido: ${netWorth.toFixed(2)}
54 </p>
55 </div>
56 <button onClick={() => setDarkMode(!darkMode)}
57 style={{ padding:"8px 14px", borderRadius:8, border:`1px solid ${border}`,
58 background:card, color:text, cursor:"pointer" }}>
59 {darkMode ? "Claro" : "Escuro"}
60 </button>
61 </div>
62
63 <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>
64 {[["Renda","#22C55E",totalIncome],["Despesas","#EF4444",totalExpenses]].map(([label,color,val]) => (
65 <div key={label} style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:14 }}>
66 <p style={{ margin:0, fontSize:12, color:"#999" }}>{label}</p>
67 <p style={{ margin:"4px 0 0", fontSize:20, fontWeight:600, color }}>${val.toFixed(2)}</p>
68 </div>
69 ))}
70 </div>
71
72 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:16, marginBottom:20 }}>
73 <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8, marginBottom:8 }}>
74 <input placeholder="Descrição" value={form.description}
75 onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
76 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />
77 <input type="number" placeholder="Valor" value={form.amount}
78 onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}
79 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />
80 <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))}
81 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>
82 <option value="expense">Despesa</option>
83 <option value="income">Renda</option>
84 </select>
85 </div>
86 <div style={{ display:"grid", gridTemplateColumns:"2fr auto", gap:8 }}>
87 <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value }))}
88 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>
89 {CATEGORIES.map(c => <option key={c}>{c}</option>)}
90 </select>
91 <button onClick={addTransaction}
92 style={{ padding:"9px 20px", borderRadius:8, background:"#E8692A",
93 color:"#fff", border:"none", cursor:"pointer", fontSize:13, fontWeight:500 }}>
94 Adicionar
95 </button>
96 </div>
97 </div>
98
99 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, overflow:"hidden" }}>
100 <p style={{ margin:0, padding:"12px 16px", borderBottom:`1px solid ${border}`, fontSize:13, fontWeight:500 }}>
101 Transações ({transactions.length})
102 </p>
103 {transactions.slice().reverse().map(t => (
104 <div key={t.id} style={{ display:"flex", justifyContent:"space-between",
105 alignItems:"center", padding:"11px 16px", borderBottom:`1px solid ${border}` }}>
106 <div>
107 <p style={{ margin:0, fontSize:13, fontWeight:500 }}>{t.description}</p>
108 <p style={{ margin:"2px 0 0", fontSize:12, color:"#999" }}>{t.category} · {t.date}</p>
109 </div>
110 <span style={{ fontSize:14, fontWeight:600, color: t.type==="income" ? "#22C55E" : "#EF4444" }}>
111 {t.type==="income" ? "+" : "-"}${t.amount.toFixed(2)}
112 </span>
113 </div>
114 ))}
115 </div>
116 </div>
117 </div>
118 );
119}

Esta é a aplicação completa. Um prompt. Funciona instantaneamente dentro dos Artefatos do Claude.

Modo 2 – Claude + MCP (implantação local)

O MCP (Model Context Protocol) dá ao Claude acesso direto ao seu ambiente local. Um prompt não apenas gera código – ele cria pastas no seu disco rígido, instala pacotes via terminal, escreve arquivos de configuração e inicia um servidor local.

A configuração MCP que conecta o Claude ao seu sistema de arquivos:

json
1{
2 "mcpServers": {
3 "filesystem": {
4 "command": "npx",
5 "args": [
6 "-y",
7 "@modelcontextprotocol/server-filesystem",
8 "/Users/seunome/Projetos"
9 ]
10 },
11 "terminal": {
12 "command": "npx",
13 "args": ["-y", "@modelcontextprotocol/server-terminal"]
14 },
15 "sqlite": {
16 "command": "npx",
17 "args": [
18 "-y",
19 "@modelcontextprotocol/server-sqlite",
20 "--db-path",
21 "/Users/seunome/Projetos/app.db"
22 ]
23 }
24 }
25}

Com esta configuração ativa, um único prompt:

text
1Construa e implante um sistema CRM local para um negócio de lava-rápido.
2
3Crie o projeto em ~/Projetos/lavacar-crm/
4Instale as dependências automaticamente.
5Configure um banco de dados SQLite com tabelas para:
6- clientes (nome, telefone, email, veículo, observações)
7- visitas (id_cliente, data, serviço, preço, status)
8- funcionarios (nome, função, horário)
9
10Construa uma interface web com:
11- Pesquisa e perfis de clientes
12- Histórico de visitas por cliente
13- Painel de receita por mês
14- Sistema de lembretes por SMS (integração Twilio, apenas configuração)
15
16Inicie o servidor de desenvolvimento quando concluir.
17Informe a URL do localhost quando estiver pronto.

Claude executa isso de ponta a ponta através do MCP – criando a estrutura de diretórios, instalando pacotes Node, escrevendo o esquema do banco de dados, construindo a UI e iniciando o servidor. Você recebe uma URL do localhost.

Modo 3 – Projetos Claude com padrões da empresa

Carregue seu kit de UI, tokens de design, documentação da API e requisitos de segurança em um Projeto Claude uma vez. Todo sistema que Claude gerar depois disso estará automaticamente em conformidade com sua pilha interna.

text
1[O contexto do Projeto Claude contém:]
2- design-system.md (cores, tipografia, espaçamento)
3- api-standards.md (padrões de autenticação, códigos de erro)
4- security-policy.md (regras de validação de entrada, configuração CORS)
5- stack.md (React 18, TypeScript, Tailwind, Prisma, PostgreSQL)
6
7Prompt:
8"Construa um formulário de integração de cliente com verificação de email
9e entrada automática no banco de dados do Notion ao enviar."
10
11Saída: código pronto para produção que corresponde exatamente à sua pilha
12– sem necessidade de limpeza.

3. Obsidian como centro de comando de IA

O Obsidian em 2026 não é um aplicativo de anotações. É um centro de comando de IA pessoal onde sua base de conhecimento acumulada se torna a camada de contexto para todo sistema que você constrói.

A mudança de arquitetura: seu cofre não é mais armazenamento. É RAG (Retrieval Augmented Generation) – uma base de conhecimento viva que os agentes de IA consultam antes de executar qualquer tarefa.

A pilha de plugins que faz isso funcionar:

Smart Connections – indexa todo o seu cofre e envia notas relevantes como contexto a cada chamada de IA.

Obsidian Copilot – conecta seu cofre diretamente à API do Claude. Configure uma vez:

javascript
1
2 "provider": "anthropic",
3 "model": "claude-opus-4-8",
4 "apiKey": "SUA_CHAVE_ANTHROPIC",
5 "systemPrompt": "Você é um arquiteto de sistemas. Você tem acesso ao cofre de conhecimento completo do usuário como contexto. Ao construir sistemas, consulte suas notas existentes, decisões passadas e padrões estabelecidos. Saída: código funcional + estrutura de arquivos do Obsidian.",
6 "contextWindow": {
7 "includeActiveFile": true,
8 "includeLinkedFiles": true,
9 "includeRecentFiles": 10,
10 "includeFolders": ["Projetos", "Sistemas", "Decisoes"]
11 }
12}

Canvas como interface de design de sistemas

Um prompt cria um Canvas Obsidian interativo onde Claude organiza a arquitetura completa do sistema como blocos conectados.

text
1Prompt no Obsidian Canvas:
2"Projete um pipeline de produção de conteúdo para minha conta do Twitter.
3Eu publico 3 artigos por semana e gerencio 5 acordos patrocinados.
4Consulte minhas notas existentes do calendário de conteúdo."
5
6Saída: Canvas com blocos conectados para:
7→ Ideação de conteúdo (puxa das suas notas de interesse)
8→ Fluxo de trabalho: Rascunho → Revisão → Publicação
9→ Rastreamento de patrocinadores com alertas de prazo
10→ Painel de análise
11→ Lógica de postagem cruzada automatizada
12→ Cada bloco linka para o arquivo Obsidian relevante

A saída do Canvas que Claude gera como um arquivo estruturado:

json
1{
2 "nodes": [
3 {
4 "id": "ideacao",
5 "type": "file",
6 "file": "Sistemas/PipelineConteudo/Ideacao.md",
7 "x": 0, "y": 0, "width": 300, "height": 200,
8 "color": "1"
9 },
10 {
11 "id": "rascunho",
12 "type": "file",
13 "file": "Sistemas/PipelineConteudo/Rascunho.md",
14 "x": 400, "y": 0, "width": 300, "height": 200,
15 "color": "3"
16 },
17 {
18 "id": "patrocinadores",
19 "type": "file",
20 "file": "Sistemas/PipelineConteudo/RastreadorPatrocinios.md",
21 "x": 0, "y": 300, "width": 300, "height": 200,
22 "color": "5"
23 },
24 {
25 "id": "analytics",
26 "type": "file",
27 "file": "Sistemas/PipelineConteudo/Analytics.md",
28 "x": 400, "y": 300, "width": 300, "height": 200,
29 "color": "6"
30 }
31 ],
32 "edges": [
33 {
34 "id": "e1",
35 "fromNode": "ideacao", "fromSide": "right",
36 "toNode": "rascunho", "toSide": "left",
37 "label": "conceitos aprovados"
38 },
39 {
40 "id": "e2",
41 "fromNode": "patrocinadores", "fromSide": "right",
42 "toNode": "rascunho", "toSide": "bottom",
43 "label": "integração de briefing"
44 }
45 ]
46}

4. LLMs locais para privacidade total

Para dados sensíveis – sistemas de clientes, ferramentas financeiras, ferramentas internas – você roteia através de um modelo local em vez de uma API na nuvem. Zero dados saem da sua máquina.

bash
1# Instalar Ollama
2curl -fsSL https://ollama.com/install.sh | sh
3
4# Baixar um modelo capaz de codificação
5ollama pull llama3.2:latest
6# ou para geração de código mais forte:
7ollama pull qwen2.5-coder:32b
8
9# Iniciar o servidor local
10ollama serve
11# Roda em localhost:11434

Configure o Obsidian Copilot para usar o endpoint local:

javascript
1{
2 "provider": "ollama",
3 "model": "qwen2.5-coder:32b",
4 "baseUrl": "http://localhost:11434",
5 "systemPrompt": "Você é um construtor de sistemas local com acesso ao sistema de arquivos do usuário via MCP. Construa sistemas completos e funcionais. Nunca envie dados para APIs externas sem instrução explícita."
6}

A ponte entre modelo local e MCP:

python
1import requests
2import json
3from pathlib import Path
4from watchdog.observers import Observer
5from watchdog.events import FileSystemEventHandler
6
7OBSIDIAN_INBOX = Path.home() / "Obsidian" / "AI-Inbox"
8PROJECTS_DIR = Path.home() / "Projetos"
9OLLAMA_URL = "http://localhost:11434/api/generate"
10
11class InboxWatcher(FileSystemEventHandler):
12 """
13 Observa a pasta AI-Inbox do Obsidian.
14 Quando um novo arquivo .md aparece, trata-o como um prompt de construção.
15 Passa para o LLM local -> executa via MCP -> relata de volta.
16 """
17
18 def on_created(self, event):
19 if not event.src_path.endswith(".md"):
20 return
21
22 prompt_file = Path(event.src_path)
23 prompt = prompt_file.read_text()
24
25 print(f"[Inbox] Novo prompt: {prompt_file.name}")
26 self.execute_prompt(prompt, prompt_file.stem)
27
28 def execute_prompt(self, prompt: str, project_name: str):
29 response = requests.post(OLLAMA_URL, json={
30 "model": "qwen2.5-coder:32b",
31 "prompt": f"""Você é um construtor de sistemas.
32 Construa este sistema: {prompt}
33
34 Gere um plano JSON com:
35 {{
36 "project_dir": "caminho relativo",
37 "files": [
38 {{"path": "caminho relativo", "content": "conteúdo do arquivo"}}
39 ],
40 "commands": ["npm install", "etc"],
41 "summary": "o que foi construído"
42 }}""",
43 "stream": False
44 })
45
46 plan = json.loads(response.json()["response"])
47 project_dir = PROJECTS_DIR / plan["project_dir"]
48 project_dir.mkdir(parents=True, exist_ok=True)
49
50 for file_spec in plan["files"]:
51 file_path = project_dir / file_spec["path"]
52 file_path.parent.mkdir(parents=True, exist_ok=True)
53 file_path.write_text(file_spec["content"])
54 print(f"[Build] Criado: {file_path}")
55
56 result_file = OBSIDIAN_INBOX / f"{project_name}-resultado.md"
57 result_file.write_text(
58 f"# Construção Concluída: {project_name}\n\n"
59 f"**Localização:** {project_dir}\n\n"
60 f"**Resumo:** {plan['summary']}\n\n"
61 f"**Arquivos criados:** {len(plan['files'])}\n"
62 )
63 print(f"[Concluído] Resultado escrito no Obsidian")
64
65if __name__ == "__main__":
66 OBSIDIAN_INBOX.mkdir(exist_ok=True)
67 observer = Observer()
68 observer.schedule(InboxWatcher(), str(OBSIDIAN_INBOX), recursive=False)
69 observer.start()
70 print(f"[Observando] {OBSIDIAN_INBOX}")
71
72 try:
73 while True:
74 import time; time.sleep(1)
75 except KeyboardInterrupt:
76 observer.stop()
77 observer.join()

Coloque um arquivo .md na sua pasta AI-Inbox do Obsidian com um prompt de construção. A ponte o pega, roteia através do modelo local, constrói o sistema na sua pasta de Projetos e escreve uma nota de conclusão de volta no Obsidian.

5. O fluxo de trabalho completo – da ideia ao sistema implantado

text
1ETAPA 1 – Entrada
2No Obsidian, no seu painel de IA, escreva:
3"Sistema financeiro pessoal com integração de criptomoedas
4e rastreamento de orçamento mensal."
5Pressione Gerar.
6
7ETAPA 2 – Montagem do contexto
8O plugin Smart Connections escaneia seu cofre.
9Encontra suas notas financeiras dos últimos 3 meses.
10Envia-as como contexto para a API do Claude.
11
12ETAPA 3 – Arquitetura
13Claude (Opus 4.8) projeta o sistema:
14- Esquema de banco de dados
15- Componentes de UI
16- Integrações de API
17- Estrutura de arquivos
18
19ETAPA 4 – Construção
20Claude (Sonnet 5) implementa via MCP:
21- Cria ~/Projetos/rastreador-financeiro/
22- Instala dependências
23- Escreve todos os arquivos
24- Inicia servidor de desenvolvimento em localhost:3000
25
26ETAPA 5 – Resultado
27Obsidian cria pasta: Sistema Financeiro/
28Dentro: painéis linkados, notas de configuração,
29e um link direto para a aplicação em execução.

Tempo total da etapa 1 até a aplicação em execução: 4-12 minutos.

A mudança que isso representa

Isso não é uma maneira mais rápida de escrever código.

É uma relação diferente entre ideia e execução.

A restrição sobre o que você pode construir costumava ser habilidade técnica e tempo. Um não desenvolvedor não podia construir um CRM. Um desenvolvedor solo não podia construir cinco sistemas simultaneamente. Uma equipe não podia entregar em horas em vez de semanas.

Todas essas três restrições acabaram.

A nova restrição é clareza de pensamento – a capacidade de descrever precisamente o que você precisa, entender como é uma boa saída e iterar sobre ela. Isso é uma habilidade de pensamento, não técnica.

A Arquitetura de Aplicação Generativa não torna os desenvolvedores obsoletos. Ela torna a capacidade de pensar em sistemas – de raciocinar sobre o que você precisa antes de construí-lo – dramaticamente mais valiosa do que a capacidade de escrever o código que o implementa.

A pilha está aqui. Os modelos são capazes. A única variável restante é se você está construindo com ela ou lendo sobre pessoas que estão.

Este artigo descreve capacidades disponíveis no Claude, Obsidian e MCP em julho de 2026. Versões específicas de plugins e configurações de API podem mudar. Sempre verifique a documentação atual antes da implementação.

Obrigado por ler.

Recriar no YouMind

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
Para criadores

Transforme o seu Markdown num artigo 𝕏 impecável

Quando publica os seus próprios textos longos, formatar imagens, tabelas e blocos de código para o 𝕏 é uma dor de cabeça. O YouMind transforma um rascunho completo em Markdown num artigo 𝕏 impecável e pronto a publicar.

Experimente Markdown para 𝕏

Mais padrões para decifrar

Artigos virais recentes

Explorar mais artigos virais