Background
We have been playing around manually with the Agent Explorer and the component creator agent to see if a subagent that looks at an image of an initial component and look at the state of the component will generate better results, and with three tests its obvious that it does.
One example:
We start with this image and ask the agent to generate it:
The first iteration as the agent works at the moment generates this:
We then loop this screenshot and the original image and ask a sub agent to look and describe what is needed to change. It comes up with:
### Key Changes Needed for testcomponent
1. **Background**
- Add a blue abstract gradient with glowing/light overlay effects using custom CSS. Keep Tailwind's bg-black as a fallback.
2. **Typography & Layout**
- Split the large heading into two lines with stronger sizing and spacing.
- Add a glowing or outer shadow/text-shadow effect to the hero text for emphasis (custom CSS).
- Increase spacing between all major elements.
3. **Top Badge**
- Update the "NEW" badge with a more vivid blue and subtle shadow/glow (custom CSS).
- Increase badge and padding roundedness to look more pill-like.
4. **Button**
- Make the button more pill-shaped, larger, with a blue glow/inner shadow (custom CSS).
- Lighter button font color.
5. **Supporting Text**
- Subheadline should be slightly lighter, add subtle blue tint if possible via CSS.
We then feed this into the agent again and tell it to change this, and it also give the two images and it comes up with:
Add another step and its at
So its clear that this improves the results.
Overview
We should build this in so the agent automatically can loop over its results until its happy. There are some questions that needs to be answered though:
We can do this via the frontend, since the iframe that previews the component is on the same origin - a tool like html2canvas should work. This however means that the loop or instruction has to be started over or triggered via the frontend, instead of the normal agent loop.
One option is that the agent returns a value of how well the new component fits the screenshot and if its under a threshold and it didn't reach max loops, it just sends it back for another iteration.
Since it costs money another solution is that after you generate a component from a prompt or image, that there is a button in the chatbot or on the preview that says something like "Improve quality" that runs another loop.
We can also do this via backend, but then we need an endpoint where we can render the unsaved component. On top of that we need to have headless chrome or somehing similar on the backend that can take screenshots, alternate a service that can run a proxy so it can work against your local machine.
The advantage with backend generation is that you will be able to create components over MCP (and through it Claude Code, Roo Tools, Cursor etc.) and also create a starterkit modules, that can pre-generate 10-15 components for you when you start a new website.
Proposed resolution
- Figure out which, if any solution is feasible to deploy. We will also have a way where agents can get supplemental features via recipes in AI 1.3.0, so it doesn't have to ship with XB AI core.
- Experiment with the html2canvas and XB to verify that it works.
User interface changes
TBD