beakjs

? ABeak.js

Bach.js enthält alles, was Sie benötigen, um benutzerdefinierte Assistenten für KI-betriebene Assistenten für Ihre React-App zu erstellen.

Schlüsselmerkmale:

• Eingebaute Benutzeroberfläche - verfügt über ein wunderschönes, vollständig anpassbares Chat -Fenster.
• Einfach zu verwenden - Integriert sich in Ihre vorhandene React -App in nur wenigen Codezeilen.
• Open Source - Beak.js ist Open Source und kostenlos zu verwenden.

Erste Schritte

Installation

Fügen Sie zuerst Schnabel.js zu Ihrem Projekt hinzu:

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

Aufstellen

Wickeln Sie Ihre App als nächstes in die Beak und fügen Sie das Assistant -Fenster hinzu:

 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 >
) ;

Jetzt haben Sie in der unteren rechten Ecke Ihrer Website ein Chatfenster. Probieren Sie es aus!

Hinweis: Entdecken Sie Ihren API -Schlüssel nicht in öffentlich ausgerichteten Apps - dies dient nur zur Entwicklung. Informationen zum sicheren Bereitstellen Ihrer App ohne Kompromisse bei der Bereitstellung Ihres API -Schlüssels finden Sie in der Bereitstellung.

Machen Sie Schnabel.js mit Ihrer App arbeiten

Sie können den Assistenten auf Aufgaben in Ihrer App ausführen lassen, indem Sie Funktionen mit useBeakFunction einrichten:

 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 > ;
} ;

Beachten Sie, dass Funktionen dem Assistenten zur Verfügung stehen, sobald ihre jeweilige Komponente montiert ist. Dies ist ein leistungsstarkes Konzept, das sicherstellt, dass der Assistent in der Lage ist, Funktionen aufzurufen, die für den aktuellen Kontext Ihrer App relevant sind.

Lassen Sie den Assistenten wissen, was auf dem Bildschirm passiert

Sie können den Assistenten leicht wissen lassen, was er derzeit auf dem Bildschirm verwenden, indem Sie useBeakInfo verwenden:

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

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

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

Durch die Verwendung useBeakFunction zusammen mit useBeakInfo kann Ihr Assistent sehen, was auf dem Bildschirm passiert, und in Ihrer App Maßnahmen abhängig vom aktuellen Kontext ergreifen.

Einsatz

Um Ihren API -Schlüssel sicher zu halten, verwenden wir einen Server -Side -Handler, der die Anfragen Ihres Assistenten zum Öffnen weiterleitet. Darüber hinaus kann dieser Handler verwendet werden, um Ihrem Assistenten Authentifizierung und Ratenbegrenzung hinzuzufügen.

Derzeit werden die folgenden Frameworks unterstützt:

• Weiter.js
• Remix
• Äußern

Lesen Sie mehr über die sichere Bereitstellung, indem Sie auf die obigen Links klicken.

Führen Sie die Demo durch

Um die Demo auszuführen, erstellen Sie das Projekt und starten Sie die Demo -App:

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

Gehen Sie dann zu http: // localhost: 5173/um die Demo zu sehen.

Probleme

Fühlen Sie sich frei, Probleme und Verbesserungsanfragen einzureichen.

Lizenz

MIT

Copyright (C) 2023, Markus Ecker