DEV Community

Alex Amancio (Candoa)
Alex Amancio (Candoa)

Posted on

I built a headless React chatbot widget for full UI control

🧱 I built a headless React chatbot widget so devs can fully control the UI
Most chatbot widgets come bloated with their own styling and markup. I wanted something I could completely control — so I built my own.

šŸ‘‰ @candoa/chatbot is a headless React chatbot widget built for devs who love:

full UI freedom,

TailwindCSS,

React Hooks,

and minimal dependencies.

⚔ Key Features
Headless architecture (bring your own UI)

Conversation persistence (localStorage)

Greeting messages

Typing indicators

Error handling

Demo GIF: https://candoa-public.s3.us-east-2.amazonaws.com/chatbot-ezgif.com-loop-count.gif

šŸ› ļø Install

npm install @candoa/chatbot
Enter fullscreen mode Exit fullscreen mode

or

yarn add @candoa/chatbot
Enter fullscreen mode Exit fullscreen mode

šŸ“¦ Example

import { useChatbot } from '@candoa/chatbot'

const { state, actions } = useChatbot('your-project-id')

return (
  <div>
    {state.messages.map((m) => (
      <div key={m.id}>{m.text}</div>
    ))}
    <button onClick={() => actions.sendMessage('Hello')}>Send</button>
  </div>
)
Enter fullscreen mode Exit fullscreen mode

I’m a solo dev working on this. Would love your feedback or ideas!
GitHub: https://github.com/aamancio/candoa-chatbot

Top comments (0)