React

Install VableAI in less than 5 minutes.

Installation

Install the VableAI SDK by running the following command:

npm install @vable-ai/vable-react

Add Widget to your website

import { Vable } from "@vable-ai/vable-react";

const routes = [
  {
    path: "/",
    component: () => <div>Home</div>,
  },
];

function App() {
  return (
    <div>
      <Vable
        publicKey="<replace_with_public_key>"
        routes={routes}
        theme={{
          primaryBackground: "#161F2D",
          secondaryBackground: "#1E293B",
          buttonBackground: "#161F2D",
        }}
      >
      {/*your child components */}
      </Vable>
    </div>
  );
}

Once added, you should be able to see the VableAI widget on your website.

Configuring routes

VableAI supports routing out of the box and can plug in with existing routes declared for libraries like React Router. You can configure your routes by passing an array of objects to the routes prop of the Vable component. Each object should have at least a path;

For example, when using react router and you declare your routes like below:

const routes = [
  {
    path: "/",
    // component: () => <div>Home</div>,
  },
];

You can simply pass the routes prop to the Vable component:

<Vable
  publicKey="<replace_with_public_key>"
  routes={routes}
  theme={{
    primaryBackground: "#161F2D",
    secondaryBackground: "#1E293B",
    buttonBackground: "#161F2D",
  }}
>
{/*your child components */}
</Vable>