chatblocks - Messenger chatbots framework

• 

  Chatblocks support Messenger events (marking as seen)

• 

  List template. Good, ol' declarative code!

Inspiration

Chatbots are just another type of user interface. Nothing more, nothing less. At least if we think about chatbots as yet-another-UI, we can simplify development in many ways.

Chatblocks allows you to separate presentational layer, bot logic (NLP etc.) and server-side work (configuring webhooks etc). With this approach, learning curve for your team decreases.

Chatblocks treats messages as representation of some state. It does not care about your implementation of webhook, database integration, NLP, or how you deal with payloads.

With our convenient React-style API, you can build your chatbots declaratively, reuse components and integrate with other services (like database or so). We've got ready-made components for Messenger chatbot, but your components can do anything.

It means you can build chatbots nearly as fast as in popular platforms like Charfuel, for a fraction of the price, but with all elasticity and possibilities of the custom chatbot.

Demo

const Chatblocks = require("chatblocks");
const {Component, Block, Text, ButtonTemplate, Button} = Chatblocks;

// usually you want to keep one block per file
class FineBlock extends Component {
    async render() {
        return <Text>Test {this.props.emoji}</Text>
    }
}

class MainComponent extends Component {
    async render(event) {
        // event is available in main block only.
        // It can be passed down with props
        if (event.postback && event.postback.payload === "fine") {
            // you can transform event here, or in your webhook
            return <FineBlock emoji=":)"/>
            // use React-style props to share data
        }
        return <Block>
            <Text>Hello!</Text>
            <ButtonTemplate text="How are you?">
                <Button payload="fine">Fine</Button>
                <Button url="http://chatblocks.net">chatblocks.net</Button>
            </ButtonTemplate>
        </Block>
    }
    // Note that it's pure JavaScript. You can perform any operation here (database, whatever)
}

How it helps the community?

It makes chatbot development easier and faster. What is more important, it makes chatbot development fun!

How I built it

I used patterns from React.js, which is my favourite Facebook product.

Accomplishments that I'm proud of

Reaching 100+ downloads in first week on NPM!

What I learned

Coding chatbots can be fun!

What's next for chatblocks

Chatblocks needs wider audience, testing, and possibly rewriting to TypeScript.

Built With

• babel
• node.js