How a beagle-shaped AI agent ships code to madewithvuejs.com

This is a guest post from Armin Ulrich, a fullstack developer, and founder of placid.app. He also created the MadeWith* network where he shares his projects and allows other developers to share theirs.

---

Two people and one beagle run the project showcase madewithvuejs.com. The beagle is actually an AI agent that we have added to our workflows, but we're very fond of her by now. Milly is part of the team, scouting for content, building features and sniffing for bugs.

I'm going to walk you through her setup a little bit and share how she connects to our tools.

Meet Milly, a beagle-shaped AI agent

Milly started as an experiment with AI to automate the search for new content and has grown into a mix of developer, researcher and assistant. Her beagle identity has no deeper meaning than making interacting with her a bit more fun.

She's a cloud-hosted model inside a custom harness that lives on our own infrastructure. We try out different models regularly, so the harness is what actually makes her who she is.

What Milly does

A day in the life of this beagle is strictly scheduled:

• Content scout: In the morning, she starts her daily content run. She is looking for new and exciting projects made with Vue.js using our collection of sources and curation criteria. She then compares her finds with our database to avoid duplicates, and sends us her finished reports via Discord.
• Check for tasks: At regular intervals, she checks our Linear board for issues that are assigned to her: small features, human bug reports, our comments and feedback on open issues. She is allowed to build things and even push them live.
• Bug sniff: In the evening, she checks our Sentry dashboard for production issues, triages and fixes automatically (or decides she needs human assistance).

How our agent is connected to our tools

Milly has access to multiple tools we use, just like any other team member.

The most important one is, of course, our GitHub repo where she can create and merge branches, commit code changes and push. In our case, a push immediately triggers a deployment, so she can actually ship. For any change, Milly writes test cases and runs the full test suite before she deploys. She also verifies against the live site afterwards.

In our issue tracker Linear, she is installed as an agent user that we can delegate tickets to and @mention directly. She links all of her related GitHub commits in the resources section of her tickets, so we can always retrace her actions.

Milly is connected to our application monitoring service Sentry via their MCP. She has read-only access to all production issues including their context like traces and logs, and can resolve the issues in Sentry once she fixes them. Milly can also use Sentry's own debugging agent Seer as an on-demand tool to analyze complex issues and use its hypotheses for her own workflow.

The Discord connection is created via a Discord bot application. She posts her content scouts in a dedicated channel every day.

A real-life agentic workflow scenario

Last month, we reworked our project submission form. We had to ramp up the spam protection, and updated the form structure with some new sections and fields. The project started with a Linear issue including the brief, assigned to Milly.

Milly grabbed the ticket, and first had some questions about the backend integration and backwards-compatibility with existing submissions. After a few checks and two feedback rounds for small styling issues, she deployed the new form.

As it happens, two bugs crept in with that deployment. One was reported by us, and the other was found by monitoring production.

We noticed the first one when going through submissions in our backend and found that some project descriptions seemed to be truncated. Milly was sent to investigate, and she found it to be a quite inconsequential bug: The output of the field was printed as an HTML column in the backend. When a submitter wrote something about Vue's <script setup> in their description or used any other unclosed tag, everything after it was swallowed. Nothing was lost: The full description was safe in the database, and Milly quickly fixed the output.

The second bug was actually worse. The following week, Sentry reported a recurring SQLSTATE[22001] Data too long error that Milly started working on. She found that the form validated some fields at max 2,024 characters, while the database columns were only 2,000 characters long. Anything between 2,000-2,024 characters in these fields would make the INSERT fail, without telling the submitter. We actually lost 8 submissions to this before Milly fixed it, but she did so before we even had time to look at the dashboard.

Milly deliberately has a lot of autonomy and can independently work on features and bugs, which makes her so valuable for us. She isn't always perfect, but with her tooling she can also catch and fix the things that break.

Milly's leash length

We created some safeguards around Milly's work.

• Milly's goal is to build and ship features and bugfixes: If the brief is too big or too vague, she stops and asks us for clarification and decisions until she has everything she needs.
• Milly follows process templates: For fixing a bug, for example, she creates a branch → reproduces the bug → writes a test and watches it fail against the broken code → writes a fix → runs the full test suite → merges to main → pushes → verifies against the live site → writes up a report and hands the ticket to us for closing → resolves the matching Sentry issue if there is one. The "red-before-green" habit is especially valuable in this template: She writes the test so it fails before her own fix to correctly verify it later.
• Some things, Milly never does without involving us first: She does not write to production data, touch credentials or .env variables, force-push or change the server config. Some of these are hard limits (her credentials don't allow them), others are rules in her standing instructions.
• Milly doesn't have the last word: The agent is not allowed to close Linear tickets. This final check belongs to us, so we can keep an overview of what's happening.

Madewithvuejs.com is a content-focused site. It is automatically backed up, there is no user data except submissions, everything is reversible, and bugs do not affect paying customers the way they would for a SaaS. If Milly breaks something, her blast radius is minimal. Considering that, we can give Milly a pretty long leash and just let her try new tasks and workflows.

From content scout to shipping code

Milly was initially built just to automate daily content scouts. Then we added one skill and tool after another. GitHub when we allowed her to actually build things, Linear when we wanted a structured way to assign work, Sentry so she could fix production errors on her own.

We're a small team, and we've gained a lot more capacity for shipping ideas. What makes this possible is simple infrastructure: A task schedule, workflow descriptions, a test suite, a list of things the agent never touches on her own, and the same tried and tested tools we already use for product work.

The unglamorous setup work gives us the confidence to let Milly try new things. Put in that work and you might end up with a new loyal companion, too. Woof! 🐾