Server-side rendering

The Alan AI Web SDK relies on some browser-specific APIs. If you use it in projects that are rendered on the server side, you need to make sure that you request and use the Alan AI button in the code which is running on the client side.

Server-side rendering with NextJS

Below is an example of how to use the Alan AI button in a React application which is rendered on the server side with NextJS. In NextJS, the componentDidMount() method is executed only on the client where window- and other browser-specific APIs are available, so you can use the Alan AI button like this:

Client app
useEffect(() => {
  const alanBtn = require('@alan-ai/alan-sdk-web');
  alanBtn({
    key: "YOUR KEY",
    host: "v1.alan.app",
    rootEl: document.getElementById("alan-btn"),
  });
}, []);
Client app
componentDidMount() {
  const alanBtn = require('@alan-ai/alan-sdk-web');
  alanBtn({
    key: "YOUR KEY",
    host: "v1.alan.app",
    rootEl: document.getElementById("alan-btn"),
  });
}