beakjs

? Bico.js

O Bak.js contém tudo o que você precisa para criar assistentes personalizados para o seu aplicativo React.

Principais recursos:

• UI embutida - vem com uma bela janela de bate -papo totalmente personalizável.
• Fácil de usar - integra -se ao seu aplicativo React existente em apenas algumas linhas de código.
• Open Source - Beak.js é de código aberto e gratuito para usar.

Começando

Instalação

Primeiro, adicione o BEAK.JS ao seu projeto:

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

Configurar

Em seguida, envolva seu aplicativo no componente Beak e adicione a janela do assistente:

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

Agora, você tem uma janela de bate -papo pronta no canto inferior direito do seu site. Experimente!

NOTA: Não exponha sua chave da API em aplicativos públicos - isso é apenas para desenvolvimento. Consulte a implantação para obter informações sobre como implantar com segurança seu aplicativo sem comprometer sua chave da API.

Fazendo o bico.js funcionar com seu aplicativo

Você pode deixar o assistente realizar tarefas em seu aplicativo, configurando funções com 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 > ;
} ;

Observe que as funções ficam disponíveis para o assistente assim que seu respectivo componente for montado. Esse é um conceito poderoso, garantindo que o assistente possa chamar funções relevantes para o contexto atual do seu aplicativo.

Deixe o assistente saber o que está acontecendo na tela

Você pode facilmente informar o assistente a saber o que está atualmente na tela usando useBeakInfo :

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

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

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

Ao usar useBeakFunction junto com useBeakInfo , seu assistente pode ver o que está acontecendo na tela e agir dentro do seu aplicativo, dependendo do contexto atual.

Implantação

Para manter sua chave da API em segurança, usamos um manipulador de servidor que encaminha as solicitações do seu assistente ao OpenAI. Além disso, esse manipulador pode ser usado para adicionar autenticação e limitação de taxa ao seu assistente.

Atualmente, as seguintes estruturas são suportadas:

• Next.js
• Remix
• Expressar

Leia mais sobre a implantação segura clicando nos links acima.

Execute a demonstração

Para executar a demonstração, construa o projeto e inicie o aplicativo de demonstração:

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

Em seguida, vá para http: // localhost: 5173/para ver a demonstração.

Problemas

Sinta -se à vontade para enviar questões e solicitações de aprimoramento.

Licença

Mit

Copyright (C) 2023, Markus Ecker