beakjs

? Paruh

Beak.js berisi semua yang Anda butuhkan untuk membuat asisten bertenaga AI khusus untuk aplikasi React Anda.

Fitur Utama:

• UI bawaan - Dilengkapi dengan jendela obrolan yang indah dan sepenuhnya dapat disesuaikan.
• Mudah digunakan - terintegrasi dengan aplikasi React Anda yang ada hanya dalam beberapa baris kode.
• Open Source - Beak.js adalah open source dan gratis untuk digunakan.

Memulai

Instalasi

Pertama, tambahkan beak.js ke proyek Anda:

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

Pengaturan

Selanjutnya, bungkus aplikasi Anda di komponen Beak dan tambahkan jendela asisten:

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

Sekarang, Anda sudah menyiapkan jendela obrolan di sudut kanan bawah situs web Anda. Cobalah!

Catatan: Jangan mengekspos kunci API Anda di aplikasi yang menghadap publik - ini hanya untuk pengembangan. Lihat Penempatan untuk informasi tentang cara menggunakan aplikasi Anda dengan aman tanpa mengorbankan kunci API Anda.

Membuat paruh.js berfungsi dengan aplikasi Anda

Anda dapat membiarkan asisten melakukan tugas di aplikasi Anda dengan mengatur fungsi dengan 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 > ;
} ;

Perhatikan bahwa fungsi tersedia bagi asisten segera setelah komponen masing -masing dipasang. Ini adalah konsep yang kuat, memastikan bahwa asisten akan dapat menyebut fungsi yang relevan dengan konteks aplikasi Anda saat ini.

Biarkan asisten tahu apa yang terjadi di layar

Anda dapat dengan mudah memberi tahu asisten apa yang saat ini ada di layar dengan menggunakan useBeakInfo :

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

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

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

Dengan menggunakan useBeakFunction bersama dengan useBeakInfo , asisten Anda dapat melihat apa yang terjadi di layar dan mengambil tindakan dalam aplikasi Anda tergantung pada konteks saat ini.

Penyebaran

Untuk menjaga kunci API Anda tetap aman, kami menggunakan penangan sisi server yang meneruskan permintaan asisten Anda ke Openai. Selain itu, pawang ini dapat digunakan untuk menambahkan otentikasi dan membatasi tingkat untuk asisten Anda.

Saat ini, kerangka kerja berikut didukung:

• Next.js
• Remix
• Cepat

Baca lebih lanjut tentang penempatan aman dengan mengklik tautan di atas.

Jalankan demo

Untuk menjalankan demo, membangun proyek dan memulai aplikasi demo:

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

Kemudian pergi ke http: // localhost: 5173/untuk melihat demo.

Masalah

Jangan ragu untuk mengirimkan masalah dan permintaan peningkatan.

Lisensi

Mit

Hak Cipta (C) 2023, Markus Ecker