Mar 25, 2026

Organize your AI coding workflow with Agent Grid 🚀

36views

Organize your AI coding workflow with Agent Grid 🚀

Agent Grid solves the clutter of managing multiple cloud coding sessions by providing a persistent workspace that saves your browser tabs, terminals, and project state. It also features smart commits to intelligently organize and save changes made by AI agents.

Organize your AI coding workflow with Agent Grid 🚀

Agent Grid solves the clutter of managing multiple cloud coding sessions by providing a persistent workspace that saves your browser tabs, terminals, and project state. It also features smart commits to intelligently organize and save changes made by AI agents.

Chapters

00:00

Introduction to Agent Grid

The problem of managing multiple cloud coding instances and browser windows.

01:07

Agent Grid Demo

02:12

Smart Commits Feature

02:56

Organizing Project Notes

03:28

Monitoring Agent Status

04:11

Full Workspace Example

06:12

Finalizing Smart Commits

Transcript

00:00

when we build projects with vibe coding tools such as Claude code, usually we end up creating more than just one window.

00:06

one implements a feature, the other one points a different feature.

00:09

And we would like to maintain that.

00:11

That's why the resume feature actually exists We want to get back into that session.

00:14

I created Agent Grid because I saw a lot of people creating these sort of infinite canvas versions where you could spawn, a lot of cloud code instances.

00:22

But I wanted something a little more.

00:24

I wanted to be able to have notes auto dictated and be part of the context of the entire workspace of that project.

00:32

I also wanted to be able to open up VS code within that workspace and be able to open up different browser tabs for different services that the project might be utilizing.

00:43

Say I'm building a web app.

00:45

I'm probably using Vercel to deploy it.

00:47

I'm probably using Supabase for the database, maybe cloudflare for the DNS configuration and more.

00:54

And when I want to get back into building that project, I would like to have, all of the associated items, nodes, cloud code instances, terminals and browser all spun, up back into the same place where I left it, hence Agent Grid.

01:11

gonna here just pick one project that I've already started on.

01:16

You can see here.

01:16

This I am going to close the VS code here.

01:18

I'm going to just showcase to you how I spawn it.

01:21

Basically I select Code editor.

01:24

I'll make it also in so that I can see it better.

01:28

I can see the version control here.

01:30

You could see already that these sessions are here.

01:33

Let's go ahead and close it.

01:36

I'm going to come back here.

01:37

I'm going to spawn it again.

01:39

It found the sessions, it found which windows I had open and I can refresh this page.

01:46

I can see it.

01:47

I'm going to go ahead and get the dev tools as well just so that I can have it on the side in case I need to.

01:53

When I go back here I will see all of these windows again.

01:58

a lot of the times we could be building with multiple agents making different changes it's hard to commit and find which files belong to which agent changes.

02:06

Therefore I created smart commits which would be able to find feature specific changes and commit them in an intelligent way.

02:15

let's create a note while we're at it in the following bullet points.

02:20

The first point is this is a simple bullet point.

02:23

The second point is this is a second simple bullet point.

02:26

And the third point is this is the third simple bullet point.

02:29

Obviously these could be notes.

02:32

It's going to stop, it's going to record the entire conversation and based on the context of the note it would be able to organize it.

02:41

So here we go.

02:41

We could see three bullet points and a note.

02:45

And as you can see a lot of the times we miss when an agent is done work here I can see this is green border.

02:52

That means it's done.

02:53

This is orange border.

02:54

It means it requires my attention.

02:56

Obviously it get run in dangerous mode but we will continue by just simply authorizing each change.

03:02

I will show you an example of a how what you could end up creating within the same workspace.

03:08

This is practically the state of the project.

03:11

I have say Supabase here.

03:12

I have railway, I have the project, I have the running instances and all of the nodes and terminal instances and Claude code instances are here or more nodes.

03:25

This is all audio dictated.

03:27

You So if I close this, come back and if I open it again, as you can see everything would resume the way I left it.

03:39

All my sessions are saved in the browser and I'm going to just zoom in here and we're back to it.

03:48

Let's go back.

03:50

two separate changes.

03:51

going to go ahead and say smart commits and this should create two separate commits.

04:01

There we go.

04:02

It's the first one.

04:07

Perfect.

04:08

So here's the first commit footer and here's the second commit with the navbar changes.

Organize your AI coding workflow with Agent Grid 🚀 — Tella