- Create AGENT_CREATION_GUIDE.md with complete step-by-step instructions - Add agent_template_prototype.html with full CSS framework and JavaScript utilities - Implement Email Writer agent as demonstration of template system - Update CLAUDE.md with agent creation workflow and template guidance - Include Django patterns, form handling, status polling, and marketplace integration - Provide reusable components: wallet card, processing status, quick access panel - Ensure responsive design, accessibility, and consistent user experience 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
8.0 KiB
CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
Project Overview
NetCop Hub is a Django-based AI agent marketplace platform where users can purchase and interact with specialized AI agents. The system supports both webhook-based and API-based agents with integrated payment processing via Stripe.
Development Commands
Environment Setup
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # Linux/Mac
# or
venv\Scripts\activate # Windows
# Install dependencies
pip install -r requirements.txt
Database Operations
# Check database configuration
python manage.py check_db
# Create and apply migrations
python manage.py makemigrations
python manage.py migrate
# Backup user data
python manage.py backup_users --action info
# Populate agent catalog
python manage.py populate_agents
Development Server
# Quick start (recommended - handles migrations and environment)
./run_dev.sh
# Manual start
python manage.py runserver
Testing
# Run specific agent tests
python tests/test_weather_agent.py
python tests/test_five_whys_webhook.py
# Test homepage functionality
python tests/test_homepage.py
Custom Management Commands
# Create new agent
python manage.py create_agent
# Create test user
python manage.py create_user
# Reset database (development only)
python manage.py reset_database
# Test webhook functionality
python manage.py test_webhook
# Cleanup uploaded files
python manage.py cleanup_uploads
Architecture Overview
Agent System Architecture (agent_base/)
Centralized Agent Management:
agent_base/models.py-BaseAgentmodel for marketplace catalogagent_base/processors.py-BaseAgentProcessorabstract class for agent interactionsagent_base/views.py- Marketplace and agent discovery viewsagent_base/urls.py- Agent system URL routingagent_base/generators/- Template generation system for creating new agentstemplates/agent_base/- Marketplace and agent catalog templates
Agent Types:
- Webhook Agents - Process requests via external webhook APIs (e.g., weather_reporter)
- API Agents - Direct API integration for immediate responses
Individual Agent Apps: Each agent is a separate Django app following this structure:
models.py- Agent-specific request/response modelsprocessor.py- Inherits fromBaseAgentProcessor, implements specific logicviews.py- Agent detail page and request handlingtemplates/[agent_name]/detail.html- Agent interfaceurls.py- Agent-specific URL routing
Core System Architecture
Authentication System (authentication/):
- Custom User model with wallet integration
- Password reset functionality with email tokens
- Profile management
Payment System (wallet/):
- Stripe integration for payments
- User balance tracking
- Transaction history
Core App (core/):
- Homepage and platform overview
- Pricing page for non-authenticated users
- Platform-wide functionality only (no business logic)
Agent Base App (agent_base/):
- Agent marketplace and catalog views
- Agent discovery and filtering
- Cross-agent functionality and API endpoints
Wallet App (wallet/):
- Complete payment system with Stripe integration
- Wallet dashboard and transaction history
- Payment processing and webhook handling
URL Structure
/ # Homepage (core app)
/pricing/ # Pricing page (core app)
/marketplace/ # Agent marketplace (agent_base app)
/agents/<slug>/ # Agent detail redirect (agent_base app)
/auth/ # Authentication (login, register, profile)
/wallet/ # Wallet management and top-up (wallet app)
/wallet/stripe/ # Stripe webhooks and debug (wallet app)
/agents/[agent-slug]/ # Individual agent pages (individual apps)
/admin/ # Django admin
/api/agents/ # Agent API endpoint (agent_base app)
Template Architecture
Template Hierarchy:
templates/base.html- Main layout with navigation and authtemplates/components/- Reusable components (agent_header, wallet_card, etc.)templates/core/- Platform pages (homepage, pricing)templates/agent_base/- Agent marketplace and catalogtemplates/wallet/- Payment and wallet managementtemplates/authentication/- User authentication pages- Agent-specific templates in individual app directories
CSS Architecture:
base.css- Global styles and CSS variablesagent-base.css- Agent page stylingheader-component.css- Header styling (replaces deprecated header.css)- Component-specific CSS files
Database Design
Key Models:
BaseAgent- Agent catalog and marketplace dataUser- Extended Django user with wallet functionality- Agent-specific request models (e.g.,
WeatherReportAgentRequest)
Environment Configuration
Required environment variables (see .env.example):
SECRET_KEY- Django secret keyDEBUG- Development mode flag- Stripe keys for payment processing
- Email configuration for password reset
Agent Creation with Template Prototype
Quick Agent Creation:
- Use
agent_template_prototype.htmlas foundation for all new agents - Follow detailed guide in
AGENT_CREATION_GUIDE.md - Template provides complete CSS framework, JavaScript utilities, and UI components
- Ensures consistent user experience across all agents
Development Workflow
-
Adding New Agent:
- Use
python manage.py create_agentcommand - Follow existing agent patterns (inherit from
BaseAgentProcessor) - Convert
agent_template_prototype.htmlto Django template - seeAGENT_CREATION_GUIDE.md - Add URL routing in main
urls.py - Agent will automatically appear in marketplace via
BaseAgentmodel
- Use
-
Template Development:
- ALWAYS use
agent_template_prototype.htmlas starting point - Copy all CSS (lines 8-632) and JavaScript (lines 808-967) from prototype
- Replace placeholder sections with agent-specific content
- Use existing components: wallet card, processing status, quick access panel
- Follow responsive design patterns and accessibility features
- ALWAYS use
-
Agent Template Structure:
templates/agent_name/detail.html: - Copy complete CSS framework from prototype - Replace "Agent Grid Section" with your form - Replace "Results Section" with your results display - Keep "How It Works" widget and all JavaScript utilities - Preserve responsive design and accessibility features -
Database Changes:
- Always run migrations after model changes
- Use
check_dbcommand to verify configuration - Test with
populate_agentsto ensure agent catalog works
Deployment
- Railway.app integration via
railway.json - Production settings in
netcop_hub/production_settings.py - Static files served via WhiteNoise
- Database migrations run automatically on deployment
File Upload Handling
media/uploads/[agent_name]/- User uploaded files- Cleanup command available:
python manage.py cleanup_uploads - Files are processed by individual agent processors
Architecture Principles
Single Responsibility:
core- Platform presentation and static pages onlyagent_base- Agent marketplace, catalog, and cross-agent functionalitywallet- Complete payment system with Stripe integration- Individual agent apps - Specific agent logic and interfaces
URL Namespacing:
- Use
agent_base:marketplacefor marketplace links - Use
wallet:walletfor wallet-related links - Use
core:homepagefor platform homepage - Individual agents have their own URL namespaces
Template Organization:
- Templates are organized by app responsibility
- Use proper URL namespacing in templates
- Marketplace functionality is in
agent_baseapp, notcore
Always run python manage.py check_db before making database-related changes to ensure proper configuration.