Plan, Design, and Construct a Behavior Monitoring App with A number of AI Brokers

Expensive subscribers,

Replit simply launched Agent 4, and I obtained early entry over the weekend.

On this tutorial, I’ll present you learn how to plan, design, and construct a habit-tracking app reside utilizing Agent 4’s new infinite canvas and parallel brokers.

I’ll additionally present you learn how to generate displays and animations from code, all in simply 10 minutes. Watch now on YouTube or learn the written information under.

Timestamps:

• (00:00) Three new options in Replit Agent 4

• (00:34) Step 1: Design a behavior tracker app with the infinite canvas

• (03:39) Step 2: Construct quicker with parallel brokers

• (05:52) Step 3: Publish a full-stack app in a single click on

• (07:11) Step 4: Generate a slide deck and animation from code

• (08:58) Sincere take: the place Replit suits within the AI coding market

I’ve all the time wished an app the place I can verify off habits on a calendar and observe streaks to remain motivated. So let’s construct it now. 🔥

Let’s begin by making an attempt out Replit’s new infinite canvas with this immediate:

Construct a cell behavior tracker app (max 3 habits). Two tabs: Calendar (default) and Habits (create/edit).

Calendar tab: Month-to-month view. Present a progress in every date ring that fills as habits are accomplished. Faucet a date to open a backside sheet with toggle playing cards for every behavior.

Habits tab: Create and edit habits. Identify subject, coloration task. Clear and minimal.

Let’s begin by exploring 4 design variants for the calendar tab on canvas:

1. Glassmorphic — darkish, frosted-glass playing cards, mushy glows, premium really feel

2. RPG Quest — pixel artwork, XP bars, streak flames, gamified

3. Botanical — dwelling backyard metaphor, streaks develop vegetation, calm and earthy

4. You shock me

Word how I requested Replit to generate 4 totally different designs. Behind the scenes, it spins up 4 separate brokers to do the work. Listed below are the primary three designs it generated:

Since I’m a gamer at coronary heart, I’ll go together with the RPG quest design. Now let’s edit the designs visually utilizing the canvas. You’ll be able to:

1. Generate further screens. Hit the + button for the RPG design and ask it to: “Generate the hunt display.”

2. Make exact edits. Click on the examine icon and alter textual content or colours manually.

Now that we now have a calendar and quest view that we like, let’s get Replit to construct them.

As a substitute of constructing with one agent at a time, let’s have two brokers work in parallel.

In Replit, now you can spin up separate threads to work on totally different components of the app. Listed below are the prompts I gave every agent:

Calendar view: Construct the month-to-month view, swipe to scroll between months, at the moment is highlighted. Date cells present progress rings that fill as habits are accomplished (1/3, 2/3, 3/3). Faucet a date to see backside tray the place I can toggle 3 habits on/off.

Habits view: Create and edit as much as 3 habits with title and coloration. Every behavior shows its present streak rely. Modifying a behavior resets its streak to zero.

After kicking off two threads, now you can sit again and watch the brokers work. There’s this cool Trello-style board view the place you possibly can see duties transfer via three levels: Drafts, Lively, and Prepared. Drafts are plans ready for approval, lively means the agent is constructing, and prepared means the work is finished and prepared for assessment:

That is the place I believe AI coding brokers are heading. As a substitute of pair programming with one agent, you’re managing a group of brokers. You give them directions, step away, and are available again to assessment the work.

As soon as the brokers end, you possibly can assessment each and click on “Apply modifications to the primary model” to merge it in. You’re nonetheless accountable for what ships. If one thing seems to be off, you possibly can ask for edits earlier than merging.

As soon as the app is constructed, you possibly can deploy it in a single click on by hitting Publish. One benefit of Replit is that it’s vertically built-in, with frontend, backend, database, and safety scanning all inbuilt.

Now let’s have some extra enjoyable. Recently I’ve realized that:

Code is the muse of all information work.

With code, you possibly can generate not simply apps, but additionally slide decks, animations, paperwork, and extra. For instance, I pasted this full publication submit into Replit and generated these belongings:

1. Slide deck. The Agent generated 10 slides protecting how you need to use Agent 4 to plan, design, and construct the behavior tracker.

2. Animation. The Agent generated a wonderful animation full with customized graphics and extra.

Slides, animations, and paperwork are all simply code beneath the hood. If an agent can write and iterate on code, it may well generate nearly any information artifact.

I believe the AI coding market has cut up into two segments — instruments for skilled builders and instruments for everybody else.

For builders, I believe it’s a two-horse race between Claude Code and OpenAI’s Codex. These instruments are highly effective, quick, and deeply built-in into mannequin and developer workflows.

For everybody else — and that is the bigger market — Replit is making two bets with Agent 4:

1. Non-technical folks will collaborate straight with AI brokers. Designers will use AI to generate designs on a canvas as an alternative of doing them manually. PMs will handle brokers via a Trello-style board to get work executed.

2. Code is the muse of data work. If an agent can write code, it may well generate apps, displays, animations, and extra. Simply take into consideration how many individuals use Microsoft Workplace, Google Workspace, and conventional design or animation instruments. That’s the market Replit is chasing.

I believe Agent 4 is an actual step ahead on each fronts. The canvas might use a bit extra polish, however the course is obvious. We’re going to work with AI brokers to construct every kind of issues sooner or later, not simply apps.

Watch my tutorial to see it in motion and go attempt Agent 4 your self.