beakjs

؟ Beak.JS

يحتوي Beak.js على كل ما تحتاجه لإنشاء مساعدين مخصصين يعملون منظمة العفو الدولية لتطبيق React الخاص بك.

الميزات الرئيسية:

• واجهة المستخدم المدمجة - تأتي مع نافذة دردشة جميلة قابلة للتخصيص بالكامل.
• سهل الاستخدام - يتكامل مع تطبيق React الخاص بك في عدد قليل من أسطر التعليمات البرمجية.
• المصدر المفتوح - Beak.js مفتوح المصدر ومجاني للاستخدام.

ابدء

تثبيت

أولاً ، أضف Beak.js إلى مشروعك:

npm install @beakjs/react --save

# or with yarn
yarn add @beakjs/react

يثبت

بعد ذلك ، قم بلف تطبيقك في مكون Beak وأضف نافذة مساعد:

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

الآن ، لديك نافذة دردشة جاهزة في الركن الأيمن السفلي من موقع الويب الخاص بك. جربها!

ملاحظة: لا تعرض مفتاح API الخاص بك في تطبيقات المواجهة العامة - وهذا للتطوير فقط. راجع نشر معلومات حول كيفية نشر تطبيقك بشكل آمن دون المساس بمفتاح API الخاص بك.

جعل Beak.js يعمل مع تطبيقك

يمكنك السماح للمساعد بتنفيذ المهام في تطبيقك عن طريق إعداد وظائف باستخدام 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 > ;
} ;

لاحظ أن الوظائف تصبح متاحة للمساعد بمجرد تركيب مكونها الخاص. هذا مفهوم قوي ، مما يضمن أن يكون المساعد قادرًا على استدعاء وظائف ذات صلة بالسياق الحالي لتطبيقك.

دع المساعد يعرف ما يحدث على الشاشة

يمكنك بسهولة السماح للمساعد بمعرفة ما هو حاليًا على الشاشة باستخدام useBeakInfo :

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

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

  useBeakInfo ( "current message" , message ) ;

  // ...
} ;

باستخدام useBeakFunction مع useBeakInfo ، يمكن للمساعد الخاص بك رؤية ما يحدث على الشاشة واتخاذ الإجراءات داخل تطبيقك اعتمادًا على السياق الحالي.

النشر

للحفاظ على آمنة مفتاح API ، نستخدم معالج جانب الخادم الذي يقوم بإعادة توجيه طلبات مساعدك إلى Openai. علاوة على ذلك ، يمكن استخدام هذا المعالج لإضافة المصادقة والمعدل إلى مساعدك.

حاليا ، يتم دعم الأطر التالية:

• Next.js
• ريمكس
• يعبر

اقرأ المزيد حول النشر الآمن من خلال النقر على الروابط أعلاه.

تشغيل العرض التوضيحي

لتشغيل العرض التوضيحي ، بناء المشروع وابدأ تطبيق العرض التجريبي:

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

ثم انتقل إلى http: // localhost: 5173/لرؤية العرض التوضيحي.

مشاكل

لا تتردد في تقديم المشكلات وطلبات تعزيز.

رخصة

معهد ماساتشوستس للتكنولوجيا

حقوق الطبع والنشر (ج) 2023 ، ماركوس إيكر