106.9K+Télécharger
Aller au guide d’utilisation
AI Elementspar vercel

AI Elements Skill.

Créez des interfaces de chat IA à partir de composants React modifiables.

  • Interfaces IA
  • React
Télécharger OpenDesignVoir le guide d'utilisation
Analyse de la source · ai-elementsSKILL.md
Tâche Créez des interfaces de chat IA à partir de composants React modifiables. Résultats Les fichiers source des composants sélectionnés, ajoutés au répertoire de composants configuré dans le projet. Avant de commencer Les prérequis documentés comprennent Node.js 18+, Next.js, l’AI SDK et shadcn/ui.
Synthèse éditoriale · source examinée le 2026-11-02 · pas un exemple généré

01 Fonctionnement

Créer des interfaces de chat IA à partir de composants React modifiables

Utilisez le Skill AI Elements de Vercel pour composer messages, affichages d’outils et saisies de prompts avec des composants React modifiables basés sur shadcn.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

AI Elements guide un agent dans l’ajout de composants conçus pour le chat à une application Next.js existante. Il couvre les vues de conversation, le contenu des messages, les affichages d’outils et la saisie des prompts. Les composants résident dans votre dépôt : l’interface peut donc suivre les exigences de style et d’interaction propres au produit.

La source relie ces composants à l’AI SDK et aux conventions de shadcn/ui. Ses exemples assemblent les composants élémentaires de message autour de segments de texte, au lieu de traiter une réponse de l’assistant comme un widget opaque unique. Ce Skill est donc utile lorsque l’intégration du modèle existe déjà et que l’étape suivante consiste à offrir aux utilisateurs une interface cohérente pour lire et répondre.

Livrables attendus

  • Les fichiers source des composants sélectionnés, ajoutés au répertoire de composants configuré dans le projet.
  • Une vue de conversation React assemblée à partir de composants élémentaires de message et de réponse.
  • Un style propre au projet et une explication des éventuels problèmes d’intégration encore non résolus.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Examiner l’application existante

    Examinez l’outil d’exécution des paquets, la configuration Next.js, les dépendances de l’AI SDK et la configuration shadcn. Vérifiez les alias d’import et les styles globaux avant d’ajouter des composants.

  2. 02
    Ajouter les éléments d’interface nécessaires

    Utilisez l’outil d’exécution des paquets du projet avec l’installateur de composants pris en charge. Sélectionnez les éléments nécessaires à la conversation et examinez les fichiers ajoutés au dépôt.

  3. 03
    Connecter et personnaliser

    Associez le rôle de chaque message à Message, imbriquez MessageContent et affichez les segments de texte avec MessageResponse, comme dans l’exemple source. Les résultats d’outils nécessitent leur propre affichage pris en charge : il ne faut pas supposer que cet exemple limité au texte les affiche aussi. Ajustez les classes Tailwind locales et inspectez les différents états de conversation obtenus.

02 Cas d’usage

Quand l’utiliser

Les prérequis documentés comprennent Node.js 18+, Next.js, l’AI SDK et shadcn/ui.

Un bon choix

  • Une interface de chat modifiableUn chatbot Next.js a besoin de composants de message et de saisie modifiables.
  • Des conventions shadcn déjà en placeUne équipe veut personnaliser le code de son interface IA tout en respectant ses conventions shadcn existantes.

Limites à vérifier

  • Prérequis de l’applicationLes prérequis documentés comprennent Node.js 18+, Next.js, l’AI SDK et shadcn/ui.
  • Intégration du backendAjouter des composants d’interface ne prouve pas que les identifiants d’accès au modèle, les points de terminaison de streaming ou l’exécution des outils sont configurés.

Éléments à fournir

  • Configuration du projetLa configuration des paquets de l’application et les alias des composants.
  • Structure des messagesLes structures de messages et de résultats d’outils fournies par l’intégration de l’AI SDK.
  • Orientation de l’interfaceLa disposition souhaitée pour la conversation, le thème et la sélection de composants.

03 Décisions importantes

Les décisions importantes

  1. Un code source sous votre contrôle

    Le code des composants reste consultable et modifiable dans le dépôt du produit.

  2. Des réponses composables

    L’assemblage de composants élémentaires de message permet de présenter séparément les parties d’une réponse qui le nécessitent.

  3. Les conventions de style existantes

    Les conventions Tailwind et shadcn existantes constituent un point de départ concret pour l’intégration.

04 Exemple de brief

Essayez un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Examiner la source et la configuration

La configuration des paquets de l’application et les alias des composants.

Fichier source amont
https://github.com/vercel/ai-elements/blob/ca8be600bfd01b3131f9bf6134b51602a71f4374/skills/ai-elements/SKILL.md

La référence ci-dessous ouvre les instructions d’origine. Consultez la configuration du dépôt avant de les utiliser ; ce n’est pas une commande d’installation.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise ai-elements pour créer un écran de conversation dans cette application Next.js existante. Commence par examiner notre outil d’exécution des paquets, notre configuration shadcn, nos alias et la structure des messages de l’AI SDK. N’ajoute que les composants de message, de réponse et de saisie de prompt nécessaires à cet écran. Affiche les segments de texte selon le modèle de composition documenté et conserve notre thème actuel. Utilise des messages de test prédéfinis pour la première prévisualisation. Explique quels fichiers source ont été ajoutés, comment l’interface se connecte à notre hook de chat existant et quelles dépendances d’exécution restent à vérifier.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Les imports se résolvent à partir de l’emplacement réel des composants et de l’alias configuré.
  • Les rôles des messages et les segments de texte s’affichent avec le thème prévu.
  • L’agent distingue une prévisualisation d’interface fonctionnelle d’une conversation reliée au modèle dont le fonctionnement a été vérifié.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
vercel
Dépôt
vercel/ai-elements
Fichier du skill
SKILL.md
Licence
Apache-2.0
Version examinée
2026-11-02 · ca8be600bfd0
Résumé éditorial de la source
Créez des interfaces de chat IA à partir de composants React modifiables.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Puis-je modifier les composants installés ?

Oui. L’installateur ajoute le code des composants à votre projet, où vous pouvez personnaliser les classes et le comportement.

AI Gateway est-il obligatoire ?

La source le recommande pour accéder aux modèles ; sa liste de prérequis traite séparément l’application, l’AI SDK et la configuration shadcn.

Pourquoi les composants peuvent-ils apparaître sans style ?

Vérifiez les styles globaux Tailwind et shadcn du projet avant de modifier le balisage des composants.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/vercel/ai-elements/blob/ca8be600bfd01b3131f9bf6134b51602a71f4374/skills/ai-elements/SKILL.md