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:

Functional component

Client app¶

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

Class component

Client app¶

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