UrbanBot

The universal chatbot library based on React. Write once, launch Telegram, ...

README

Urban Bot


The universal chatbot library based on React.

Declarative. You don't need to know any messenger API, just write simple react components.
Multiplatform. Write once, launch any messenger.
Reusable. Easy share logic between different chatbots or just use common parts.
Session. App renders unique for every chat, so just write your app as if it is client-side rendering.
Types. Full typescript support.

Platforms we are supporting

undefined
undefined
undefined
undefined
Soon

undefined
undefined
undefined

Tutorials


Installation

Please use our zero configuration starter.

typescript

  1. ```
  2. npx create-urban-bot my-app
  3. ```

javascript

  1. ```
  2. npx create-urban-bot my-app --template js
  3. ```

Or install manually:
  1. ```bash
  2. npm i react @urban-bot/core @urban-bot/telegram @urban-bot/facebook ...
  3. ```

Example

undefined
undefined
  1. ```javascript
  2. import React from 'react';
  3. import { render, Route, Router, Root, Text, ButtonGroup, Button, useText } from '@urban-bot/core';
  4. import { UrbanBotTelegram } from '@urban-bot/telegram';
  5. import { UrbanBotSlack } from '@urban-bot/slack';

  6. function Echo() {
  7.     const [text, setText] = React.useState('Say something');

  8.     useText(({ text }) => {
  9.         setText(text);
  10.     });

  11.     return (
  12.         <Text>
  13.             <i>{text}</i>
  14.         </Text>
  15.     );
  16. }

  17. function Counter() {
  18.     const [count, setCount] = React.useState(0);

  19.     const increment = () => setCount(count + 1);
  20.     const decrement = () => setCount(count - 1);

  21.     return (
  22.         <ButtonGroup title={count} isNewMessageEveryRender={false}>
  23.             <Button onClick={increment}>+1</Button>
  24.             <Button onClick={decrement}>-1</Button>
  25.         </ButtonGroup>
  26.     );
  27. }

  28. function App() {
  29.     return (
  30.         <Router>
  31.             <Route path="/echo">
  32.                 <Echo />
  33.             </Route>
  34.             <Route path="/counter">
  35.                 <Counter />
  36.             </Route>
  37.         </Router>
  38.     );
  39. }

  40. const urbanBotTelegram = new UrbanBotTelegram({
  41.     token: 'telegramToken',
  42. });

  43. const urbanBotSlack = new UrbanBotSlack({
  44.     signingSecret: 'slackSigningSecret',
  45.     token: 'slackToken',
  46. });

  47. render(
  48.     <Root bot={urbanBotTelegram}>
  49.         <App />
  50.     </Root>
  51. );

  52. render(
  53.     <Root bot={urbanBotSlack}>
  54.         <App />
  55.     </Root>
  56. );
  57. ```