Un prompt. Un pulsante. Un sistema completamente distribuito. Ecco come appare l'ingegneria dell'IA nel 2026

@0xWast3
INGLESE2 giorni fa · 15 lug 2026
129K
111
15
20
263

TL;DR

Una guida completa alla Generative App Architecture, che descrive in dettaglio come gli agenti IA ora costruiscono, distribuiscono e gestiscono interi sistemi software utilizzando Claude e Obsidian.

Sei mesi fa servivano uno sviluppatore backend, un ingegnere DevOps e due settimane. Oggi bastano una singola frase e Claude. Ecco l'architettura completa - e perché la maggior parte degli sviluppatori non l'ha ancora capito.

Il modello mentale che la maggior parte delle persone ha dell'IA è sbagliato.

Loro pensano: Assistente IA → fai una domanda → risponde.

La realtà nel 2026: Agente IA → descrivi un sistema → lo costruisce, lo distribuisce e lo collega al tuo ambiente. Non un prototipo. Non uno snippet di codice. Un'applicazione funzionante.

Questo cambiamento ha un nome: Architettura per App Generativa. E lo stack che la rende pratica - Claude + Obsidian + MCP - è disponibile per chiunque, subito.

1. Cosa significa realmente Architettura per App Generativa

Sviluppo software tradizionale:

text
1Idea → Specifica → Progettazione → Sviluppo frontend → Sviluppo backend
2→ Configurazione database → Integrazione API → Test → Rilascio
3Durata: settimane. Costo: migliaia.

Architettura per App Generativa:

text
1Idea → Prompt → Sistema funzionante
2Durata: minuti. Costo: token API.

L'agente IA non si limita a scrivere codice. Esegue un vero e proprio Ciclo Agentico sotto il cofano:

Passo 1 - Scomposizione

La tua richiesta astratta ("crea un CRM per un autolavaggio") viene scomposta in decine di sotto-attività atomiche: schema del database, componenti dell'interfaccia, logica di notifica, flusso di autenticazione, endpoint API.

Passo 2 - Mappatura dell'ambiente tramite MCP

Attraverso il Model Context Protocol, l'agente capisce istantaneamente a quali strumenti ha accesso - il tuo filesystem, i pacchetti installati, i servizi in esecuzione, le API disponibili.

Passo 3 - Costruzione e test iterativi

L'agente scrive codice, lo esegue, rileva errori di compilazione, li corregge e riesegue i test - in autonomia - finché il sistema non funziona correttamente.

Passo 4 - Rilascio contestuale

L'output non è un file di testo con codice. È un ambiente locale live o un'applicazione web distribuibile.

Questa è la differenza tra uno strumento che assiste gli sviluppatori e un sistema che sostituisce completamente la pipeline di sviluppo.

2. Claude come motore - tre modalità di rilascio

Modalità 1 - Claude Artifacts

Il percorso più veloce dal prompt all'applicazione funzionante. Quando chiedi a Claude di costruire qualcosa, apre una finestra Artifact interattiva e assembla, compila ed esegue un'applicazione web completa in tempo reale - React, HTML, JavaScript - mentre guardi.

Puoi interagire con l'app in esecuzione all'interno dell'Artifact, iterare in linguaggio naturale ed esportare l'archivio completo.

Prompt che produce un tracker finanziario pronto per la produzione:

text
1Crea un'applicazione per il tracciamento delle finanze personali con:
2
3CARATTERISTICHE:
4- Registro transazioni (aggiungi/modifica/elimina con categorie)
5- Vista budget mensile con barre di avanzamento
6- Tracker portafoglio crypto che recupera prezzi live dall'API CoinGecko
7- Calcolo del patrimonio netto aggiornato in tempo reale
8- Attivazione della modalità scura
9
10REQUISITI TECNICI:
11- Applicazione React in un unico file
12- Solo useState + useEffect (nessuna gestione dello stato esterna)
13- Tailwind CSS per lo styling
14- Fetch da API pubbliche (nessuna autenticazione richiesta)
15- Responsive per dispositivi mobili
16
17DATI:
18- Persisti su localStorage tra le sessioni
19- Esporta le transazioni come CSV
20
21Output: applicazione completa e autonoma pronta per il rilascio.

Cosa restituisce Claude Artifacts - un'applicazione React completa:

javascript
1import { useState, useEffect } from "react";
2
3const CATEGORIES = ["Casa","Cibo","Trasporti","Intrattenimento","Salute","Risparmio","Reddito","Crypto","Altro"];
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:"Altro", type:"spesa", 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:"Altro", type:"spesa", date:"" });
34 };
35
36 const totalIncome = transactions.filter(t => t.type === "reddito").reduce((s,t) => s + t.amount, 0);
37 const totalExpenses = transactions.filter(t => t.type === "spesa").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 }}>Tracker Finanziario</h1>
52 <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>
53 Patrimonio netto: ${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 ? "Chiara" : "Scura"}
60 </button>
61 </div>
62
63 <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>
64 {[["Reddito","#22C55E",totalIncome],["Spese","#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="Descrizione" 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="Importo" 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="spesa">Spesa</option>
83 <option value="reddito">Reddito</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 Aggiungi
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 Transazioni ({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==="reddito" ? "#22C55E" : "#EF4444" }}>
111 {t.type==="reddito" ? "+" : "-"}${t.amount.toFixed(2)}
112 </span>
113 </div>
114 ))}
115 </div>
116 </div>
117 </div>
118 );
119}

Questa è l'applicazione completa. Un singolo prompt. Funziona istantaneamente all'interno di Claude Artifacts.

Modalità 2 - Claude + MCP (rilascio locale)

MCP (Model Context Protocol) dà a Claude accesso diretto al tuo ambiente locale. Un singolo prompt non genera solo codice - crea cartelle sul tuo hard disk, installa pacchetti tramite terminale, scrive file di configurazione e avvia un server locale.

La configurazione MCP che collega Claude al tuo filesystem:

json
1{
2 "mcpServers": {
3 "filesystem": {
4 "command": "npx",
5 "args": [
6 "-y",
7 "@modelcontextprotocol/server-filesystem",
8 "/Users/yourname/Projects"
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/yourname/Projects/app.db"
22 ]
23 }
24 }
25}

Con questa configurazione attiva, un singolo prompt:

text
1Crea e rilascia un sistema CRM locale per un'attività di autolavaggio.
2
3Crea il progetto in ~/Projects/carwash-crm/
4Installa le dipendenze automaticamente.
5Configura un database SQLite con tabelle per:
6- clienti (nome, telefono, email, veicolo, note)
7- visite (id_cliente, data, servizio, prezzo, stato)
8- personale (nome, ruolo, orario)
9
10Crea un'interfaccia web con:
11- Ricerca e profili clienti
12- Storico visite per cliente
13- Dashboard entrate per mese
14- Sistema promemoria SMS (integrazione Twilio, solo configurazione)
15
16Avvia il server di sviluppo al completamento.
17Riporta l'URL localhost quando è pronto.

Claude esegue tutto questo end-to-end tramite MCP - creando la struttura di directory, installando i pacchetti Node, scrivendo lo schema del database, costruendo l'interfaccia e avviando il server. Ottieni un URL localhost.

Modalità 3 - Claude Projects con standard aziendali

Carica il tuo kit UI, i token di design, la documentazione API e i requisiti di sicurezza in un Claude Project una volta sola. Ogni sistema che Claude genera successivamente si conformerà automaticamente al tuo stack interno.

text
1[Il contesto di Claude Project contiene:]
2- design-system.md (colori, tipografia, spaziatura)
3- api-standards.md (pattern di autenticazione, codici di errore)
4- security-policy.md (regole di validazione input, configurazione CORS)
5- stack.md (React 18, TypeScript, Tailwind, Prisma, PostgreSQL)
6
7Prompt:
8"Crea un modulo di onboarding clienti con verifica email
9e inserimento automatico in un database Notion all'invio."
10
11Output: codice pronto per la produzione che corrisponde esattamente
12al tuo stack - nessuna pulizia necessaria.

3. Obsidian come centro di comando IA

Obsidian nel 2026 non è un'app per prendere appunti. È un centro di comando IA personale dove la tua base di conoscenza accumulata diventa il livello di contesto per ogni sistema che costruisci.

Il cambiamento architetturale: il tuo vault non è più solo archiviazione. È RAG (Retrieval Augmented Generation) - una base di conoscenza viva che gli agenti IA interrogano prima di eseguire qualsiasi attività.

Lo stack di plugin che lo fa funzionare:

Smart Connections - indicizza l'intero vault e invia le note pertinenti come contesto con ogni chiamata IA.

Obsidian Copilot - collega il tuo vault direttamente all'API di Claude. Configura una volta:

javascript
1
2 "provider": "anthropic",
3 "model": "claude-opus-4-8",
4 "apiKey": "YOUR_ANTHROPIC_KEY",
5 "systemPrompt": "Sei un architetto di sistemi. Hai accesso all'intero vault di conoscenza dell'utente come contesto. Quando costruisci sistemi, fai riferimento alle loro note esistenti, decisioni passate e pattern consolidati. Output: codice funzionante + struttura file Obsidian.",
6 "contextWindow": {
7 "includeActiveFile": true,
8 "includeLinkedFiles": true,
9 "includeRecentFiles": 10,
10 "includeFolders": ["Projects", "Systems", "Decisions"]
11 }
12}

Canvas come interfaccia di progettazione sistemi

Un singolo prompt crea una Canvas Obsidian interattiva dove Claude dispone l'architettura completa del sistema come blocchi collegati.

text
1Prompt in Obsidian Canvas:
2"Progetta una pipeline di produzione di contenuti per il mio account Twitter.
3Pubblico 3 articoli a settimana e gestisco 5 accordi sponsorizzati.
4Fai riferimento alle mie note esistenti del calendario dei contenuti."
5
6Output: Canvas con blocchi collegati per:
7→ Ideazione contenuti (recupera dalle tue note di interesse)
8→ Flusso Bozza → Revisione → Pubblicazione
9→ Tracciamento sponsor con avvisi di scadenza
10→ Dashboard di analisi
11→ Logica di pubblicazione incrociata automatica
12→ Ogni blocco si collega al file Obsidian pertinente

L'output Canvas che Claude genera come file strutturato:

json
1{
2 "nodes": [
3 {
4 "id": "ideazione",
5 "type": "file",
6 "file": "Sistemi/PipelineContenuti/Ideazione.md",
7 "x": 0, "y": 0, "width": 300, "height": 200,
8 "color": "1"
9 },
10 {
11 "id": "bozza",
12 "type": "file",
13 "file": "Sistemi/PipelineContenuti/Bozza.md",
14 "x": 400, "y": 0, "width": 300, "height": 200,
15 "color": "3"
16 },
17 {
18 "id": "sponsor",
19 "type": "file",
20 "file": "Sistemi/PipelineContenuti/TracciamentoSponsor.md",
21 "x": 0, "y": 300, "width": 300, "height": 200,
22 "color": "5"
23 },
24 {
25 "id": "analisi",
26 "type": "file",
27 "file": "Sistemi/PipelineContenuti/Analisi.md",
28 "x": 400, "y": 300, "width": 300, "height": 200,
29 "color": "6"
30 }
31 ],
32 "edges": [
33 {
34 "id": "e1",
35 "fromNode": "ideazione", "fromSide": "right",
36 "toNode": "bozza", "toSide": "left",
37 "label": "concetti approvati"
38 },
39 {
40 "id": "e2",
41 "fromNode": "sponsor", "fromSide": "right",
42 "toNode": "bozza", "toSide": "bottom",
43 "label": "integrazione brief"
44 }
45 ]
46}

4. LLM locali per la massima privacy

Per dati sensibili - sistemi clienti, strumenti finanziari, tooling interno - instrada tramite un modello locale invece di un'API cloud. Zero dati lasciano la tua macchina.

bash
1# Installa Ollama
2curl -fsSL https://ollama.com/install.sh | sh
3
4# Scarica un modello capace di codificare
5ollama pull llama3.2:latest
6# o per una generazione di codice più potente:
7ollama pull qwen2.5-coder:32b
8
9# Avvia il server locale
10ollama serve
11# Gira su localhost:11434

Configura Obsidian Copilot per usare l'endpoint locale:

javascript
1{
2 "provider": "ollama",
3 "model": "qwen2.5-coder:32b",
4 "baseUrl": "http://localhost:11434",
5 "systemPrompt": "Sei un costruttore di sistemi locale con accesso al filesystem dell'utente tramite MCP. Costruisci sistemi completi e funzionanti. Non inviare mai dati a API esterne senza istruzioni esplicite."
6}

Il ponte modello locale + 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() / "Projects"
9OLLAMA_URL = "http://localhost:11434/api/generate"
10
11class InboxWatcher(FileSystemEventHandler):
12 """
13 Osserva la cartella AI-Inbox di Obsidian.
14 Quando appare un nuovo file .md, trattalo come un prompt di build.
15 Passalo all'LLM locale -> esegui tramite MCP -> riporta il risultato.
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] Nuovo 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"""Sei un costruttore di sistemi.
32 Costruisci questo sistema: {prompt}
33
34 Output un piano JSON con:
35 {{
36 "project_dir": "percorso relativo",
37 "files": [
38 {{"path": "percorso relativo", "content": "contenuto del file"}}
39 ],
40 "commands": ["npm install", "ecc"],
41 "summary": "cosa è stato costruito"
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] Creato: {file_path}")
55
56 result_file = OBSIDIAN_INBOX / f"{project_name}-risultato.md"
57 result_file.write_text(
58 f"# Build Completato: {project_name}\n\n"
59 f"**Posizione:** {project_dir}\n\n"
60 f"**Riepilogo:** {plan['summary']}\n\n"
61 f"**File creati:** {len(plan['files'])}\n"
62 )
63 print(f"[Fatto] Risultato scritto in 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"[Osservazione] {OBSIDIAN_INBOX}")
71
72 try:
73 while True:
74 import time; time.sleep(1)
75 except KeyboardInterrupt:
76 observer.stop()
77 observer.join()

Inserisci un file .md nella tua cartella AI-Inbox di Obsidian con un prompt di build. Il ponte lo preleva, lo instrada attraverso il modello locale, costruisce il sistema nella tua cartella Projects e scrive una nota di completamento in Obsidian.

5. Il flusso di lavoro completo - dall'idea al sistema distribuito

text
1PASSO 1 - Input
2In Obsidian, nel tuo pannello IA, scrivi:
3"Sistema finanziario personale con integrazione crypto
4e tracciamento budget mensile."
5Premi Genera.
6
7PASSO 2 - Assemblaggio contesto
8Il plugin Smart Connections scansiona il tuo vault.
9Trova le tue note finanziarie degli ultimi 3 mesi.
10Le invia come contesto all'API di Claude.
11
12PASSO 3 - Architettura
13Claude (Opus 4.8) progetta il sistema:
14- Schema del database
15- Componenti dell'interfaccia
16- Integrazioni API
17- Struttura dei file
18
19PASSO 4 - Build
20Claude (Sonnet 5) implementa tramite MCP:
21- Crea ~/Projects/finance-tracker/
22- Installa le dipendenze
23- Scrive tutti i file
24- Avvia il server di sviluppo su localhost:3000
25
26PASSO 5 - Risultato
27Obsidian crea la cartella: Sistema Finanziario/
28Al suo interno: dashboard collegati, note di configurazione
29e un collegamento diretto all'applicazione in esecuzione.

Tempo totale dal passo 1 all'applicazione funzionante: 4-12 minuti.

Il cambiamento che questo rappresenta

Non è un modo più veloce di scrivere codice.

È una relazione diversa tra idea ed esecuzione.

Il vincolo su ciò che puoi costruire era una volta l'abilità tecnica e il tempo. Un non sviluppatore non poteva costruire un CRM. Uno sviluppatore singolo non poteva costruire cinque sistemi simultaneamente. Un team non poteva rilasciare in ore invece che settimane.

Tutti e tre questi vincoli non esistono più.

Il nuovo vincolo è la chiarezza di pensiero - la capacità di descrivere precisamente ciò di cui hai bisogno, capire come si presenta un buon output e iterare su di esso. Questa è un'abilità di pensiero, non tecnica.

L'Architettura per App Generativa non rende obsoleti gli sviluppatori. Rende la capacità di pensare in termini di sistemi - di ragionare su ciò di cui hai bisogno prima di costruirlo - drammaticamente più preziosa della capacità di scrivere il codice che lo implementa.

Lo stack è qui. I modelli sono capaci. L'unica variabile rimanente è se stai costruendo con esso o leggendo di persone che lo stanno facendo.

Questo articolo descrive le capacità disponibili in Claude, Obsidian e MCP a partire da luglio 2026. Versioni specifiche dei plugin e configurazioni API potrebbero cambiare. Verifica sempre la documentazione corrente prima dell'implementazione.

Grazie per aver letto.

Rielabora in 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
Per i creator

Trasforma il tuo Markdown in un articolo 𝕏 pulito

Quando pubblichi i tuoi testi lunghi, formattare immagini, tabelle e blocchi di codice per 𝕏 è una seccatura. YouMind trasforma un'intera bozza Markdown in un articolo 𝕏 pulito e pronto da pubblicare.

Prova Markdown verso 𝕏

Altri pattern da decodificare

Articoli virali recenti

Esplora altri articoli virali