如何將 AI 語音助理新增至您的 React 應用程式中-js教程-PHP中文網

如何將 AI 語音助理新增至您的 React 應用程式中

WBOY

發布： 2024-07-16 19:57:43

原創

888 人瀏覽過

在React JS安裝Sista AI語音助理

在當今的數位環境中，透過人工智慧驅動的功能增強用戶參與度至關重要。 Sista AI 提供了強大的、上下文感知的 AI 語音助手，可無縫整合到您的 React 應用程式中，而無需更改任何程式碼。本指南將引導您了解將 Sista AI 添加到您的應用程式的好處和簡單步驟。

為什麼要整合 Sista AI？

提高使用者參與度
Sista AI 提供動態和互動式語音 UI，讓您的應用程式更具吸引力，並透過免持體驗增強用戶保留率。
提高應用程式的可訪問性
透過支援多種語言和直覺的語音命令，確保您的應用程式可供更廣泛的受眾（包括殘障用戶）使用。
降低支援成本
自動回應常見問題並使用語音命令執行操作，從而顯著減少對人工客戶支援的需求。

如何將 Sista AI 安裝到您的 React 應用程式

Sista AI 是由開發人員為開發人員設計的。它提供了即插即用的解決方案，可在幾分鐘內整合到您的應用程式中，無需大量編碼或複雜的設定。

步驟一：安裝AI助理包

首先，使用 npm 安裝 Sista AI 軟體包：

npm install @sista/ai-assistant-react

登入後複製

第2步：導入AI Assistant Provider

接下來，匯入 AiAssistantProvider 並將您的應用程式包裝在根層級以啟用 AI 助理：

import { AiAssistantProvider } from "@sista/ai-assistant-react";

ReactDOM.render(
  <AiAssistantProvider apiKey="YOUR_API_KEY">
    <App />
  </AiAssistantProvider>
);

登入後複製

將 YOUR_API_KEY 替換為 Sista AI 管理面板中的 API 金鑰。

Sista AI Admin Panel

第三步：新增AI助理按鈕

匯入 AiAssistantButton 並將其放置在元件中的任意位置以啟用語音互動：

import { AiAssistantButton } from "@sista/ai-assistant-react";

function RandomComponent() {
  return (
    // ...
      <AiAssistantButton />
    // ...
  );
}

登入後複製

這樣您就可以開始與您的應用程式交談了:)

步驟4：（選用）註冊語音互動功能

要啟用 UI 的語音控制，請定義並註冊 AI 助理可以呼叫的函數。以下是定義函數並註冊它的方法：

import React, { useEffect } from 'react';
import { useAiAssistant, AiAssistantButton } from '@sista/ai-assistant-react';

function YourComponent() {
  const { registerFunctions } = useAiAssistant();

  const sayHelloWorld = () => {
    console.log("Hello, World!");
  };

  // Define the functions to be voice-controlled
  const aiFunctions = [
    {
      function: {
        handler: sayHelloWorld,
        description: "Greets the user with Hello World :)",
      },
    },
    // ... register additional functions here
  ];

  useEffect(() => {
    if (registerFunctions) {
      registerFunctions(aiFunctions);
    }
  }, [registerFunctions]);

  return (
    <div>
        // ...
    </div>
  );
}

export default YourComponent;

登入後複製

有關詳細說明，請造訪 Sista AI 文件。