FabioBiondi.
0
CatalogoInfoIl tuo programma
← tutti i corsi
// corso · 2026ai-agenticaIN ARRIVO

UI Generativa

Costruisci interfacce dinamiche generate dall'AI con 3 approcci a confronto: Hashbrown per Angular, soluzione nativa con LLM/agent/tool e il protocollo MCP UI.

Durata
8h
Sessioni
2 da 4h
Livello
Avanzato
In arrivo

Questo corso sarà presto disponibile.

Stiamo finalizzando contenuti e materiali. Puoi comunque aggiungerlo al carrello per pianificarlo con il tuo team: ne discutiamo insieme nella call di consulenza gratuita e ti aggiorno appena è pronto.

[ descrizione ]

Di cosa parla
questo corso.

Contesto, obiettivi e taglio del corso. Tutto è personalizzabile in base a stack e team — questa è la base di partenza.

§01

INTRODUZIONE

La UI Generativa è il prossimo passo evolutivo delle interfacce utente: non più schermate statiche pensate a priori dal designer, ma componenti selezionati e interi layout composti dinamicamente dall'AI in base al contesto, all'intento dell'utente e ai dati disponibili.

Non parliamo di "stringhe di testo" sputate da un chatbot, ma di veri componenti applicativi — form, card, dashboard, tabelle, wizard — che l'LLM sceglie, configura e orchestra a runtime, restando però sempre dentro il design system e i vincoli della tua applicazione.

In questo corso vedremo tre approcci diversi e complementari per costruire UI generative, mettendoli a confronto su casi reali per capire quando conviene usare l'uno o l'altro.
Oltre alle 3 tecniche esposto nel corso, analizzeremo velocemente anche altri strumenti e tecnologie emergenti in quest'area.
§02

APPROCCIO 1 — Hashbrown (per Angular)

Hashbrown è una libreria open source pensata specificamente per Angular (e NextJS) che permette all'LLM di selezionare e comporre componenti Angular reali della tua applicazione, mantenendo type-safety, reattività con i Signal e integrazione naturale con il framework.

Vedremo come esporre i componenti come "strumenti" che il modello può combinare, come gestire lo stato condiviso tra AI e UI, e come strutturare una conversazione che produce interfacce sempre coerenti con il design system esistente.

È l'approccio ideale per chi lavora già in Angular e vuole il time-to-market più rapido, senza reinventare l'orchestrazione tra LLM e componenti.
§03

APPROCCIO 2 — Nativo con LLM, Agent Framework e Tool

Il secondo approccio è "da zero": usiamo direttamente l'SDK di un LLM (Gemini, Claude o altri), un agent framework (come ADK o equivalenti) e una serie di tool custom per costruire la nostra pipeline di UI generativa.

È l'approccio più flessibile e indipendente dal framework frontend: lo stesso backend agentico può servire Angular, React, Next.js, mobile o desktop. In compenso richiede di progettare a mano lo schema dei componenti, la validazione dell'output strutturato, lo streaming e la gestione dello stato.

Capiremo quando vale la pena scegliere questa strada, tipicamente in scenari multi-piattaforma, con esigenze forti di controllo o quando il dominio è particolarmente complesso, e quali pattern usare per non reinventare la ruota.
§04

APPROCCIO 3 — MCP UI

MCP UI è un'estensione del Model Context Protocol che standardizza il modo in cui un server può esporre componenti di interfaccia consumabili da qualsiasi client compatibile (Claude Code, Claude.ai, IDE, agenti custom).

È l'approccio più interoperabile: scrivi una volta un server MCP che espone tool e widget, e quell'interfaccia diventa accessibile a tutti i client dell'ecosistema MCP, senza essere legati a un singolo framework o vendor.

Vedremo come progettare risorse UI conformi al protocollo, come integrare il server MCP in un host (es. Claude Code o un client custom), e come trattare la UI come una capability riusabile e distribuita, non come parte monolitica di un'applicazione.
§05

BONUS — Altri strumenti e tecnologie emergenti

Oltre alle 3 tecniche approfondite nel corso, analizzeremo velocemente anche altri strumenti e tecnologie emergenti in quest'area, così da avere una visione il più possibile completa del panorama attuale della UI Generativa.

L'obiettivo non è padroneggiarli tutti, ma conoscerne esistenza, punti di forza e limiti per poterli valutare in modo informato quando si presenterà l'occasione di sceglierne uno per un progetto reale.
§06

OBIETTIVO DEL CORSO

Al termine del corso avrai un quadro chiaro dei tre approcci principali alla UI Generativa oggi disponibili, con esempi pratici end-to-end per ciascuno, e saprai scegliere quello giusto in base al contesto: stack tecnologico, vincoli di time-to-market, esigenze di interoperabilità, controllo sul dominio.

Non è un corso "su una libreria": è un corso su come pensare e progettare interfacce nell'era degli agenti AI, indipendentemente dal framework che userai domani.
[ programma ]

Cosa vediamo,
in dettaglio.

Il programma viene rifinito con il team prima del corso, in base a stack, obiettivi e livello. Quella che vedi è la base: possiamo accelerare o approfondire dove serve e, se necessario, modificare il programma.
La maggior parte del corso è live-coding, con esempi pratici.

5 moduli · 25 argomenti
  1. M01

    Fondamenti di UI Generativa

    • Cos'è davvero la UI Generativa (e cosa NON è)
    • Differenze tra chat-based UI, tool-driven UI e component-driven UI
    • Output strutturati, schemi e validazione dei componenti
    • Design system come vincolo per l'AI
    • Quando ha senso (e quando NO) usare la UI Generativa
  2. M02

    Approccio 1 — Hashbrown (per Angular)

    • Introduzione a Hashbrown e all'integrazione con Angular
    • Esporre componenti Angular come building block dell'LLM
    • Stato condiviso AI ↔ UI con i Signal
    • Streaming, error handling e fallback UI
    • Esempio end-to-end: dashboard generata su richiesta
  3. M03

    Approccio 2 — Nativo con LLM, Agent Framework & Tool

    • Progettare lo schema dei componenti per l'output strutturato
    • Tool e function calling per descrivere capability UI
    • Integrazione con un agent framework (es. ADK) per orchestrare più step
    • Rendering generico in Angular e React/Next.js a partire dallo stesso backend
    • Streaming, validazione e gestione errori dell'output AI
    • Esempio end-to-end: form & wizard generati dinamicamente
  4. M04

    Approccio 3 — MCP UI

    • Cos'è il Model Context Protocol e cos'è MCP UI
    • Architettura host / server / client e ruolo della UI nel protocollo
    • Costruire un server MCP che espone tool e widget UI
    • Integrazione con un host compatibile (es. Claude Code)
    • Distribuzione, versioning e riuso della UI come capability
  5. M05

    Confronto e scelta dell'approccio giusto

    • Tabella comparativa: time-to-market, lock-in, interoperabilità, controllo
    • Casi d'uso reali: quando scegliere Hashbrown, nativo o MCP UI
    • Pattern misti: combinare più approcci nello stesso prodotto
    • UX della UI Generativa: prevedibilità, fiducia dell'utente, undo & safety
[ corsi propedeutici ]

Prima di questo corso...

[ corsi correlati ]

Potrebbero piacerti anche...

Pronto a portarlo nel tuo team?

Contattami →