Guida: Da Artefatto TSX ad App su Netlify (con Claude Desktop + MCP)

Mentre tutto il web parlava della nuova funzionalità artifact di Claude 4, per il nostro utilizzo in Brix-IA, gli artifact sono risultati piuttosto limitati. È bello ottenere un widget con un dashboard o piccole app direttamente in Claude, che si può condividere con i colleghi, ma il problema sta proprio nel condividere.

Se uno volesse fare una mini app funzionante che richiede dati esterni (un dashboard basato su un file di qualche migliaio di righe), il giochino non funziona: non c’è nessun modo di condividere dati esterni con l’artifact.

Pertanto, se si vuole pubblicare la mini app creata in 10 minuti con Claude ci sono 2 strade:

• Caricare il file .tsx su Replit e fare il deploy lì (soluzione comoda ma ~30 USD/mese)
• Trasformare il .tsx in una app “completa” e pubblicare su Netlify (soluzione gratuita ✅)

In questa guida pratica, ti condivido passo per passo quello che bisogna fare per la seconda soluzione. Una volta impostato il workflow, è un processo semiautomatico che richiede circa 10 minuti. Esempio finale: https://artifact-energivori.netlify.app/

Prerequisiti: prima di iniziare, assicurati di avere:

• ✅ Account GitHub (o GitLab/Bitbucket) — registrati su github.com
• ✅ Account Netlify collegato a Git — registrati su netlify.com con il tuo account GitHub
• ✅ Claude Desktop con MCP filesystem configurato
• ✅ Node.js installato — scarica da nodejs.org (versione LTS)

---

Workflow Ottimizzato

1. Setup Locale

# Crea cartella progetto
mkdir C:/DEV/artifact_nome
cd C:/DEV/artifact_nome

2. Salva l’Artefatto

Scarica il file artifact.tsx da Claude web e salvalo nella cartella del progetto.

3. Apri in Claude Desktop

Usa MCP filesystem per aprire la cartella con il comando: “Apri la cartella C:/DEV/artifact_nome”

4. Prompt Magico per Claude

Trasforma l'artifact.tsx in una app React funzionante e prepara per il deploy su Git/Netlify.

Crea:
- Struttura progetto Vite + React + TypeScript
- package.json con scripts ottimizzati
- Configurazione build per Netlify
- File _redirects per SPA
- .gitignore appropriato
- README.md con istruzioni

5. Test Locale

npm install
npm run dev

Testa e risolvi gli errori in locale finché l’app non parte senza problemi.

6. Debug e Preparazione Git

Se ci sono errori, chiedi a Claude:

Analizza gli errori in console e risolvi:
- Dipendenze mancanti
- Import non corretti
- Problemi TypeScript
- Configurazione build

7. Push su Git tramite Claude

⚠️ Prima di fare push su Git, crea il nuovo repository su GitHub (senza MCP Git questa è l’unica operazione che Claude non riesce a fare da solo).

git init
git add .
git commit -m "Initial commit: artifact to app"
# Crea repo su GitHub
git remote add origin [URL]
git push -u origin main

8. Deploy Netlify (automatico!)

1. Vai su netlify.com → Dashboard
2. “New site from Git” → seleziona GitHub
3. Scegli il repository appena creato
4. Build command: npm run build
5. Publish directory: dist
6. Deploy! → URL live in 2-3 minuti

9. Condivisione

• Copia URL Netlify (es. https://app-name.netlify.app)
• Condividi il link!
• Bonus: Ad ogni push su Git → deploy automatico

---

Setup Iniziale Git (una tantum)

git config --global user.name "Il Tuo Nome"
git config --global user.email "tua-email@esempio.com"

Prompt Utili per Claude Desktop

• Setup Iniziale: “Trasforma artifact.tsx in app React + setup Vite + prepara per Netlify”
• Debug: “Analizza errori console e risolvi dipendenze mancanti”
• Git Operations: “Prepara repository Git, commit iniziale e push su GitHub”
• Ottimizzazioni: “Ottimizza app per produzione: build size, performance, SEO”

Checklist Rapida ✅

• Cartella creata in locale
• artifact.tsx salvato
• Claude Desktop connesso via MCP
• Prompt “trasforma in app” eseguito
• npm run dev funziona
• Push su Git completato
• Netlify collegato e deployed
• URL condiviso

Tempo totale: ~10 minuti con questo workflow ottimizzato!