# Botonic: Build Chatbots in React, With Serverless Deployment

> Botonic is an MIT-licensed TypeScript framework from Hubtype that renders conversational apps as React components and deploys them as serverless functions. Here is how its CLI, plugin system and deployment model fit together, and where the trade-offs sit.

**hubtype/botonic** — Build chatbots and conversational experiences using React

- Repository: https://github.com/hubtype/botonic
- Website: https://botonic.io
- Stars: 626 · Forks: 90
- Language: TypeScript
- License: MIT
- Published: 2026-09-17 · Updated: 2026-09-17 · Language: en
- Canonical page: https://hysenlabs.com/projects/hubtype-botonic

## What Botonic solves, and who ends up using it

The README frames the problem in one line: "focus on creating the best conversational experience for your users instead of dealing with different messaging APIs, AI/NLP complexity or managing and scaling infrastructure." That is a fair description of the work it removes. A bot that answers on WhatsApp, Facebook Messenger, Telegram and Twitter DMs, and also on a website and inside a mobile app, normally means four or five webhook handlers, each with its own payload shape and its own way of expressing a button or a quick reply. Botonic puts a React component layer in front of that and asks you to describe the conversation once.

The audience is narrower than the tagline suggests. This is a framework for developers who are comfortable with JSX, npm and a build step. The repository is TypeScript-first: the package manifest lists react and react-dom at ^18.3.1 and zod at ^4.4.3 as top-level dependencies, and the toolchain is Biome, ESLint, Prettier, Jest and SWC. If nobody on the team wants to own a Node project, Botonic is the wrong starting point. The README's own support channel is a Slack community plus GitHub issues, and the project runs what it calls Friday Office Hours, which tells you the expected user is someone who will read source and file an issue, not someone shopping for a drag-and-drop product.

## React components as the conversation tree

The core idea is that a route is a React component. Instead of a state machine described in JSON, you write components that receive the user's input and return the next thing to render, and the framework maps that output onto each messaging platform's native format. The README describes the stack as React on top of Serverless, with Tensorflow.js available for on-device work, and lists the integrations as plugins rather than core code: analytics through Google Analytics and Dashbot, CMS through Contentful and Sanity, NLU through Dialogflow, Watson, Luis and Inbenta.

That plugin split is the most consequential design decision in the repository. The top-level packages/ directory holds each integration as its own package, so an NLU provider is a dependency you install and configure rather than something baked into the runtime. The practical effect is that you can swap Dialogflow for Watson without touching the conversation components, and you can leave out every plugin you do not use. The cost is that plugin versions move independently of the core, and a plugin that has not been touched in a while is still your problem when its vendor changes an API. The README points anyone wanting more integrations at issues and pull requests, which is an honest signal that coverage is community-shaped.

## Installing the Botonic CLI and running a first bot

The README states Node v10 or above and npm as prerequisites, recommends the LTS NodeJS installer, and suggests confirming with `npm --version` and `node --version`. The CLI is published as a global npm package. Note that the README writes the install line with a `$>` prompt prefix, which is a display convention, not part of the command.

```bash
npm install -g @botonic/cli
```

With the CLI on your path, scaffolding a project takes one command. The second argument selects a template; the README's example uses `tutorial`.

```bash
botonic new myBot tutorial
```

Running the bot locally is the step most people will repeat all day. The README says `botonic serve` is an alias for `npm run start`, starts a server at http://localhost:8080, and auto-reloads on every code change.

```bash
cd myBot
botonic serve
```

When you are ready to ship, deployment is a single command. The README documents the command but does not describe what it provisions or how to undo it.

```bash
botonic deploy
```

The repository also ships ready-made projects under examples/, including blank, blank-typescript and flow-builder-typescript, which is worth knowing before you scaffold from scratch. If you would rather start from a working tree, those directories are the fastest reference for how a Botonic project is laid out.

## Where Botonic stops being the right tool

The framework assumes the conversation lives in code you own. Teams whose support and marketing staff need to edit flows without a deploy will find that assumption hostile, and the README offers no visual authoring surface for the open source framework itself. The flow-builder-typescript example in examples/ suggests flow-builder tooling exists in the ecosystem, but the README does not present it as the primary way to build a bot, and nothing in the repository describes a hosted editor.

Serverless is the other constraint. The README names Serverless as one of the three foundations, and `botonic deploy` is the documented path to production. If your organisation runs long-lived containers behind a fixed egress IP, or if your compliance rules forbid a function-per-request model, you are working against the grain. The README does not document an alternative deployment target, and it does not document rollback, so treat the deploy step as one you should rehearse in a non-production account first.

The version numbering deserves a plain warning. The root package.json reads version 0.54.0 while the most recent release listed is v0.55.0, and the README's own install instructions describe Node v10 or above even though the toolchain in package.json (React 18, Zod 4, Jest 30) is far newer than that floor implies. Pre-1.0 projects move. Pin your versions and read the CHANGELOG.md before upgrading.

## Botonic compared with Chatbot-kit and hand-rolled React chat UIs

Two alternatives come up constantly in the search data around this project, and they solve different halves of the problem.

Chatbot-kit is a React component library for the chat interface itself. It gives you the message list, the input box and the bubbles, and it renders in your browser. It has no opinion about WhatsApp, no serverless deploy step and no NLU plugin layer. Botonic spans both the interface and the channel plumbing, which is why it ships a CLI and a deploy command. If all you need is a chat widget on a marketing site, Chatbot-kit is the smaller dependency; if the same conversation has to answer on Telegram as well, Botonic's channel abstraction is the part you would otherwise write yourself.

The other alternative is building directly on each platform's API with a React front end of your choice. That gives you total control over payloads and deployment, and it is genuinely simpler for a single-channel bot. It stops being simpler the moment you add a second channel, because the mapping between your conversation model and each platform's button, quick-reply and media formats is exactly the code Botonic already maintains. The honest test is channel count: one channel, write it yourself; three or more, the abstraction earns its keep.

## Licence, maintenance and what an upgrade actually costs

Botonic is MIT-licensed, and the LICENSE file sits at the repository root. For most teams that means you can use it commercially, modify it and ship it inside a closed product, provided you keep the copyright notice and permission text with the distribution. The MIT grant covers the framework and the packages in this repository; it does not extend to the third-party services the plugins talk to, so your Dialogflow, Watson, Contentful or Dashbot terms are separate agreements you negotiate with those vendors. That is a factual boundary of the licence, not legal advice, and anything touching your own compliance obligations belongs with your counsel.

On maintenance, the last push to the default branch was on 2026-09-14. Releases v0.53.0, v0.54.0 and v0.55.0 landed between 2026-07-27 and 2026-08-14. The upgrade cost is dominated by the plugin packages rather than the core: each integration is versioned separately under packages/, so a major bump in an NLU vendor's API can force a plugin upgrade that drags the core along with it. Because the project is pre-1.0, expect breaking changes between minor versions and budget time for reading CHANGELOG.md rather than assuming semver protection.

## Conclusion

Adopt Botonic if your team already writes React and TypeScript and you want one component tree to serve a web chat, WhatsApp, Messenger or Telegram, with plugins for Dialogflow, Watson, Contentful and analytics rather than hand-rolled API clients. Skip it if you need a visual builder as the primary authoring surface, or if you cannot run a Node build pipeline and a serverless deploy target. Before committing, verify three things against your own setup: that your Node version satisfies the README's stated v10-or-above prerequisite, that the plugins you need exist under packages/ for your NLU or CMS provider, and that botonic deploy works against your target account, since the README documents the command but not a rollback path.

## FAQ

### What is Botonic?

Botonic is an open source full-stack framework for building chatbots and conversational apps, made by Hubtype and built on React, Serverless and Tensorflow.js. It targets messaging apps such as WhatsApp, Facebook Messenger, Telegram and Twitter DMs, plus websites and mobile apps, and ships plugins for analytics, CMS and NLU providers.

### How do I install the Botonic CLI?

Install it globally with npm as @botonic/cli, after confirming Node v10 or above and npm are present. The README's quick start then uses botonic new myBot tutorial to scaffold a project and botonic serve to run it locally at http://localhost:8080.

### Which messaging platforms does Botonic support?

The README lists WhatsApp, Facebook Messenger, Telegram and Twitter DMs, along with your website and your mobile app. The framework's stated goal is that you write the conversational experience once instead of dealing with each messaging API separately.

### What licence does Botonic use?

Botonic is MIT-licensed, with the LICENSE file at the repository root. That permits commercial use and modification as long as the copyright and permission notice are preserved, but it does not cover the third-party services that the plugins connect to.

## Sources

- [hubtype/botonic on GitHub](https://github.com/hubtype/botonic)
- [License: MIT](https://github.com/hubtype/botonic/blob/master/LICENSE)
- [Project website](https://botonic.io)
- [README](https://github.com/hubtype/botonic/blob/master/README.md)
- [Releases](https://github.com/hubtype/botonic/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/hubtype-botonic