L’estensione di Contents.ai per Google Chrome integra l’Intelligenza Artificiale Generativa per supportare la creazione e l’ottimizzazione dei contenuti, migliorando la produttività con funzionalità avanzate come la generazione di testi, l’integrazione con Gmail e un’interfaccia intuitiva ispirata ai chatbot.
Abbiamo gestito l'intero ciclo di sviluppo, dalla progettazione UI/UX alla realizzazione completa dell’estensione, adottando un’architettura tecnologica moderna e scalabile per garantire un’esperienza fluida e ottimizzata per professionisti e creatori di contenuti.
Contents.ai
Contents.ai è la piattaforma innovativa di Contents, che sfrutta l'Intelligenza Artificiale Generativa per assistere i propri utenti nella creazione, gestione e ottimizzazione dei contenuti. Con oltre 60 strumenti integrati, Contents.ai permette di creare testi personalizzati e ottimizzati per la SEO, coprendo un'ampia gamma di esigenze, dai post per i social media agli articoli di blog, fino alle traduzioni e alle email di vendita.
Il bisogno: un'estensione Chrome con AI integrata
Il progetto prevedeva la realizzazione di un’estensione per Google Chrome in grado di integrarsi perfettamente con la piattaforma esistente di Contents.ai. L'obiettivo era offrire un’esperienza utente moderna e intuitiva, migliorando la produttività degli utenti grazie a un assistente AI progettato per supportare gli utenti nella creazione di testi, attività di ricerca, brainstorming di idee e altre operazioni creative.
Tra le sue funzionalità avanzate, spicca uno strumento per la creazione di email multilingue, supportato da tecniche di copywriting assistite dall’AI, semplificando così il processo di stesura.
Progettazione UI/UX
Il progetto è stato sviluppato con particolare attenzione al design e alla user experience. Per l’estensione del chatbot, integrata nella sidebar di Google Chrome, abbiamo progettato un'interfaccia utente che richiama il layout familiare delle chat, dove prompt e risposte si scambiano in modo fluido e naturale.
Abbiamo inoltre implementato:
- Suggerimenti di prompt predefiniti per facilitare l’interazione e superare il blocco dello “schermo bianco”;
- Un sistema light/dark mode, per adattare l’esperienza visiva alle preferenze dell’utente;
- Un color system su Figma, che ha reso più veloce la progettazione e l’implementazione della UI;
- Un typography system scalabile, che ha agevolato gli sviluppatori nella realizzazione dell’estensione.
Integrazione con Gmail: AI al servizio della comunicazione
L’integrazione con Gmail è stata progettata per essere discreta e non invasiva. Durante la composizione di un'email, gli utenti possono attivare l'assistente AI tramite un pulsante dedicato, aprendo una modale con funzionalità avanzate come traduzione, correzione e modifica del tono di voce. Questo strumento si rivela particolarmente utile per chi scrive email multilingua e desidera migliorare la propria comunicazione.
Integrazione avanzata con LLM e gestione degli accessi
Al cuore dell’estensione c’è l'integrazione con un Large Language Model (LLM), che garantisce risposte precise e contestualizzate per ogni prompt. Le risposte vengono formattate con Markdown per una migliore leggibilità. Inoltre, è stato implementato un sistema di login con controllo del piano di abbonamento, che abilita diverse funzionalità in base alla sottoscrizione dell'utente.
Stack tecnologico
Per rendere il progetto scalabile ed efficiente, abbiamo adottato tecnologie moderne e un'architettura solida:
- Monorepo gestito con Turborepo, per la compilazione indipendente dei componenti e un uso avanzato della cache;
- Approccio cache-first con Tanstack Query, per ottimizzare le richieste HTTP;
- s-hadcn/ui per l’implementazione rapida del design system;
- Semantic Release e pipeline GitLab, per versionare il codice e garantire aggiornamenti continui.
Il nostro contributo
Grazie a un approccio strategico e a un design attento, abbiamo contribuito alla creazione di un prodotto che semplifica la vita degli utenti, migliorando l'efficienza nella scrittura e nell'ottimizzazione dei contenuti. L'estensione AI di Contents.ai è un perfetto esempio di come l'Intelligenza Artificiale possa diventare un alleato quotidiano per professionisti e creatori di contenuti.