React

Install VableAI in less than 5 minutes.

Installation

Install the VableAI SDK by running the following command:

npm install @vableai/react

Add Widget to your website

import { Vable } from "@vableai/react/init";

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

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 React Router. For routing to work, VableNavigation must be used as the root/parent route element.

1. Pass your routes to the Vable component via the routes prop.
2. Set VableNavigation as the element of your root route layout.

import { VableNavigation } from "@vableai/react";

const routes = [
  {
    path: "/",
    element: <VableNavigation />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/about", element: <About /> },
    ],
  },
];

Then pass the routes to the Vable component:

import { Vable } from "@vableai/react/init";

<Vable
  publicKey="<replace_with_public_key>"
  routes={routes}
>
  {/* your app */}
</Vable>