Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/urban-bot/urban-bot

🤖 The universal chatbot library based on React. Write once, launch Telegram, Discord, Facebook, ... every messenger with chatbots
https://github.com/urban-bot/urban-bot

bot bot-framework chatbot chatbots discord discord-bot discord-js facebook-messenger-bot mobx react reactjs redux slack-bot telegram telegram-bot

Last synced: 5 days ago
JSON representation

🤖 The universal chatbot library based on React. Write once, launch Telegram, Discord, Facebook, ... every messenger with chatbots

Host: GitHub
URL: https://github.com/urban-bot/urban-bot
Owner: urban-bot
License: mit
Created: 2020-03-23T16:53:50.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-09-18T17:37:46.000Z (4 months ago)
Last Synced: 2025-01-03T00:07:37.694Z (12 days ago)
Topics: bot, bot-framework, chatbot, chatbots, discord, discord-bot, discord-js, facebook-messenger-bot, mobx, react, reactjs, redux, slack-bot, telegram, telegram-bot
Language: TypeScript
Homepage: https://urban-bot.now.sh
Size: 11.6 MB
Stars: 565
Watchers: 8
Forks: 32
Open Issues: 37
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

awesome - urban-bot/urban-bot - 🤖 The universal chatbot library based on React. Write once, launch Telegram, Discord, Facebook, ... every messenger with chatbots (TypeScript)
awesome-react-renderer - urban-bot - React for creating chatbots for any messengers (Telegram, Facebook, Slack, ...). (Chatbot)

README

        ![](files/banner.jpg)

![Build](https://github.com/urban-bot/urban-bot/workflows/Node.js%20CI/badge.svg)

[![Community Chat](https://img.shields.io/badge/Community-Chat-blueChat?style=flat-square&logo=telegram)](https://t.me/urbanbotjs)

# Urban Bot

The universal chatbot library based on [React](https://github.com/facebook/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**

[![](files/telegram-logo.svg)](https://telegram.org/)

 [![](files/discord-logo.svg)](https://www.discord.com/)

 [![](files/slack-logo.svg)](https://slack.com/)

 [![](files/facebook-logo.svg)](https://www.messenger.com/)

 

 

**Soon**

[![](files/whatsapp-logo.svg)](https://www.whatsapp.com/)

 [![](files/vk-logo.svg)](https://www.vk.com/)

 [![](files/viber-logo.svg)](https://www.viber.com/)

## [Get Started](https://urban-bot.now.sh/docs/intro.html)

## [API](https://urban-bot.now.sh/docs/components.html)

## Tutorials

* [How to create Todo List in Telegram](https://medium.com/@heresliker/how-to-create-todo-list-telegram-bot-with-react-js-f9f77d22cc49)

* [Как создать Todo List в Telegram](https://medium.com/@heresliker/%D0%BA%D0%B0%D0%BA-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D1%82%D1%8C-todo-list-%D1%87%D0%B0%D1%82-%D0%B1%D0%BE%D1%82%D0%B0-%D0%B2-telegram-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-react-js-d8a3c238ca91)

## Installation

Please use our zero configuration [starter](https://github.com/urban-bot/urban-bot-starter-typescript).

#### typescript

```

npx create-urban-bot my-app

```

#### javascript

```

npx create-urban-bot my-app --template js

```

Or install manually:

```bash

npm i react @urban-bot/core @urban-bot/telegram @urban-bot/facebook ...

```

## Example

![](files/telegram-gif.gif)

![](files/slack-gif.gif)

```javascript

import React from 'react';

import { render, Route, Router, Root, Text, ButtonGroup, Button, useText } from '@urban-bot/core';

import { UrbanBotTelegram } from '@urban-bot/telegram';

import { UrbanBotSlack } from '@urban-bot/slack';

function Echo() {

    const [text, setText] = React.useState('Say something');

    useText(({ text }) => {

        setText(text);

    });

    return (

        

            {text}

        

    );

}

function Counter() {

    const [count, setCount] = React.useState(0);

    const increment = () => setCount(count + 1);

    const decrement = () => setCount(count - 1);

    return (

        

            +1

            -1

        

    );

}

function App() {

    return (

        

            

                

            

            

                

            

        

    );

}

const urbanBotTelegram = new UrbanBotTelegram({

    token: 'telegramToken',

});

const urbanBotSlack = new UrbanBotSlack({

    signingSecret: 'slackSigningSecret',

    token: 'slackToken',

});

render(

    

        

    

);

render(

    

        

    

);

```