I Built a Client-Facing IT Health Dashboard in One Afternoon. Part 2: Replit.
Vibe Coding

I Built a Client-Facing IT Health Dashboard in One Afternoon. Part 2: Replit.

Andrew MoonMay 19, 20266 min read

A static HTML file is a real deliverable. It is not a product.

Last Tuesday, in Part 1, I built a client-facing IT health dashboard in Claude using four prompts. One afternoon, no developer, no platform license. The output was a single HTML file. Open it in a browser, click print, you get a clean PDF you can email to a client.

That is enough for some use cases. It is not enough if you want clients to bookmark a URL and check the dashboard whenever they want.

To get there, the static file needs to become a hosted application. Real data connections. Live URL. Authentication. Refresh.

That is Part 2. Same dashboard. Different tool. Replit Agent.

Why the HTML File Is Not the Final Form

Let me be specific about what the Part 1 HTML can and cannot do.

It can. Open in any browser. Render the dashboard. Show realistic sample data. Print to PDF. Get attached to an email or a board deck.

It cannot. Pull data from your actual RMM or PSA. Update when ticket counts change. Hold a per-client view authenticated by a unique URL. Track which clients have looked at it. Update overnight without you regenerating the file.

For a one-time client meeting or a quarterly business review, the HTML file is enough. For a live client portal that becomes part of how you communicate value continuously, you need the next layer.

The next layer is a hosted application. And building that used to take a developer, a deployment pipeline, and a hosting environment. It does not anymore.

The Bridge: From HTML to PRD

Most owners I talk to have built something interesting in Claude or ChatGPT and then hit a wall. The output is real. They can see it works. They have no idea how to get it from a one-off generation into something that runs in production.

The bridge between those two states is not more code. It is a product requirements document.

A PRD is the document a developer would write to brief an engineering team. It defines what the application does, what the data model looks like, what the user flows are, what the edge cases are, what the success criteria are. It is the spec.

Claude can write the PRD from the HTML you already built. That is the move most people miss.

You hand Claude the HTML file from Part 1, plus a couple of paragraphs about how you actually want to use it in your business, and Claude generates a complete PRD. Tech stack recommendations. Data model. Page flows. Authentication approach. The whole brief, in language a coding agent can execute against.

The HTML defines what it should look like. The PRD defines what it should do. Together they are enough to brief a build agent.

The Drop: Replit Agent Builds It

This is where Replit Agent comes in.

Replit Agent is an AI coding agent that takes a brief and builds a working application. Not a scaffold. Not a starter template. A real, deployed, hosted application running on Replit's infrastructure.

You drop the PRD into a new Replit project. You give Replit Agent the goal. You let it work. It builds the application, deploys it to a live URL, and hands you back the link.

The first version will not be perfect. It rarely is. You spend an hour iterating with Replit Agent the same way you iterated with Claude in Part 1. Adjust the layout. Wire in the right data sources. Tighten the authentication. Each iteration is a sentence or two of feedback.

What you get at the end is a hosted dashboard at a real URL. Per-client login. Data that refreshes from sources you connect. A product, not a file.

The Math on This Build

For comparison, here is what this used to cost.

Custom client portal built by a development agency: between fifteen and forty thousand dollars for the build, then a few hundred a month in hosting, plus retainer fees for any change you ever want to make.

Off-the-shelf platform: two hundred dollars a month per client. Multiply by your client count. Lock-in baked into the contract.

This build, end to end, including Part 1 in Claude and Part 2 in Replit: roughly forty dollars in usage costs across the two tools. One afternoon. No outside developer. The application lives in your Replit account. You own the code. You can iterate any time.

The three orders of magnitude cost difference is not a future state. It is happening right now. The MSPs who figure this out in 2026 will be operating with a structural cost advantage that is going to be hard to compete with by 2027.

What Replit Agent Is Actually Good At Right Now

Quick honesty pass. Replit Agent is excellent for a class of build that includes this dashboard. Internal tools. Lightweight client-facing applications. CRUD interfaces with auth. Anything where the spec is clear and the data model is straightforward.

It is not the right tool for everything. Real-time multiplayer applications, complex financial calculations with regulatory requirements, anything that needs deep mobile platform integration, those still benefit from a real engineering team.

But the surface area of "things a small business owner can build alone with Replit Agent" is expanding fast. The dashboard from Part 1 sits squarely in the green zone. So do most internal tools, lead capture utilities, simple client portals, custom intake forms, and a long list of utilities you used to pay SaaS subscriptions for.

Once you have run the Part 1 to Part 2 sequence once, you can run it on almost anything you build in Claude. Build it static first. Confirm the shape. Generate the PRD. Drop it in Replit Agent. Get a hosted version.

That is the workflow. The static build proves the design. The PRD bridges to the hosted version. Replit Agent ships it.

Your Move

You can run this whole sequence yourself this week.

If you have not built the Part 1 HTML, start there. Open Claude, start a new project, run the four prompts I shared in last week's article. You will have a working static dashboard in under an hour.

Then, generate the PRD. Take the HTML output, paste it into Claude, and ask Claude to write a product requirements document for a hosted version of this dashboard. Tell Claude what data sources you want to connect, who the users are, and how authentication should work. Claude returns the spec.

Drop the spec into Replit. Open a new project, give Replit Agent the brief, and let it build. Iterate until the dashboard looks and behaves the way you want.

The output is a live URL you can share with a client tomorrow.

If you want to skip the build and have this delivered for your business with your branding and your data sources connected, that is what Orange Labs does. orangelabs.agency

If you want to learn this whole workflow alongside other service business owners doing the same thing, the AI Rollout Cohort is at orangenomad.com/ai-rollout.

Take the free AI Readiness Assessment to see exactly where your business sits on the curve. orangenomad.com/ai-assessment

Watch the full Part 2 walkthrough on YouTube: https://youtu.be/7Ir7XmJd44A

Watch Part 1 (Claude build): https://youtu.be/YM0bZBeuyH0

Andrew Moon

Andrew Moon is the founder of Orange Nomad and the creator of the 3Cs Framework — a repeatable marketing system built for MSP owners under $5M who are great at IT but struggling to find clients. Not a marketer who learned about MSPs. An MSP owner who learned marketing — the hard way.

Share