React-stackai NPM

ghbanner

react-stackai

react-stackai allows you to export and use Stack AI interfaces as React components.

✨ StackAI is the no-code AI application builder.

Install

npm install react-stackai

pnpm install react-stackai

Usage

To use react-stackai, first you have to go to the Stack flow builder, click on the Export button, select Website Chatbot and copy the url your project is served from.

You can copy the URL and pass it to the <Stack /> component in react:

import Stack from 'react-stackai';

export default function Home() {
  return (
    <>
      {/* Rest of your code */}
      <Stack project="https://www.stack-ai.com/embed/46bf5b6a-9b4d-48f6-8a13-cdfc4fe58520/11da0c81-afe2-4ccd-b498-807bbde8e7f1/653fefcfcc37c0093d55e6a9" />
    </>
  );
}

You should be able to see the chatbot embedded in your app

Props

These are all the props you can pass to the <Stack /> component.

Name	Type	Description
`project`	`string`	The URL of the project you want to embed
`width`	`string`	Specifies the width of the iframe. The value must be a string with a numeric value followed by a unit (e.g., '35rem', '100px'). The default is '35rem'. If the width is less than the minimum width of 15 rem, a warning is logged, and the width is adjusted to the minimum. If the width is specified without a recognizable unit or is an invalid string, an error is thrown.
`fixed`	`boolean`	Set to true if you want the chatbot to be fixed to the bottom of the screen, or false if you want it to be relative to the page.