🚀 navtalk-web-sdk

navtalk-web-sdk is a JavaScript SDK distributed via npm, allowing developers to quickly integrate AI chat and voice interaction into Web and Node.js applications.
The SDK provides the following features:

• Real-time AI conversation
• Voice interaction
• Chat functionality
• Easy-to-use API for fast integration

Get Project License and Custom Avatar

Note: Before using the SDK, you need to obtain a project license and configure a custom avatar.

Please apply for them here: NavTalk Console

Installation

Install via npm:

npm install navtalk-web-sdk

Or using yarn:

yarn add navtalk-web-sdk

Quick Start (Web Component)

1. Import the SDK

import "navtalk-web-sdk"

2. Use the Web Component

<my-navtalk-component 
  license="******" 
  character-name="******"
  left="100px" 
  top="100px"
>
</my-navtalk-component>

Component Attributes

1. license: NavTalk License (required)

  license="******" 

2. character-name: NavTalk Avatar Name (required)

  character-name="******"

3. left, top: the position of your navtalk component (optional) (default: left=0px, top=opx)

  left="100px" 
  top="100px"

4. isRememberPreviousConversation: Whether to upload the previous conversation (optional) (default: true)

  isRememberPreviousConversation="true"

5. Function Call (optional)

• Example 1: A function that closes the NavTalk conversation.

• Example 2: A function that calculates the sum of two numbers.

• (1).Add Function Call

  function-calls='[
    {
      "function_call_name": "function_call_close_talk",
      "function_call_description": "Please trigger this method when you receive a message or when the conversation is closed.",
      "function_call_parameters": {
          "properties":{
            "userInput": {"type": "string", "description": "Raw user request content to be processed"}
          },
          "required":["userInput"]
      }
    },
    {
      "function_call_name": "function_call_add_numbers",
      "function_call_description": "Please perform addition. Both parameter numbers must be obtained. Once both numbers are retrieved, please directly return their sum.",
      "function_call_parameters": {
        "properties":{
          "number1": {"type": "string", "description": "This is the first number to be added. If missing, ask: What is the first number?"},
          "number2": {"type": "string", "description": "This is the second number to be added. If missing, ask: What is the second number?"}
        },
        "required": ["number1","number2"]
      }
    }
  ]'

• (2).Trigger Function Call

  const sdkElement = document.querySelector("my-navtalk-component") as any;
  sdkElement?.addEventListener("sdkFuncationCall", (e: any) => {
     console.log('Recieve NavTalk-SDK-FunctionCall Event:', e.detail);
     //function-1：
     if (e.detail.raw_data.name === "function_call_close_talk") {
         sdkElement?.clickPlayOrStopButton();
     }
     //function-2:
     if (e.detail.raw_data.name === "function_call_add_numbers") {
        /*handle your event*/
     }
  });

Related Projects

If you want to learn more about AI or chat-related projects, check out:

NavTalk Samples

Author

navtalk, [email protected]