beakjs

? Pico.js

Beak.js contiene todo lo que necesita para crear asistentes personalizados con AI para su aplicación React.

Características clave:

• UI incorporada : viene con una hermosa ventana de chat totalmente personalizable.
• Fácil de usar : se integra con su aplicación React existente en solo unas pocas líneas de código.
• Open Source : Beak.js es de código abierto y de forma gratuita.

Empezando

Instalación

Primero, agregue Beak.js a su proyecto:

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

Configuración

A continuación, envuelva su aplicación en el componente Beak y agregue la ventana del asistente:

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

Ahora, tiene una ventana de chat lista en la esquina inferior derecha de su sitio web. ¡Probar!

Nota: No exponga su clave API en aplicaciones de orientación pública; esto es solo para el desarrollo. Consulte la implementación para obtener información sobre cómo implementar su aplicación de forma segura sin comprometer su clave API.

Hacer que el pico funcione con su aplicación

Puede dejar que el Asistente realice tareas en su aplicación configurando funciones con 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 > ;
} ;

Tenga en cuenta que las funciones están disponibles para el asistente tan pronto como se monte su componente respectivo. Este es un concepto poderoso, asegurando que el asistente pueda llamar a funciones relevantes para el contexto actual de su aplicación.

Deje que el asistente sepa lo que está sucediendo en la pantalla

Puede informar fácilmente al Asistente qué está actualmente en la pantalla usando useBeakInfo :

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

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

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

Al usar useBeakFunction junto con useBeakInfo , su asistente puede ver lo que está sucediendo en la pantalla y tomar medidas dentro de su aplicación dependiendo del contexto actual.

Despliegue

Para mantener su clave API segura, utilizamos un controlador del lado del servidor que reenvía las solicitudes de su asistente a OpenAI. Además, este controlador se puede usar para agregar autenticación y limitación de tasa a su asistente.

Actualmente, los siguientes marcos son compatibles:

• Next.js
• Remezclar
• Expresar

Lea más sobre la implementación segura haciendo clic en los enlaces de arriba.

Ejecutar la demostración

Para ejecutar la demostración, construir el proyecto e iniciar la aplicación de demostración:

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

Luego vaya a http: // localhost: 5173/para ver la demostración.

Asuntos

No dude en enviar problemas y solicitudes de mejora.

Licencia

MIT

Copyright (c) 2023, Markus Ecker