beakjs

? Beak.js

Beak.js contient tout ce dont vous avez besoin pour créer des assistants alimentés sur AI personnalisés pour votre application React.

Caractéristiques clés:

• UI intégrée - est livré avec une belle fenêtre de chat entièrement personnalisable.
• Facile à utiliser - s'intègre à votre application React existante dans quelques lignes de code.
• Open source - beak.js est open source et libre à utiliser.

Commencer

Installation

Tout d'abord, ajoutez beak.js à votre projet:

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

Installation

Ensuite, enveloppez votre application dans le composant Beak et ajoutez la fenêtre de l'assistant:

 import { Beak } from "@beakjs/react" ;

const App = ( ) => (
  < Beak
    __unsafeOpenAIApiKey__ = "sk-..."
    instructions = "Assistant is running in a web app and helps the user with XYZ."
  >
    < MyApp / >
    < AssistantWindow / >
  < / Beak >
) ;

Maintenant, vous avez une fenêtre de chat prête dans le coin inférieur droit de votre site Web. Essayez-le!

Remarque: n'exposez pas votre clé API dans les applications orientées publics - c'est pour le développement uniquement. Voir le déploiement pour plus d'informations sur la façon de déployer en toute sécurité votre application sans compromettre votre clé API.

Faire fonctionner beak.js avec votre application

Vous pouvez laisser l'assistant effectuer des tâches dans votre application en configurant des fonctions avec useBeakFunction :

 import { useBeakFunction } from "@beakjs/react" ;

const MyApp = ( ) => {
  const [ message , setMessage ] = useState ( "Hello World!" ) ;

  useBeakFunction ( {
    name : "updateMessage" ,
    description : "This function updates the app's display message." ,
    parameters : {
      message : {
        description : "A short message to display on screen." ,
      } ,
    } ,
    handler : ( { message } ) => {
      setMessage ( message ) ;

      return `Updated the message to: " ${ message } "` ;
    } ,
  } ) ;

  return < div > { message } < / div > ;
} ;

Notez que les fonctions deviennent disponibles pour l'assistant dès que leur composant respectif est monté. Il s'agit d'un concept puissant, garantissant que l'assistant sera en mesure d'appeler des fonctions pertinentes pour le contexte actuel de votre application.

Faites savoir à l'assistant ce qui se passe à l'écran

Vous pouvez facilement informer l'assistant de savoir ce qu'il est actuellement à l'écran en utilisant useBeakInfo :

 import { useBeakInfo } from "@beakjs/react" ;

const MyApp = ( ) => {
  const [ message , setMessage ] = useState ( "Hello World!" ) ;

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

En utilisant useBeakFunction avec useBeakInfo , votre assistant peut voir ce qui se passe à l'écran et prendre des mesures dans votre application en fonction du contexte actuel.

Déploiement

Pour assurer la sécurité de votre clé API, nous utilisons un gestionnaire côté serveur qui transmet les demandes de votre assistant à OpenAI. De plus, ce gestionnaire peut être utilisé pour ajouter l'authentification et la limitation de la limitation à votre assistant.

Actuellement, les cadres suivants sont pris en charge:

• Next.js
• Remix
• Exprimer

En savoir plus sur le déploiement sécurisé en cliquant sur les liens ci-dessus.

Courir la démo

Pour exécuter la démo, créez le projet et démarrez l'application de démonstration:

git clone [email protected]:mme/beakjs.git && cd beakjs
yarn && yarn build
cd demo/frontend/presentation
echo " VITE_OPENAI_API_KEY=sk-your-openai-key " > .env
yarn && yarn dev

Ensuite, allez sur http: // localhost: 5173 / pour voir la démo.

Problèmes

N'hésitez pas à soumettre des problèmes et des demandes d'amélioration.

Licence

Mit

Copyright (C) 2023, Markus Ecker