hyperrail on Adaptive Cards

Webex's Slack-like chat room service uses Adaptive Cards to define interactive messages from bots, just like Microsoft Teams does.

I do agree with you that it should catch on more and it's unfortunate that it hasn't.

valgaze 4y

+ 1

ex. You can do something like this: https://i.imgur.com/dcbzn3w.gif

I do a lot of thinking about conversation design "tooling" for automated agents and I found wrangling Adaptive Cards with "dynamic" content was a bit annoying since there's so many options. I needed a simple subset of functionality to cover most cases and to add features like tappable suggestion "chips"

I made little a utility called "Speedycard" which lets you "build" Adaptive Cards kinda like this:g

  const myCard = new SpeedyCard()
    .setTitle('System is ')
    .setSubtitle('If you see this card, everything is working')
    .setImage('https://i.imgur.com/VQoXfHn.gif')
    .setInput(`What's on your mind?`)
    .setUrl('https://www.youtube.com/watch?v=3GwjfUFyY6M', 'Take a moment to celebrate')
    .setTable([[`Bot's Date`, new Date().toDateString()], ["Bot's Uptime", `${String(process.uptime())}s`]])
    .setData({mySpecialData: {a:1, b:2}})

const fullCard = myCard.render() // JSON passed to an API/client

While I am convinced about the importance of conversation design and being thoughtful about this stuff sometimes it's convenient to just have a little form and the user adds their data and call it day

Cards source (can use this anywhere): https://github.com/valgaze/speedybot/blob/master/src/cards.t...

Experiment optimized for Cloudflare Workers: https://www.npmjs.com/package/speedybot-hub

Main Library: https://www.npmjs.com/package/speedybot

Comments