beakjs

- Beak.js

Beak.js มีทุกสิ่งที่คุณต้องการเพื่อสร้างผู้ช่วย AI ที่กำหนดเองสำหรับแอพ React ของคุณ

คุณสมบัติที่สำคัญ:

• UI ในตัว - มาพร้อมกับหน้าต่างแชทที่สวยงามและปรับแต่งได้อย่างสมบูรณ์
• ใช้งานง่าย - รวมเข้ากับแอพ 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 ของคุณ

Making 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/เพื่อดูการสาธิต

ปัญหา

อย่าลังเลที่จะส่งปัญหาและคำขอปรับปรุง

ใบอนุญาต

มิกซ์

ลิขสิทธิ์ (c) 2023, Markus Ecker