DEV Community

Cover image for Sidekick Bot - Generate Editable Designs With The Help of AI
Schemetastic (Rodrigo)
Schemetastic (Rodrigo) Subscriber

Posted on • Edited on

3 2 4 3 4

Sidekick Bot - Generate Editable Designs With The Help of AI

This is a submission for the Agent.ai Challenge: Full-Stack Agent, but also could qualify for Assembly of Agents and Productivity-Pro Agent (See Details)

⚠️ DISCONTINUED PROJECT, THE EDITOR IS NO LONGER MAINTAINED

If you saw the cover of this post, you already saw this agent in action!

What I Built

One common issue when generating images with AI is that it is hard to get text right, that's why I built an Agent that also incorporates an editor, you can give the agent instructions that you want to include in the design, such as the color of the design, title and content, then, with an embedded editor you can make tweaks to the design.

How does it work?

Image describing how Sidekick Bot agent works

Demo

✨Link to the agent!✨
✨Demo video of how Sidekick Bot works

This is the image you can see in the demo video:
Cover showing a house in a sunset and the topic is about real state

screenshot of the editor showing a cover and an illustration of an astronaut holding a computer

screenshot of the editor showing an image text post about writing clean code

It has potential for way more than what you see

Currently, it only supports 2 types of designs (Covers and Image Text Posts), and I know the editor is not the most complete, and it requires some tweaks (keep in mind that this was built in very few days), but following this approach you could create a lot of types of assets and designs, these are some examples: charts, social media posts, invoices, PDF's, lists, and a lot more.

Agent.ai Experience

It was fun using the builder to create in a series of steps a tool that it can be helpful to a human, it wasn't that hard to learn.

Where I struggled a little, was obtaining the defined variables in the agent, but finally I got my way around with this code:
let agentVars = JSON.parse(event["body"]).context.

I know that Agent.ai is relatively new, so I can't imagine what kind of crazy tools are going to be built with it as it advances more in its development and more people start to catch up. If I could give a suggestion, it would be to make more interactive and visually appealing videos on how to build agents in a way that people feel more attracted to the product (because I couldn't find too much of them). Generally it was a good experience, I'm glad I participated.


IMPORTANT NOTICE! You may have noticed that this post was modified after the challenge entry period ended, this is because yesterday I had problems deploying code to AWS Lambda, other users in the community also reported this problem. So, I couldn't finish my project yesterday, it was until today when code deployments finally was working, so I deployed the code I needed, and I decided to modify this post with more updated info (including, also, a fix I forgot to change) and images, and also I added a demo video of the project working in the Sidekick Bot website.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up