Cand Dev · Youtube · 08:38

Build Admin Dashboards FAST with ShadcnSpace + AI

How an AGENTS.md file and three natural-language prompts turn a 136 MB dashboard template into a working blog app in under 9 minutes.

Posted
May 18th 2026
7 days ago
Duration
08:38
Format
Tutorial
educational
Channel
CD
Cand Dev
§ 01 · The Hook

The bait, then the rug-pull.

Nine minutes of screen recording that starts with a 136 MB dashboard template and ends with a working blog CMS — no hand-written code, just three prompts to an AI agent that already knows the codebase.

§ · Chapters

Where the time goes.

00:00 – 02:01

01 · Template tour

Walks through shadcnspace.com live preview — five layout variants, all built-in apps, and the decision to build a blog app.

02:01 – 03:26

02 · Download and open in VS Code

Downloads 136 MB zip, extracts the main folder, introduces OpenCode as the AI agent of choice.

03:26 – 05:09

03 · AI isolates the blog module

Prompts OpenCode referencing AGENTS.md; agent reads isolate-app.prompt.md and removes all non-blog modules automatically.

05:09 – 06:36

04 · AI rebranding

Second prompt rebrands the dashboard to Dev Blog, sets default redirect, removes remaining unneeded pages.

06:36 – 07:06

05 · Prisma + PostgreSQL setup

Single prompt installs and configures Prisma with local PostgreSQL; developer verifies via prisma studio.

07:06 – 08:38

06 · Backend integration and live test

Final prompt wires Prisma to Next.js front end; presenter creates a post, publishes it, and tests comments.

§ · Storyboard

Visual structure at a glance.

template homepage
layout variants grid
VS Code open
OpenCode terminal
AGENTS.md and prompts folder
blog-only routes result
rebranded dashboard demos
blog edit UI
blog post list live
post detail with comments working
§ · Frameworks

Named ideas worth stealing.

03:46 model

AGENTS.md + prompts folder pattern

Bundle an AGENTS.md at the project root and a prompts folder with per-task instruction files. Any AI agent reads the context file first, then executes the relevant prompt script by name. Converts a monolithic template into a modular, agent-addressable system.

Steal for any boilerplate or template product sold to developers
§ · Quotables

Lines you could clip.

03:21
"The beauty about this dashboard, it also already have the ready to use prompt."
One sentence that explains the entire value proposition of the template → TikTok hook
05:29
"And with one prompt, now we just have unblocked."
Clean before/after payoff line — eight apps gone, one remains → IG reel cold open
§ · Resources Mentioned

Things they pointed at.

§ · CTA Breakdown

How they asked for the click.

08:38 next-video
"Thank you so much for watching. See you on another video."

Soft verbal close only. No subscribe prompt, no link card, no pinned comment mentioned.

§ 04 · The Script

Word for word.

HOOK opening / re-engagementCTA the pitch
00:00HOOKHello everyone. So in this video, I want to show you this admin dashboard from the SATCN space. If you want to build an admin dashboard for your SaaS application,
00:10AI application, Block CMS, ecommerce app, or basically any modern web application, you can definitely use this dashboard. The UI look really beautiful and modern, so let's take a look at some demos of the dashboard.
00:25As you can see, there's a main version, dark version, horizontal, RTL, and mini sidebar version.
00:32Let's take a look at this main version. As you can see, right, the UI is look really clean. As you can see the animation here, it is basically using motion.
00:41Really nice. If you take a look on the top in here, there's also light mode and dark mode support by default and also multi language. Alright.
00:49It support by default as well. Chart in here, then the message. Right?
00:53The inbox. Pretty cool. Let's take a look The ecommerce, CRM dashboard, the AI stuff.
00:58If you want to build, for example, chat application, you can use this template in here. Right?
01:04It already have the history chat. Pretty nice. Also, you can select any model in here if you want.
01:10Right? Everything is just already out of the box. For example, you want to build like AI image generator, you can also do that in here using this template.
01:19Also, the calendar if you want to build like a calendar event in here. As you can see, if I click this, it basically will adding event. Really cool.
01:26The tab in here, the email, the notes application, if you want to build a notes application, the contact, the invoice, that's a lot of template, guys. If they click a block, for example, right, the blog post,
01:38HOOKthe blog detail, right, blog edit. So maybe in this video, we are going to try to using these template to create a blog application.
01:48HOOKThat's really nice. Let's take a look at the blog create in here. Right?
01:51HOOKWe can upload the image and etcetera. So So let's take a look at ecommerce stuff, the shop in here, the detail, at least checkout, everything it just works. Let's take a look at Kanban, right, the tea cat, etcetera.
02:03It just works guys. That's a lot of template. I'm not gonna show you all of this, but anyway let's scroll down until we find the authentication.
02:11So also we can use the login for example, the login template, the sign up, and etcetera. And also there is a couple pages for example, account setting, FIQ, pricing, this API key if you want to build application that can basically generate epic API key, you can use these pages in here.
02:29Alright. That's it for the preview. So let's now try to download this template.
02:34I'm gonna click download. This is the zip file after you download the dashboard. The size is a 136
02:40megabyte. So let's try to open that. I'm going to extract that first.
02:43As you can see, we have two folder in here like a docs and also package. So inside a package, have the darks. This is basically dashboard for the dark version, horizontal version, main version, mini sidebar, next out, and RTL, and starter kit.
02:58So basically what we are going to use is the main version, so let's try to open this on the Versus code. Let's just drag and drop this main folder inside of Versus code. So for this video I'm gonna use open Code.
03:10So OpenCode is basically open source AI agent that help you write code in your terminal. So I'm gonna use that. I already installed it so I can run it like OpenCode and hit enter.
03:21The beauty about this dashboard, it also already have the ready to use prompt. So basically, we can use this prompt to, for example, remove the other app that we don't need. Right?
03:31For example, you want to build like a blog application, you can use this prompt to isolate or remove any app that you don't need. For example, it basically will remove the calendar, chat AI, contact ecommerce,
03:43and any other application. So let me show you in here. For example, after you running like a prompt, for example, I want to use this template dashboard
03:52for blog application. Please read the agent. Md.
03:57So what is the agent. Md file? So this is basically complete AI instructions.
04:02So for example, you want to use this template for blog application, so the AI will automatically read the prompt folders and looking for the app folders and inside that there is a isolate app prompt dot m d.
04:16So the AI will automatically read this instruction and try to remove the another app that don't need in this case. For example, it can basically remove the calendar, chat AI, and whatever. Right?
04:28It's basically just remove all of that automatically. And, also, if you want to rebranding the application, the AI will automatically
04:36looking for the branding folder, go to this update branding.prompt.md. So let's try to hit enter. Right?
04:43So anyway, the AI don't really know what I want, so I just asking that again to please remove other apps and keep the block refer to the agent.md. And now the AI is already read this isolate a dot md file and already create this to do list as you can see in here, and now hopefully this is done. Alright.
05:02So the installation is complete. As you can see, this is the action and this is the block route that available right now, and you can open another terminal and just running p n p m dev and as you can see on localhost 2,000 on here on the apps, now we just have unblocked.
05:17Right? Pretty cool. Before that, basically, we have like AI,
05:22calendar, chat, and email, notes, and a lot of things. And with one prompt, now we just have unblocked.
05:29Pretty cool. So anyway, I just asking the AI to rebranding this dashboard use dev block for the name, refer the agent.md, and please remove another pages that we don't need for this block application.
05:42Because I'm on the plan mode, of course, I get some question from the AI like the logo file. I'm going to keep the logo file, and for the company name, I'm gonna use dev blog theme. And for the third question, default page should slash redirect to slash app slash blog slash post.
05:58I'm gonna say just redirect. So now I'm going to hit enter on the build plan, so let's just wait until the AI done. As you can see, this is the result.
06:06We just haven't blocked in here with a blog post, the manage block in here, we can search by category, we can search in here for example apple, and it is works. Right?
06:18Nice. We can toggle this one, I believe. Yes.
06:20It is working, and also the added block for example, it also works. So anyway, all the UI is works for now.
06:28Right? So what we have to do now is we are going to try to create the database. I'm only using Prisma and my PostgreSQL
06:35local, and I'm going to run really simple prompt. Let's say use Prisma and PostgreSQL local for the database. So I'm gonna hit enter.
06:42Alright. So the Prisma is already installed and configure with the PostgreSQL database on my local. So now let's try to open another terminal and I'm gonna say npx prisma generate,
06:53then I'm gonna running npx prisma db push. Then now let's try to running npx prisma studio to just make sure this is working. So let's take a look on the browser and as you can see it works.
07:02We have the category, comment, post, tag, and also the user. Really cool. So now what we have to do is asking the AI to integrate this Prisma with the front end stuff.
07:13My prompt is really simple. I just wanna say integrate the back end with the front end. Let's try to hit enter.
07:19Alright. Finally, it's done. So let's take a look at the project
07:22and as you can see by default we have like a one two three four five blog post and then on the blog post in here of course we just have four because the one in here is unpublished. Right. So now let's try to create a new post.
07:36I'm gonna click the new post in here and try to create a new title. I just want to copy and paste the title and also for the content in here, right, just add some enter in here. So for the cover, I just wanna use maybe this one and then for the blog status, I'm gonna say publish
07:54category like a let's say businesses or whatever, then the publish date I just wanna say now and click publish.
08:02Then as you can see this is the post right it's already on this table. Let's go to blog post and as you can see, this is the cart. So I'm gonna click that and here we go.
08:11Right? Everything is just render the businesses,
08:14the title of the post, and the description. For example, I just want to a comment in here. I'm not sure if this is work or not, so let's try to click task
08:23and yep. It is works. So I think that's it guys for this video.
08:27CTAYou always can adding like a authentication. For example, user must be a login in order to adding a comment on your post. You can always do that.
08:34CTAThank So you so much for watching. See you on another video.
— full transcript
§ 05 · For Joe

The template is the scaffold; the prompts folder is the power tool.

WHAT TO LEARN

An AI agent is only as fast as the context it is given upfront — templates that ship their own AGENTS.md remove that bottleneck entirely.

  • Context files like AGENTS.md do more work than the prompt itself — when the agent already knows the folder structure, tech stack, and available scripts, a one-line instruction executes cleanly.
  • Bundling per-task prompt scripts inside a template turns a one-time purchase into a reusable AI-accelerated workflow for every new project that starts from that base.
  • Isolating a single module from a multi-app template via AI is faster and safer than manually deleting files — the agent traces dependencies and removes routes, nav entries, and imports together.
  • Prisma's schema-first approach means database setup, migration, and a visual table browser can all be triggered by the AI in a single session without the developer writing any SQL.
  • Deferring auth to the end is a valid MVP strategy — ship the core feature loop first, confirm it works end-to-end, then layer on access control as a follow-on session.
§ 06 · Frame Gallery

Visual moments.