botui / botui

πŸ€– A JavaScript framework for building conversational UIs

Home Page:https://botui.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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!

🚨 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.

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(() => {
    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 />)

License

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

About

πŸ€– A JavaScript framework for building conversational UIs

https://botui.org

License:MIT License


Languages

Language:TypeScript 57.8%Language:JavaScript 30.2%Language:SCSS 7.2%Language:CSS 3.3%Language:HTML 1.4%