Booster - Friendly Rooster Making Slack Blocks for Everyone

Just a friendly rooster shaped agent that allows you to create beautiful and dynamic blocks from any data source, Slack or external, using extremely friendly Pug-like syntax, or no code if you prefer.

Comment

Inspiration

our code is totally opensource for both our agent 🐔 Booster the Rooster and our supporting package 🌁 Hypeimage. 🍴Fork us if you want

First off, we would just like to thank Slack for making us love code again. This was the first time we have ever coded an Agent, and it was truly a learning experience! Through our Slack agent we solve the problem of Cognitive Overload in part caused by the Cognitive AI boom, using Slack Agents and the Real Time Search API

Our goals as part of this hackathon

  • 💰Create a sustainable and scalable Agent loop (our entire agent loop + LoRA) cost ~$1 for over 2 million tokens consumed, we have described optimizations below
  • 😍Agent-created beautiful, contextual, dynamic and interactive blocks based messaging directly to Slack channels, and sidebar based direct messaging for edits
  • 🧠 A Self-correcting resilient model that thinks in Slack Blocks, instead of simply fitting information into a template, so that it can adapt to any information or data
  • 🏞️Image based cards and polls even where images might not be directly available to make Slack channels :joy: 🤩

Our notable code contributions as part of this hackathon

  • Blocks JSON to JSX components like DSL transliteration library
  • Blocks JSON to Pug-like DSL transliteration library
  • Self Correcting Agent Loop tightly coupled with Slack APIs handcoded to be super duper 🤑 cheap
    • thinking processes and statuses flow directly from the agent to slack, incorrect blocks are self corrected and fed back into Slack
  • Hypeimage a TS package to generate SVG text based images for info cards blocks
  • LoRA trained Qwen 30B - A3B model to generate aforementioned JSX blocks instead of prompting repeatedly wasting tokens

New Component - HypeCard 🔥

Animated GIF showing Creation of Hypecard from natural language

You can even prompt directly in Pug like syntax

Animated GIF showing Creation of Hypecard from Pug like Markup language

We have not used AI to write any part of this submission, however we have used AI assisted coding to plan and build parts of this project (with significant human edits), and also AI to auto-generate the Architecture Mermaid Diagram from our codebase.

What it does

🐣 Our Agent 🐔 Booster the Friendly Rooster generates JSX based syntax from Slack data (uncovered using the RTS api) in Markdown that is then transliterated to Blocks. We grab the action token directly from the user's chat message in order to provide a seamless RTS API search experience. In cases where action token might not be available we fallback to searching the channel's message history.

🐥 The Agent also lets you prompt by prompt correct or change blocks, through an interactive action called Edit Blocks (accessed from the actions menu ︙). You can also use a Pug-like syntax to specify exactly what blocks are to be created or edited.

🐓 The Agent also supports App mentions in a channel, so you can directly @Booster and ask it to create blocks in the channel using a prompt. It retrieves files and messages in the channel using the RTS api and generates blocks.

External requests to data sources that are not in the Slack Workspace are routed to a Web Search Tool

Why JSX and Markdown? Leading Research on Frontier Models (and to a lesser extent personal experience) makes it clear models like to think in Markdown. It is much easier for a model to output rich Markdown answering the user's query, with jsx fences enclosing the actual block architecture than to answer in JSON structure. This allows better streaming outputs to reduce TTFT also.

Why Pug? Pug is a html templating engine whose syntax is terse without XML tag load , but understood by most frontier LLMs, so you can ping our Agent just the DSL Pug-like syntax, and it will create blocks for you.

Use Cases

  • Interactive Polls either with multiple radio buttons or a pair of Hot or Not options
  • Beautiful information summary cards that can be grouped into an at a glance Carousel
  • Channel summaries with canvases, lists, and instructions on how to behave in the channel
  • Dynamic (Refreshable) Tables like the Knockout Table of the FIFA world cup living within a channel
    • and so many more...

In Summary our agent is a LoRA finetuned LLM with 3 tools:

  1. Real Time Search API using Semantic Search based Context for Files, Channels, Users and Messages
  2. Block information tool to provide information on Blocks syntax (which blocks can be nested and which cannot, which blocks to be used where). The model can generate blocks without referring to this tool, but in case a Block fails validation, it looks up the block and self corrects
  3. Web search tool to look up external information

How we built it

We used:

1. Blocks Components Registry

We built a blocks components registry in TSX to auto document blocks. We used Slack's blocks.validate API in order to ensure any composite blocks were de facto valid.

2. Serverless Self Correcting Agent REPL

We used Cloudflare Workers Free Tier along with Workers AI models. To make block generation in markdown effective we trained a tiny LoRA on our main model. Since CF has an upload limit of 300MB, we trained on Rank 8, Alpha 16 LoRa that clocked in at 13 MB, and due to the nature of Markdown based jsx blocks this was good enough to achieve performance. Any blocks errors would recursively be corrected upto a standard limit.

3. Dynamic Blocks

Interactivity Endpoint handles any actions taken on the generated blocks. Share copies the blocks into any channel or DM. Refresh sends the block back to the agent, which then updates it with the latest data. Polls (unique votes) are handled separately

4. Real Time Search

For any query that needs Slack based data we provide Slack RTS api (with conversations.history api fallback) based tools to the model. For external search we provide Tavily api based tools to search the web.

5. State Management and Verification

Any state is temporarily held, all state is encryted using a global token. All slack messages are verified with signing token. All endpoints are validated using a global token.

Our architecture mermaid diagram makes it clear (we've attached it to our submission separately)

Architecture diagram for Boosters

6. Puglify/JSXlike DSL

Our Agent produces code like this:

<DataVisualization type="bar" title="Sales by Region">
  <Series name="North">
    <SeriesRow label="Q1" value={120} />
    <SeriesRow label="Q2" value={150} />
  </Series>
  <Series name="South">
    <SeriesRow label="Q1" value={90} />
    <SeriesRow label="Q2" value={130} />
  </Series>
  <AxisConfig categories={["Q1","Q2"]} xLabel="Quarter" yLabel="Revenue" />
</DataVisualization>

And responds to structured prompting like this:

DataVisualization(type="bar" title="Sales by Region")
  Series(name="North")
    SeriesRow(label="Q1" value=120)
    SeriesRow(label="Q2" value=150)
  Series(name="South")
    SeriesRow(label="Q1" value=90)
    SeriesRow(label="Q2" value=130)
  AxisConfig(categories=["Q1","Q2"] xLabel="Quarter" yLabel="Revenue")

Challenges Optimizations we ran into

We achieved an entire agentic project in less than $1 spent on tokens/training. This required significant optimizations listed below.

  • We used FOSS models instead of Anthropic or OpenAI apis in Cloudflare Queues to perform long running processing after first (< 3s) acknowledgement to Slack.
    • The first response from Serverless to Slack happens in less than a second after which we take a 30s waitUntil to process and route Slack requests.
    • In practice, the processing and routing takes much less, maybe a couple of seconds at most. This then routes into a Queue for long running tasks
    • We set Queue up with a batch of 1 and a wait of 1s to process any sent items within a second or two at most.
    • This is Horizontally Scalable, we can increase Worker concurrency and increase Queue batch size (at cost of time taken) to process many more requests
  • LoRA training to remove excess load of ~4000 tokens per request in order to clarify <jsx> blocks syntax to the model
  • Dual agent system meta/llama-3.2-3b-instruct which is smaller and consumes fewer tokens for low effort tasks like small talk AND a larger agent qwen/qwen3-30b-a3b for high effort tasks like the actual blocks generation.
    • Tool call summarization using meta/llama-3.2-3b-instruct since results may be quite large (tokens wise)
  • Cloudflare Free Tier for Workers AI basically put us at a cost of $0, but with a limit of about 300k tokens per day or so for this blended usage
  • LoRA training on Colab Pro (G4 instance 96 GB VRAM) cost about $0.8 and deployed to Cloudflare using Wrangler
  • Token caching, cloudflare provides this by default and we use it extensively
  • Due to last minute rate limiting errors we had to switch to Cerebras, but the principle remains the same

Accomplishments that we're proud of

Just being able to code something pretty well and make it look even better ❤️

We like to code, and while we see that being automated out of existence we also believe that humans can evolve into turning problems into such elegant and beautiful solutions that makes it impossible for any automaton to do the same. It's a challenging prospect, but one we will be here for.

What we learned

We learnt Hofstadter's law the hard way ( It always takes longer than you expect, even when you take into account Hofstadter's Law ) and honestly we could have done a lot more in terms of polish on the product. It took us about 3 weeks on and off to build this, and there's always the temptation of that ..one..week..more... while we prayed for a deadline extension.

What's next for Booster - Friendly Rooster Making Slack Blocks for Everyone

Polish, a lot more polish especially handling model quirks (Looking at you Llama 3.2 3B) as well as maybe deploying to an actual server-ful system instead of depending on CF Workers, to remove pesky timeout issues. We'd also like to put in a Full OAuth flow so that we can also take Slack actions on behalf of users.

Built With

Share this project:

Updates