Modul praktis Level 2 VibeKoding: Proyek: Platform Agen AI Kustom Mirip Dify.Modul praktis Level 2 VibeKoding: Proyek: Platform Agen AI Kustom Mirip Dify.
This project requires you to build an agent platform that replicates the core Dify experience, based on a real PRD. You'll build a user console, admin dashboard, and platform backend, implementing core features like agent management, conversations, logging, and knowledge base.This project requires you to build an agent platform that replicates the core Dify experience, based on a real PRD. You'll build a user console, admin dashboard, and platform backend, implementing core features like agent management, conversations, logging, and knowledge base.
This is the comprehensive practical section of Stage 2. Unlike previous single-page or single-feature projects, this one requires building a "platform-like" AI product — with multiple roles, multiple modules, data persistence, and model call pipelines.This is the comprehensive practical section of Stage 2. Unlike previous single-page or single-feature projects, this one requires building a "platform-like" AI product — with multiple roles, multiple modules, data persistence, and model call pipelines.
Before starting this project, you should already be familiar with:Before starting this project, you should already be familiar with:
After completing this project, you will be able to:After completing this project, you will be able to:
You will build a Dify-like agent platform with two subsystems:You will build a Dify-like agent platform with two subsystems:
| Subsystem | Responsibility |
|---|---|
| User Console | Create agents, configure prompts, start conversations, view logs, manage knowledge base |
| Admin Dashboard | View user data, platform resource usage, API call statistics |
The backend needs to support: agent management, session management, message storage, model calls, call logging, and knowledge base integration.The backend needs to support: agent management, session management, message storage, model calls, call logging, and knowledge base integration.
The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/custom-dify-agent-platform/PRD.md)The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/custom-dify-agent-platform/PRD.md)
{ title: 'Scaffold', description: 'Use AI to generate user console and admin dashboard skeletons' },{ title: 'Scaffold', description: 'Use AI to generate user console and admin dashboard skeletons' }, { title: 'Iterate', description: 'Add agents, conversations, logs, and knowledge base module by module' },{ title: 'Iterate', description: 'Add agents, conversations, logs, and knowledge base module by module' }, { title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' }{ title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' } ]" />]" />
Open the PRD document and answer these key questions:Open the PRD document and answer these key questions:
If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.
Map out the overall architecture based on the PRD:Map out the overall architecture based on the PRD:
mermaid flowchart TD prd["PRD"] --> app["User Console"] prd --> admin["Admin Dashboard"] app --> auth["Auth"] app --> agent["Agent Configuration"] app --> chat["Conversation"] chat --> llm["Model Call"] chat --> db["Database"] app --> kb["Knowledge Base"] admin --> logs["Call Logs & Platform Overview"] logs --> db
Prompt reference:Prompt reference:
text Based on the current PRD, help me generate a frontend scaffold for a Dify-like agent platform. Requirements: 1. User side: login, agent list, agent configuration, conversation page, logs page, knowledge base page 2. Admin side: dashboard homepage, user overview, resource usage overview 3. Only generate page structure with mock data first, no real API integration 4. Style should look like a modern AI platform
Check each item:Check each item:
On top of the scaffold, add features module by module in this order:On top of the scaffold, add features module by module in this order:
After each module, use this self-check table:After each module, use this self-check table:
| Check Item | Verification Method |
|---|---|
| Page consistency | Do page count and features match the PRD? |
| API completeness | Are agents, chat, logs, knowledge APIs complete? |
| Auth isolation | Can users only manage their own agents and sessions? |
| Data consistency | Do messages, logs, and documents data align? |
| Demo readiness | Can you demo "create agent → chat → view logs" end-to-end? |
If you want to add knowledge base capabilities, add a "knowledge base toggle" for each agent:If you want to add knowledge base capabilities, add a "knowledge base toggle" for each agent:
For the first version, don't aim for complex RAG — just ensure "retrieval results are visible and the call chain is explainable."For the first version, don't aim for complex RAG — just ensure "retrieval results are visible and the call chain is explainable."
At minimum, verify these scenarios:At minimum, verify these scenarios:
Pre-deployment checklist:Pre-deployment checklist:
Deploy the project to a public environment. For deployment instructions, see: [Git & GitHub Workflow](../../backend/git-workflow/), [Web App Deployment](../../backend/zeabur-deployment/).Deploy the project to a public environment. For deployment instructions, see: [Git & GitHub Workflow](../../backend/git-workflow/), [Web App Deployment](../../backend/zeabur-deployment/).
After completing this project, submit the following:After completing this project, submit the following:
README should include at minimum: project overview, architecture description, tech stack, local setup steps, environment variable list, and API documentation.README should include at minimum: project overview, architecture description, tech stack, local setup steps, environment variable list, and API documentation.
| Dimension | Basic Requirements | Advanced Requirements |
|---|---|---|
| Platform Completeness | agents / chat / logs pages are functional | Has clear navigation and unified design language |
| Business Loop | Can create agents and have real conversations | Supports multi-agent switching and session history |
| Data & Tracking | Messages and call logs are queryable | Has token / latency statistics dashboard |
| Auth & Security | Only logged-in users can access core APIs | Resource ownership verification is robust |
| Engineering Delivery | Deployable, demoable, clear README | Knowledge base integrated with explainable retrieval |