A JavaScript framework for creating conversational UIs.
Main Site - Read Docs - Examples - 🪄 Quickstart
We are listing all the cool projects that people are building with BotUI, here. See others' and add yours!
🚨 Note
This version is using a completely different approach for building UIs. Do not use it as a drop-in replacement for the previous version. If you want to use the previous (vue-only) approach, install the 0.3.9 version: npm i botui@0.3.9.
npm i botui @botui/reactimport { useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import { createBot } from 'botui'
import { BotUI, BotUIMessageList, BotUIAction } from '@botui/react'
const myBot = createBot()<div id="botui-app"></div>const App = () => {
useEffect(() => {
myBot
.wait({ waitTime: 1000 })
.then(() => myBot.message.add({ text: 'hello, what is your name?' }))
.then(() => myBot.action.set(
{
options: [
{ label: 'John', value: 'john' },
{ label: 'Jane', value: 'jane' },
],
},
{ actionType: 'select' }
))
.then((data) => myBot.message.add({ text: `nice to meet you ${data.selected.label}` }))
}, [])
return <div>
<BotUI bot={myBot}>
<BotUIMessageList />
<BotUIAction />
</BotUI>
</div>
}
const containerElement = document.getElementById('botui-app')
const root = createRoot(containerElement)
root.render(<App />)MIT License - Copyrights (c) 2017-23 - Moin Uddin
