Nexai Assistant Library

Nexai is a powerful decentralized AI assistant designed to elevate customer experiencefor dApps on the Internet Computer. This npm package allows you to seamlessly integrate Nexai into your dApp and provide personalized assistance to your users.

Installation

You can easily install the Nexai Client Library using npm or yarn:

npm install nexai-assistant
# or
yarn add nexai-assistant

Configuration and Setup (ETA 3minutes)

Configuring nexai-assistant to communicate with your dApp information is very straight forward and in 3 steps

NOTE: Ensure you are using dfx version 0.15 or greater

STEP 1

Once installation is successful, navigate to app.jsx file and import in the this library like so, then add it into the return block.

import * as React from "react";
import LandingPage from "./landingPage";
import {Assistant} from "nexai-assistant";

const App = () => {
    return (
      <React.Fragment>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          ...
        </Routes>

        ///////////////////INTEGRATION BEGINS HERE///////////////////

        //Here is where you put in the assistant library
        <Assistant
          actor={nexaiActor}  //details to generate this below
          color="purple"      //well, any color you like
          companyName="companyName"
          companyId={}        //this should be a number
          companyPrincipal={
            "xxx-d2xxxe-xxxz-..."} //unique principal
        />
        ///////////////////INTEGRATION STOPS HERE///////////////////
        ...
      </React.Fragment>
    )
};

well you can do this in just a page like your landing page file or anywhere in your code, but this is an asumption that you want the assistant to appear on every page.

NOTE:

You can get your integration paramters on the integration page in Nexai.

Yes, you should have an Error!. Don't worry, this error just means you have to pass in some details into the Assistant for it work well, most likey the actor since we haven't generated that yet

STEP 2

Now, let's move to our dfx.json file. Open dfx.json in an Editor pen, the 'dfx.json' file. You will be adding configuration code to this file to enable communication with your canister

{
  "version": 1,
  "canisters": {


    "your_frontend": {...},
     "your_backend": {...},

     ///////////////ADD THIS////////////////////
    "nexai": {
      "type": "pull",
      "id": "fnnlb-hqaaa-aaaao-a2igq-cai"
    },
    ///////////////ADD THIS////////////////////
  },
    ...
}

STEP 4

Build and Deploy To apply the changes, build and deploy your canister project using the DFX CLI. Run the following commands in your terminal:

$ dfx deps pull

$ dfx deps init

$ dfx deps deploy

$ dfx generate

Yes some magic happened, but in a nutshell, you have successfully pulled Nexai's canister into your project and also created the types necessary to communicate with nexai's canister, found in the declaration folder called "nexai".

STEP 5

Now, let's create our Actor🎉 Well, this is really simple, for any dApp to run on the internet computer, you need to have a way to generate an identity for every user who comes to your site. this can be through internet Identity, Plug Wallet or NFID, either way, you are just going to repeat the same process but to Nexai's actor this time around and you're all set to enjoy the full glory of Nexai🙌

• the snippet of code creating your present actor would mostly look like this or similar

export const actor = createActor(CANISTER_ID_PROJECT_NAME, {
  agentOptions: {
    host,
    identity: random,
  },
});

• repeat the process but this time, the createActor and CANISTER_ID will be from the nexai folder inside the declarations folder we generated in STEP 4
• import createActor and canisterID from declarations/nexai
• to prevent error, rename nexai's createActor and canisterId likeso

import { canisterId as NexaiCanisterId,
  createActor as NexaiCreateActor } from "..relativepath/declarations/nexai";

• now use it like so

export const NexaiActor = NexaiCreateActor(NexaiCanisterId, {
  agentOptions: {
    host,
    identity: random,
  },
});

• so your actor list should look something like this

export const actor = createActor(CANISTER_ID_PROJECT_NAME, {
  agentOptions: {
    host,
    identity: random,
  },
});

export const NexaiActor = NexaiCreateActor(NexaiCanisterId, {
  agentOptions: {
    host,
    identity: random,
  },

STEP 6

head back into app.jsx or any file you placed the Assistant library; STEP 1, and pass in NexaiActor into the actor, you shold now have something like this

      <Assistant
          actor={NexaiActor}
          color="purple"
          companyName="companyName"
          companyId={}
          companyPrincipal={
            "xxx-d2xxxe-xxxz-..."}
        />

Welldone, you're fully set. To test this out, deploy your frontend app, you should now see the assisant library across the pages you placed it.

NOTE:

You can get your integration paramters on the integration page in Nexai.

NOTE: Functionality test only works on mainnet for now, so testing your assistant's response would only work when you have deployed to the mainnet

Need Help

We have a 24/7 deveeloper support, just reach out to us here on discord and we'd help you have Nexai up and running or here on Twitter

Contributing

We welcome contributions from the community soon!

License

This project is licensed under the MIT License.

Contact

If you have any questions or need support, feel free to contact us on X.