Qwen-Agents/README.md
2025-09-25 02:27:29 -06:00

6.8 KiB

Next.js AI Agent Development Team

Welcome to the AI Agent Development Team repository. This project provides a structured framework for building full-stack Next.js applications using a team of specialized AI agents, led by a master orchestrator named QWEN.

This system is designed to transform a high-level project idea into a complete, production-ready application through a methodical, plan-driven, and interactive process.

Meet the Team

The team consists of one orchestrator and several specialist agents, each with a distinct role.

Icon Agent Name Role & Responsibilities
🏛️ QWEN Project Architect & Orchestrator. Analyzes requirements, designs the architecture and data schema, and creates a sequential execution plan. It delegates all implementation tasks to the specialists.
🗃️ Supabase-Engineer Backend & Database Specialist. Handles all database schema implementation, authentication, Row Level Security (RLS) policies, and file storage logic using Supabase.
💻 Nextjs-Developer Core Frontend Specialist. Implements frontend logic, state management, and form handling with Server Actions. Connects the UI to the backend services.
🎨 Component-Builder-Assistant UI Specialist. Creates pure, reusable, and logic-less shadcn/ui components based on design specifications from the orchestrator.
💳 Payment-Integration-Specialist Payments Specialist. Implements all Stripe payment flows, subscription logic, pricing tables, and secure webhook handling.
📊 Dashboard-Master Data Visualization Specialist. Builds complex data tables, charts, and interactive dashboards using TanStack Table and Recharts.
Animation-Assistant Motion Specialist. Implements UI animations, transitions, and micro-interactions using Framer Motion to enhance the user experience.
📡 Nextjs-Realtime-Developer Real-time Specialist. Implements real-time features using WebSockets or Server-Sent Events (SSE) for chat, notifications, and live updates.

The Development Workflow

The entire development process is managed by QWEN and follows a strict, interactive workflow. This ensures that a solid plan is in place before any code is written.

Workflow Diagram

graph TD
    A[Start: User has Project Idea] --> B{Interact with QWEN};
    B --> C[/plan command];
    C --> D[QWEN asks clarifying questions];
    D --> E[QWEN generates full Execution Plan <br/>(Architecture, Schema, Task List)];
    E --> F{Plan Refinement <br/>(Advanced Elicitation)};
    F -- Revise --> E;
    F -- Approve --> G;
    G[/start command] --> H[QWEN delegates Task 1<br/>to a Specialist Agent];
    H --> I[Specialist generates output (code, etc.)];
    I --> J{User provides output back to QWEN};
    J --> K{All tasks complete?};
    K -- No --> H_Next[QWEN delegates next Task];
    H_Next --> I;
    K -- Yes --> L[End: Project Complete];

    subgraph "Phase 1: Planning"
        direction LR
        A; B; C; D;
    end

    subgraph "Phase 2: Refinement"
        direction LR
        E; F;
    end

    subgraph "Phase 3: Execution"
        direction TB
        G; H; I; J; K; L; H_Next;
    end

Usage Guide

This guide is broken into two parts: first, understanding the conceptual process, and second, the practical commands for implementing it.

1. The Conceptual Workflow

The entire project lifecycle is a structured conversation with the QWEN orchestrator.

Phase 1: Planning & Architecture (/plan)

  1. Start a conversation with the QWEN agent and provide a high-level project goal.
  2. Issue the /plan command.
  3. QWEN enters an interactive loop, asking probing questions to fully understand the requirements and resolve all ambiguities.
  4. Once all information is gathered, QWEN generates a complete Execution Plan, which includes the system architecture, the full database schema, and a sequential list of tasks with detailed prompts for the specialist agents.

Phase 2: Plan Refinement (Advanced Elicitation)

  1. After presenting the plan, QWEN immediately stops and offers a numbered list of "elicitation" options.
  2. This allows you to challenge, critique, and refine the plan from various angles (e.g., "Stress-test the data schema," "Critique the tech stack").
  3. This collaborative loop continues until you are fully satisfied with the blueprint and approve it for execution.

Phase 3: Execution & Delegation (/start)

  1. Issue the /start command to begin development.
  2. QWEN delegates Task 1 by providing the exact prompt for the appropriate specialist.
  3. Take that prompt to the specified specialist agent (in a new chat session) to get the implementation code.
  4. Bring the specialist's output back to QWEN.
  5. QWEN acknowledges completion and delegates the next task in the sequence. This cycle repeats until the project is finished.

2. Practical Implementation with Qwen-CLI

The conceptual workflow described above is put into practice using qwen-cli.

  1. Start with the Orchestrator: To begin the planning phase, launch the orchestrator:
    qwen-cli --agent QWEN.md
    
  2. Follow the Workflow: Engage with QWEN using the /plan and /start commands as described above.
  3. Delegate to Specialists: When QWEN provides a task prompt for a specialist (e.g., Supabase-Engineer), open a new terminal window and run the specialist agent:
    # Example for the Supabase specialist
    qwen-cli --agent Supabase-Engineer.md
    
  4. Return and Continue: Paste the task prompt from QWEN into the specialist's CLI session. Once you receive the output, copy it and paste it back into the QWEN session to proceed to the next task.

Following this structured process and using separate terminal sessions for each agent will yield the best results.

Agent Prompt Files

This repository contains the master prompts for each agent:

  • QWEN.md
  • Component-Builder-Assistant.md
  • Dashboard-Master.md
  • Animation-Assistant.md
  • Nextjs-Developer.md
  • Nextjs-Realtime-Developer.md
  • Payment-Integration-Specialist.md
  • Supabase-Engineer.md

Contributing

Contributions are welcome! To add a new agent:

  1. Create a new markdown file following the existing pattern.
  2. Include the YAML frontmatter with name, description, and color.
  3. Add a detailed description of the agent's responsibilities and specialties.
  4. Include technology stack focus and implementation rules.
  5. Submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.