Modern Creator
Cand Dev · YouTube

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
1 weeks ago
Duration
Format
Tutorial
educational
Views
453
18 likes
Big Idea

The argument in one line.

When a template ships its own AGENTS.md context file alongside ready-made prompt scripts, an AI coding agent can strip, rebrand, and scaffold a production module in minutes with no manual file editing required.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A developer building a SaaS, CMS, or internal tool who wants a production-quality admin UI without starting from scratch.
  • Someone already comfortable with Next.js, Tailwind, and Prisma who wants to see how an AI agent accelerates the stripping and scaffolding phase.
  • A freelancer who wants to demo a client-ready dashboard quickly before investing in custom design.
SKIP IF…
  • You need a free starting point — this template costs money (20% off code in the description).
  • You want to understand how shadcn/ui or Prisma works under the hood — the video deliberately avoids that layer.
  • You are using a different stack (Vue, SvelteKit, Laravel, etc.) — everything shown is Next.js App Router only.
TL;DR

The full version, fast.

ShadcnSpace is a paid Next.js admin dashboard with five layout variants and a dozen built-in apps. The template bundles an AGENTS.md and a prompts folder so an AI agent knows the codebase before you type a single word. The presenter uses OpenCode to run three prompts — isolate blog, rebrand, wire Prisma — and ends with a fully functional blog CMS backed by a local PostgreSQL database, created without editing a source file by hand.

Members feature

Chat with this breakdown.

Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.

Create a free account →
Chapters

Where the time goes.

00:0002: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:0103: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:2605: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:0906:36

04 · AI rebranding

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

06:3607:06

05 · Prisma + PostgreSQL setup

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

07:0608: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.

Atomic Insights

Lines worth screenshotting.

  • A template that ships its own AGENTS.md gives an AI agent enough codebase context to operate without exploratory back-and-forth.
  • One prompt can delete eight unneeded apps and leave exactly the module you want if the template prompts folder was designed for it.
  • OpenCode is a free open-source alternative to Cursor that runs in the terminal and reads the same AGENTS.md format.
  • Prisma plus local PostgreSQL can be fully installed, configured, and connected to a Next.js front end in a single natural-language instruction.
  • The fastest path to a working blog CMS in 2026 is not writing code but choosing a template that already anticipated the AI-agent workflow.
  • A 136 MB template zip is not bloat if the prompts folder ships a surgical removal script for every included module.
  • The blog module ships with CRUD, category filtering, draft and publish status, cover images, and comments out of the box with zero custom code in this demo.
  • Auth is always the deferred step — every AI-accelerated demo ends with you can always add authentication as the next exercise.
Takeaway

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.
Glossary

Terms worth knowing.

ShadcnSpace
A paid Next.js admin dashboard template built on shadcn/ui and Tailwind CSS, sold with five layout variants and a dozen pre-built application modules.
OpenCode
An open-source AI coding agent that runs in the terminal, reads AGENTS.md for codebase context, and executes multi-step code changes through natural-language prompts.
AGENTS.md
A markdown file placed at the project root that describes the codebase structure, tech stack, and available prompt scripts so an AI agent can operate without exploring the repo from scratch.
isolate-app.prompt.md
A pre-written AI instruction file inside the template prompts folder that tells the agent how to remove all application modules except a specified one.
Prisma
A Node.js ORM that lets developers define database schemas in a typed schema file and generate SQL migrations without writing raw SQL.
Prisma Studio
A browser-based GUI bundled with Prisma that displays database tables and rows, used here to verify the schema was pushed correctly before wiring the front end.
App Router
The file-system routing model introduced in Next.js 13 that colocates server components, layouts, and API handlers inside an app directory.
Resources Mentioned

Things they pointed at.

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 templateTikTok hook↗ Tweet quote
05:29
And with one prompt, now we just have unblocked.
Clean before/after payoff line — eight apps gone, one remainsIG reel cold open↗ Tweet quote
The Script

Word for word.

00:00Hello 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, AI application, Block CMS, ecommerce app, or basically any modern web application, you can definitely use this dashboard.
00:19The UI look really beautiful and modern, so let's take a look at some demos of the dashboard. As 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, the blog detail, right, blog edit.
01:41So maybe in this video, we are going to try to using these template to create a blog application. That's really nice.
01:49Let's take a look at the blog create in here. Right? We can upload the image and etcetera.
01:54So 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. It just works guys.
02:04That'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. So also we can use the login for example, the login template, the sign up, and etcetera.
02:17And 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. Alright.
02:29That's it for the preview. So let's now try to download this template. I'm gonna click download.
02:35This is the zip file after you download the dashboard. The size is a 136 megabyte.
02:40So let's try to open that. I'm going to extract that first. As you can see, we have two folder in here like a docs and also package.
02:48So 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. So basically what we are going to use is the main version, so let's try to open this on the Versus code.
03:05Let's just drag and drop this main folder inside of Versus code. So for this video I'm gonna use open Code. So OpenCode is basically open source AI agent that help you write code in your terminal.
03:16So I'm gonna use that. I already installed it so I can run it like OpenCode and hit enter. The beauty about this dashboard, it also already have the ready to use prompt.
03:26So basically, we can use this prompt to, for example, remove the other app that we don't need. Right? For 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.
03:38For example, it basically will remove the calendar, chat AI, contact ecommerce, and any other application. So let me show you in here.
03:46For example, after you running like a prompt, for example, I want to use this template dashboard for blog application. Please read the agent.
03:57Md. So what is the agent. Md file?
03:59So this is basically complete AI instructions. So 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 looking for the branding folder, go to this update branding.prompt.md.
04:41So let's try to hit enter. Right? So 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.
04:52And 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. So the installation is complete.
05:03As 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. Right?
05:18Pretty cool. Before that, basically, we have like AI, calendar, chat, and email, notes, and a lot of things.
05:26And with one prompt, now we just have unblocked. Pretty 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 local, and I'm going to run really simple prompt.
06:38Let's say use Prisma and PostgreSQL local for the database. So I'm gonna hit enter. Alright.
06:43So 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, then I'm gonna running npx prisma db push.
06:56Then 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. We have the category, comment, post, tag, and also the user.
07:06Really cool. So now what we have to do is asking the AI to integrate this Prisma with the front end stuff. My prompt is really simple.
07:14I just wanna say integrate the back end with the front end. Let's try to hit enter. Alright.
07:20Finally, it's done. So let's take a look at the project and 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.
07:34Right. So now let's try to create a new post. I'm gonna click the new post in here and try to create a new title.
07:41I 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 category 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, the title of the post, and the description.
08:17For 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 and yep.
08:24It is works. So I think that's it guys for this video. You always can adding like a authentication.
08:29For example, user must be a login in order to adding a comment on your post. You can always do that. Thank So you so much for watching.
08:36See you on another video.
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.

Frameworks

Named ideas worth stealing.

03:46model

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 forany boilerplate or template product sold to developers
CTA Breakdown

How they asked for the click.

08:38next-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.

Storyboard

Visual structure at a glance.

template homepage
hooktemplate homepage00:00
layout variants grid
promiselayout variants grid00:34
VS Code open
setupVS Code open03:05
OpenCode terminal
valueOpenCode terminal03:27
AGENTS.md and prompts folder
valueAGENTS.md and prompts folder04:08
blog-only routes result
valueblog-only routes result05:05
rebranded dashboard demos
valuerebranded dashboard demos06:02
blog edit UI
valueblog edit UI06:36
blog post list live
valueblog post list live07:29
post detail with comments working
ctapost detail with comments working08:34
Frame Gallery

Visual moments.

Watch next

More from this channel + related breakdowns.

08:55
Ras Mic · Listicle

Build polished web apps using these UI libraries

Ras Mic tours four component libraries — Kokonut UI, Style UI, Cult UI, and Motion Primitives — demoing standout components live in the browser, with a bonus pit-stop at promptkit.com for AI-specific building blocks.

December 1st 2025