L’ultima versione del motore di intelligenza artificiale Claude 3.5 Sonnet è davvero fenomenale.
Come creare web app con l’intelligenza artificiale
Dopo l’introduzione degli artifacts che ti dividono la schermata in due parti dove a sinistra vedi i prompt e a destra vedi l’elaborazione, adesso hanno introdotto una funzione fantastica che consente di generare web app ma non solo il codice anche di pubblicarle.
Poiché come sapete ho una fissa per la generazione dei pannelli di conoscenza di Google, ho chiesto a Claude di generarmi una web app in italiano che mi consentisse di generare dinamicamente degli schemi JSON secondo lo standard schema.org semplicemente selezionando la tipologia dalla tendina e inserendo dinamicamente i dati di input.
Una applicazione simile al mio progetto schemamarkup.tools che però mi ha richiesto ore ed ore di programmazione.
Il prompt che ho dato in pasto a Claude
Ecco il prompt che ho utilizzato per farmi generare l’applicazione:
Ciao generami una web app che mi consenta di generare tutti gli schemi possibili di schema org scegliendoli da una tendina e con caselle di input dinamiche che cambiano schema per schema per inserire i dati. Quando ho inserito i dati cliccando su genera mi genera lo script json da incollare nella header del sito.
Successivamente gli ho chiesto delle migliorie fino ad arrivare al risultato finale che mi ha illustrato la stessa AI:
Ho apportato le seguenti modifiche e miglioramenti:
Ho ampliato significativamente la lista degli schemi, organizzandoli in categorie per una migliore navigazione.
Ho aggiunto una selezione a due livelli: prima si sceglie la categoria, poi lo schema specifico all'interno di quella categoria.
Ho utilizzato useMemo per ottimizzare le prestazioni quando si filtra la lista degli schemi in base alla categoria selezionata.
Ho mantenuto l'interfaccia utente semplice e intuitiva, utilizzando elementi HTML standard con stili Tailwind CSS.
Ecco come funziona ora l'applicazione:
L'utente seleziona prima una categoria di schema (es. "Creative Works", "Organizations & People", ecc.).
Poi seleziona uno schema specifico all'interno di quella categoria.
I campi di input si aggiornano dinamicamente in base allo schema selezionato.
Dopo aver inserito i dati, l'utente può cliccare su "Genera Script" per creare il JSON-LD.
Lo script generato viene visualizzato in un'area preformattata sotto il pulsante.
Questa versione offre una copertura molto più ampia degli schemi Schema.org, pur mantenendo un'interfaccia utente facile da usare. Naturalmente, puoi ancora espandere ulteriormente la lista degli schemi o modificare i campi in base alle tue esigenze specifiche.
Se desideri ulteriori modifiche, come l'aggiunta di schemi specifici o la personalizzazione dei campi, fammi sapere e sarò felice di aiutarti!
Applicazione web per generare dati strutturati fatta con AI
Avrei potuto chiedergli tante altre implementazioni ma ho preferito fermarmi qui ed ecco il risultato finale.
In pratica nella prima tendina posso filtrare la tipologia di schema, nella seconda scegliere lo schema vero e proprio e una volta inseriti i dati cliccando su genera script ottengo il risultato. Strabiliante.
Fate attenzione al discorso dei componenti
Col prompt predefinito generami una web app potreste ricevere in fase di creazione un errore del genere
Errore Unsupported Libraries or Icons Detected su Claude
The generated code includes unsupported libraries:
- @/components/ui/
Questo perché il motore cerca di generare l’applicazione sfruttando delle librerie non disponibili.
Per risolvere il problema ci sono due strade:
- chiedete a Claude di risolvere automaticamente il problema scrivendolo
- specificate nel prompt di generarvi l’applicazione utilizzando componenti HTML standard e uno stile minimo con Tailwind CSS, che è incluso nell’ambiente React che stiamo utilizzando. (basta copiare questa frase nel prompt così come l’ho scritta io parlando al presente ossia generami l’applicazione utilizzando componenti html standard)
Come pubblicare la app con Claude
L’applicazione non solo funziona perfettamente ma come vedete in basso a destra c’è la grande figata il tasto publish.
In pratica, dopo averti avvisato che cliccando su publish quell’artefatto diventerà di pubblico dominio, Claude anche con la versione gratuita ti rilascia un link permanente di quella web app che avete appena implementato senza essere un programmatore e senza scrivere una riga di codice.
La cosa bella è che non avete neanche bisogno dell’hosting! La app risiede sui server di Claude.
Ovviamente avrei potuto fare tante altre implementazioni come chiedergli di gestire molti altri campi creare una funzione per nidificare le entità ma a me serviva solo capire le potenzialità.
Un suggerimento che vi dò è fare prima una analisi preliminare di tutte le funzioni che vorreste dalla app e solo dopo inserire il prompt per Claude.
Questo perché nella versione gratuita di Claude il numero dei prompt che possiamo inserire è limitato nel tempo. Dobbiamo poi aspettare alcune ore prima di poterne inserire altri.
Come rimuovere la app da Claude
Dopo averla pubblicata naturalmente ho un altro tasto unpublish se voglio toglierla dal repository.
Ecco il link pubblico dell’esempio che avete appena visto se volete provarla:
https://claude.site/artifacts/7a7fa66c-18c5-48a7-b9ef-3e4fd2bff557
Questa secondo me è una funzione epocale che crea una distanza enorme tra Claude e tutti gli altri motori di intelligenza artificiale.
Apre la strada alla programmazione e alla creatività di tante persone che hanno delle idee e non sanno programmare.
Rielaborazione delle app degli altri
Tra l’altro su ogni artefatto c’è un tasto remix artifact per fare proprio un progetto di un altro e reingegnerizzarlo, quindi le opere non sono private.
Questo secondo me per evitare che qualcuno possa usarle per scopi commerciali.
Come salvare i dati in un database
La cosa ancora più impressionante è che è possibile addirittura collegare una basedati. Chiedendogli consigli Claude mi ha risposto che poiché utilizza React, mi consiglia di utilizzare una soluzione di database lato client come IndexedDB o localStorage per una implementazione semplice, o un database lato server come MongoDB o PostgreSQL per una soluzione più robusta.
Adesso scatenatevi
Insomma questa per me rappresenta una vera pietra miliare nelle cose viste finora nel campo dell’intelligenza artificiale e vi consiglio di continuare a seguire il progetto Claude perché secondo me sono quelli attualmente più avanti.
Secondo me in tanti cominceranno a divertirsi con Claude e gli abbonamenti aumenteranno a dismisura dopo questa nuova implementazione.
