react-stackai allows you to export and use Stack AI interfaces as React components.
✨ StackAI is the no-code AI application builder.
Twitter | Community | Documentation
npm install react-stackai
or
pnpm install react-stackai
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.
![image](https://private-user-images.githubusercontent.com/32944505/283898491-d89109fb-8c33-41d3-ba67-d3145b6c581e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzMjI1NzYsIm5iZiI6MTcyNTMyMjI3NiwicGF0aCI6Ii8zMjk0NDUwNS8yODM4OTg0OTEtZDg5MTA5ZmItOGMzMy00MWQzLWJhNjctZDMxNDViNmM1ODFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAzVDAwMTExNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM3YjhlNDJmMDYwNmY4ZmU1M2JjMzcxZjFjYTg0NzVkM2Q2ZTk3MDYwNjE0OGIzYjk0Y2M2Yzk1Y2FhYjI2ZjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.C4gYg-nG9UdlRqLQpnEhL235MAQYUKNJjSpSwS7W2DU)
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
![image](https://private-user-images.githubusercontent.com/32944505/285040887-6df0c532-c85c-4d82-b004-9b4612f52139.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzMjI1NzYsIm5iZiI6MTcyNTMyMjI3NiwicGF0aCI6Ii8zMjk0NDUwNS8yODUwNDA4ODctNmRmMGM1MzItYzg1Yy00ZDgyLWIwMDQtOWI0NjEyZjUyMTM5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAzVDAwMTExNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0OGZlMmIxZDQxZGQ4YTI2Yjg0NWZjNzAxNDNjNjM4YmY4Mjg2ZjdhNzkyMGZjNTI1YWJkNWNmMmM1Y2RjNmUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.42VbnM1VrE5T4Cnqke-i2xXVni4eeMSFSNMV6mgqJOo)
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. |
height
of the iframe is automatically set to 40 rem
.
npm install
or
pnpm install
Serve the minimal React application inside the example
folder.
npm run dev
or
pnpm dev
npm run build:react
or
pnpm build:react
Open a PR and you should be good to go!