...

BotUI

A JavaScript framework for building conversational UIs
github-icon
GitHub
2.91kstar-icon
Created 8 years ago, last commit 14 days ago
21 contributors
496 commits
Stars added on GitHub, month by month
8
9
10
11
12
1
2
3
4
5
6
7
2024
2025
Stars added on GitHub, per day, on average
Yesterday
=
Last week
+0.3
star-icon /day
Last month
+0.1
star-icon /day
Last 12 months
+0.2
star-icon /day
npmPackage on NPM
Monthly downloads on NPM
8
9
10
11
12
1
2
3
4
5
6
7
2024
2025
No dependencies
README

logo

join discussion npm npm Twitter Follow

A JavaScript framework for creating conversational UIs.

Main Site - Read Docs - Examples - 🪄 Quickstart

Showcase 🎇✨

We are listing all the cool projects that people are building with BotUI, here. See others' and add yours!

Quick look

preview

Installation

npm i botui @botui/react

Example usage in React

import { 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(() => {
    (async () => {
      await myBot.wait({ waitTime: 1000 });
      await myBot.message.add({ text: 'hello, what is your name?' });
      const data = await myBot.action.set(
        {
          options: [
            { label: 'John', value: 'john' },
            { label: 'Jane', value: 'jane' },
          ],
        },
        { actionType: 'select' }
      );
      await myBot.message.add({ text: `nice to meet you ${data.selected.label}` });
    })();
  }, [myBot])

  return <div>
    <BotUI bot={myBot}>
      <BotUIMessageList />
      <BotUIAction />
    </BotUI>
  </div>
}

const containerElement = document.getElementById('botui-app')
const root = createRoot(containerElement)
root.render(<App />)

License

MIT License - Copyrights (c) 2017-25 - Moin Uddin