La nouvelle version 1.0 de CopilotKit introduit une fonctionnalité d'interface utilisateur (UI) générative élégante qui vous permet de restituer des composants React entièrement personnalisés au sein de l'interface de discussion. Cette puissante capacité vous permet d'intégrer de manière transparente des fonctionnalités alimentées par l'IA dans l'expérience utilisateur de votre application.

Grâce à l'interface utilisateur générative, vous pouvez créer des composants visuellement attrayants et interactifs qui vont au-delà des simples interactions basées sur le texte. Par exemple, dans la démonstration présentée, CopilotKit a été utilisé pour générer un composant d'aperçu de type tableur, permettant à l'utilisateur de visualiser et d'interagir rapidement avec les données sans avoir à créer manuellement l'interface utilisateur.

L'interface utilisateur générative est construite sur les protocoles basés sur GraphQL de CopilotKit, qui offrent un moyen flexible et efficace de gérer les champs d'entrée et de sortie. Cette intégration garantit que les composants générés peuvent communiquer en temps réel avec le runtime CopilotKit, permettant des mises à jour dynamiques et des interactions réactives.

Les développeurs peuvent exploiter les nouveaux hooks SDK React, tels que le hook useCopilotAction, pour interagir directement avec CopilotKit au sein de leur application. Cela permet une intégration étroite entre l'état de l'application et les fonctionnalités alimentées par l'IA, créant une expérience utilisateur transparente.

De plus, le hook useCopilotReadable optimise la communication de l'état de l'application, assurant un transfert de données efficace entre le front-end et le runtime CopilotKit. Cette fonctionnalité contribue à maintenir des performances élevées et une réactivité, même dans des applications complexes et axées sur les données.

Dans l'ensemble, l'interface utilisateur générative élégante de CopilotKit version 1.0 représente une avancée significative dans l'intégration d'assistants alimentés par l'IA dans les expériences produit. Les développeurs peuvent désormais créer des composants visuellement attrayants et interactifs qui tirent parti de la puissance de CopilotKit, améliorant l'expérience utilisateur globale et stimulant l'innovation dans leurs applications.

La dernière version de CopilotKit, la version 1.0, introduit une amélioration importante avec l'intégration de protocoles basés sur GraphQL. Cette nouvelle fonctionnalité permet aux développeurs de tirer parti de la puissance de GraphQL pour une communication transparente entre le runtime CopilotKit et leurs applications.

Les principaux points forts de l'intégration GraphQL sont les suivants :

1. API GraphQL : Le nouveau runtime CopilotKit utilise une API GraphQL, permettant aux développeurs de profiter de la flexibilité et de l'efficacité de GraphQL pour les besoins en données de leur application.

2. Champs d'entrée et de sortie : L'API GraphQL prend en charge les champs d'entrée et de sortie, essentiels pour construire des applications en temps réel nécessitant un échange de données dynamique.

3. Streaming de données : Les développeurs peuvent désormais diffuser des données de manière indépendante à l'aide de l'API GraphQL, permettant des mises à jour de données efficaces et réactives au sein de leurs applications.

Ces nouveaux protocoles basés sur GraphQL dans CopilotKit donnent aux développeurs le pouvoir d'intégrer des copilotes alimentés par l'IA dans leurs produits avec plus de facilité et de flexibilité. En tirant parti des avantages de GraphQL, les développeurs peuvent optimiser la communication de l'état de l'application et améliorer l'expérience utilisateur globale de leurs applications alimentées par l'IA.

CopilotKit fournit un ensemble de puissants hooks SDK React qui vous permettent d'intégrer de manière transparente des capacités d'IA dans votre application. Ces hooks permettent une interaction directe entre votre application et le runtime CopilotKit, facilitant l'exploitation de tout le potentiel de la plateforme.

Les principaux hooks proposés par CopilotKit sont les suivants :

1. useCopilotReadable : Ce hook vous permet de fournir au moteur CopilotKit le contexte du front-end, permettant à l'assistant IA de comprendre l'état actuel de votre application. Vous pouvez transmettre des structures de données, comme les données actuelles de la feuille de calcul, et les associer à des balises spécifiques pour que CopilotKit puisse les comprendre.

2. useCopilotAction : Ce hook permet à CopilotKit d'effectuer des actions au sein de votre application. Vous pouvez définir des actions, comme suggérer des remplacements de feuille de calcul, et transmettre les paramètres nécessaires. Le hook fournit une fonction de rendu et une fonction de gestionnaire, vous permettant de personnaliser l'interface utilisateur et le comportement de l'action.

3. useCopilotChatSuggestion : Ce hook génère des suggestions de discussion en fonction de l'état actuel de votre application, permettant à l'assistant IA de fournir des recommandations contextuelles à l'utilisateur.

Ces hooks sont conçus pour être intuitifs et faciles à utiliser, avec une propagation complète des types dans l'ensemble de la base de code. Cela garantit une expérience d'intégration transparente et vous aide à exploiter la puissance de CopilotKit sans avoir besoin d'un important code de base ou d'une configuration complexe.

En utilisant ces puissants hooks SDK React, vous pouvez intégrer rapidement et efficacement des capacités d'IA dans votre application, améliorant l'expérience utilisateur et débloquant de nouvelles possibilités pour votre produit.

Le hook CopilotReadable est un outil puissant fourni par le cadre Copilot Kit qui vous permet d'optimiser la communication entre votre application et le moteur Copilot. Ce hook vous permet de transmettre de manière transparente des informations du front-end au moteur Copilot, garantissant que l'assistant IA dispose du contexte nécessaire pour fournir des réponses précises et pertinentes.

En utilisant le hook CopilotReadable, vous pouvez définir les données que vous souhaitez partager avec le moteur Copilot, comme l'état actuel de votre application ou toute information pertinente dont l'assistant IA pourrait avoir besoin pour fournir des suggestions ou des actions utiles. En fournissant ce contexte, vous pouvez vous assurer que les réponses de Copilot sont adaptées aux besoins spécifiques de votre application et de vos utilisateurs.

Le hook CopilotReadable est très flexible, vous permettant de transmettre des données sous différents formats, y compris des schémas JSON. Cela garantit que les types sont entièrement propagés dans l'ensemble de votre base de code, facilitant le travail avec l'intégration Copilot et réduisant les risques d'erreurs.

Dans l'ensemble, le hook CopilotReadable est un composant essentiel du cadre Copilot Kit, vous permettant d'optimiser la communication entre votre application et l'assistant IA, ce qui se traduit par une intégration plus transparente et efficace des capacités Copilot au sein de votre produit.

Le hook useCopilotChat est une fonctionnalité puissante introduite dans la version 1.0 de Copilot Kit. Ce hook vous permet de générer des suggestions de discussion intelligentes en fonction de l'état actuel de l'application, permettant à vos utilisateurs d'interagir rapidement et facilement avec votre application alimentée par l'IA.

Voici comment vous pouvez tirer parti du hook useCopilotChat :

1. Importer le hook : Commencez par importer le hook useCopilotChat depuis la bibliothèque Copilot Kit.

import { useCopilotChat } from '@copilot-kit/react';

2. Utiliser le hook dans votre composant : Dans votre composant, appelez le hook useCopilotChat et transmettez tout état ou contexte d'application pertinent que vous voulez que l'IA prenne en compte lors de la génération des suggestions.

const { chatSuggestions, generateChatSuggestion } = useCopilotChat({
  currentUserMessage: userMessage,
  conversationHistory: conversationLog,
  productDetails: productInfo,
});

3. Restituer les suggestions de discussion : Utilisez les chatSuggestions renvoyées par le hook pour restituer les suggestions générées par l'IA dans votre interface utilisateur. Vous pouvez afficher ces suggestions sous forme de boutons, de liens ou de tout autre élément d'interface utilisateur interactif.

return (
  <div>
    {chatSuggestions.map((suggestion, index) => (
      <button key={index} onClick={() => handleSuggestionClick(suggestion)}>
        {suggestion.text}
      </button>
    ))}
  </div>
);

4. Gérer les interactions des utilisateurs : Lorsqu'un utilisateur sélectionne une suggestion, vous pouvez appeler la fonction generateChatSuggestion fournie par le hook pour déclencher la génération d'un nouvel ensemble de suggestions en fonction de l'état mis à jour de l'application.

const handleSuggestionClick = (suggestion) => {
  const newSuggestions = generateChatSuggestion(suggestion);
  // Mettre à jour l'état de votre application et l'interface utilisateur en conséquence
};

En utilisant le hook useCopilotChat, vous pouvez intégrer de manière transparente des suggestions de discussion alimentées par l'IA dans votre application, améliorant l'expérience utilisateur et facilitant l'interaction de vos utilisateurs avec votre produit.

Pour intégrer CopilotKit dans votre application de type tableur, vous devrez suivre ces étapes :

1. Configurer le fournisseur CopilotKit : Commencez par envelopper votre application avec le composant CopilotKitProvider. Cela fournit la logique métier nécessaire pour connecter votre application à l'API CopilotKit. Vous devrez initialiser le fournisseur avec votre clé d'API publique CopilotCloud, que vous pouvez obtenir sur le tableau de bord CopilotCloud.

2. Utiliser la barre latérale CopilotKit : CopilotKit fournit un composant CopilotSidebar préconfiguré que vous pouvez utiliser pour restituer l'interface de l'assistant IA au sein de votre application. Ce composant est entièrement personnalisable, vous permettant de l'intégrer de manière transparente à votre interface utilisateur existante.

3. Fournir le contexte avec useCopilotReadable : Utilisez le hook useCopilotReadable pour transmettre les données pertinentes de votre application au moteur CopilotKit. Cela pourrait inclure les données actuelles de la feuille de calcul, les informations sur l'utilisateur ou tout autre information contextuelle que l'assistant IA peut utiliser pour fournir des réponses plus précises et pertinentes.

4. Activer les actions IA avec useCopilotAction : Tirez parti du hook useCopilotAction pour permettre à l'assistant CopilotKit d'effectuer des actions au sein de votre application. Par exemple, dans le cas d'une feuille de calcul, vous pouvez utiliser ce hook pour suggérer des remplacements de feuille de calcul ou générer des composants React personnalisés en fonction de l'entrée de l'utilisateur.

5. Personnaliser l'interface utilisateur avec l'interface utilisateur générative : La fonctionnalité d'interface utilisateur générative de CopilotKit vous permet de restituer des composants React entièrement personnalisés au sein de l'interface de discussion. Cela vous permet de créer une expérience utilisateur transparente et intégrée, où l'assistant IA peut générer et afficher du contenu riche et interactif directement au sein de votre application.

En suivant ces étapes, vous pouvez facilement intégrer le puissant cadre CopilotKit dans votre application de type tableur, donnant à vos utilisateurs un assistant alimenté par l'IA qui peut les aider à naviguer et à interagir avec les données de manière plus efficace.

La zone de texte CopilotText Area est une fonctionnalité puissante du cadre Copilot Kit qui vous permet d'intégrer directement dans votre application des capacités d'édition de texte alimentées par l'IA. Ce remplacement clé en main pour toute zone de texte de votre application offre aux utilisateurs une édition de texte assistée par l'IA, améliorant leur productivité et leur efficacité.

Avec la zone de texte CopilotText Area, les utilisateurs peuvent bénéficier de fonctionnalités d'auto-complétion, de génération de texte et d'autres fonctionnalités intelligentes alimentées par l'IA pour rationaliser leurs tâches d'écriture. Par exemple, dans une application de CRM, les utilisateurs peuvent utiliser la zone de texte CopilotText Area pour générer automatiquement des réponses par e-mail, récapituler les points douloureux des clients et étiqueter le contexte pertinent des conversations précédentes.

L'intégration de la zone de texte CopilotText Area est simple. Il suffit de remplacer votre zone de texte existante par le composant CopilotTextArea et de fournir la configuration nécessaire, comme le autoSuggestionsConfig. Cela permet au Copilot Kit d'intégrer de manière transparente les capacités d'édition de texte alimentées par l'IA dans votre application, sans avoir besoin d'une implémentation personnalisée complexe.

En tirant parti de la zone de texte CopilotText Area, vous pouvez donner à vos utilisateurs une édition de texte assistée par l'IA, boostant leur productivité et améliorant leur expérience globale au sein de votre application.

La nouvelle version 1.0 de Copilot Kit est une mise à jour majeure qui introduit plusieurs améliorations clés dans le cadre. L'introduction d'une interface utilisateur générative élégante permet aux développeurs de restituer des composants React entièrement personnalisés au sein de l'interface de discussion

permettant une intégration transparente des fonctionnalités alimentées par l

IA dans leurs applications.

L

intégration de protocoles basés sur GraphQL

avec la prise en charge des champs d

entrée et de sortie et du streaming de données