Skip to main content

Step by step with React or Next.js

  1. Install @compilot/react-sdk.

  2. Create compilot-config.ts that calls the endpoint you created in the back end.

    export const createSession = () => {
      // make sure your backend is running on port 5002
      return fetch("yourApiUrl:yourApiPort/yourApiEndpoint", { method: "POST" }).then(
        (res) => res.json()
      );
    };

  3. Wrap your app in the ComPilotProvider component to get access to the ComPilot React SDK.

    import { createAuthAdapter, createConfig } from "@compilot/react-sdk";
    import { createSession } from "./compilot-config.ts";
    const authAdapter = createAuthAdapter({ createSession });
    const compilotConfig = createConfig({ authAdapter });
    createRoot(document.getElementById("root")).render(
      <StrictMode>
        <CompilotProvider config={compilotConfig}>
          <App />
        </CompilotProvider>
      </StrictMode>
    );

  4. Use the hooks provided by the React SDK to interact with the ComPilot Widget.

    import { useOpenWidget } from "@compilot/react-sdk";
    <button
              id="compilot-button"
              disabled={openWidget.isLoading}
              onClick={() => openWidget.mutateAsync()}
            >
              Open Widget
            </button>

Example​