Vable - React

Install VableAI in less than 5 minutes.

For full documentation, visit docs.vable.ai/getting-started/react.

Installation

Install the VableAI SDK by running the following command:

npm install @vableai/react

Add Widget to your website

import { Vable } from "@vableai/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 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:

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