╔════════════════════════════════════════════════════════════════════════╗
║ ██████╗ ██╗ ██╗ █████╗ ██████╗██╗ ██╗ ██████╗ ██╗ ██╗ █████╗ ██████╗ ██████╗ ║
║ ██╔═══██╗██║ ██║██╔══██╗██╔════╝██║ ██╔╝██╔════╝ ██║ ██║██╔══██╗██╔══██╗██╔══██╗ ║
║ ██║ ██║██║ ██║███████║██║ █████╔╝ ██║ ███╗██║ ██║███████║██████╔╝██║ ██║ ║
║ ██║▄▄ ██║██║ ██║██╔══██║██║ ██╔═██╗ ██║ ██║██║ ██║██╔══██║██╔══██╗██║ ██║ ║
║ ╚██████╔╝╚██████╔╝██║ ██║╚██████╗██║ ██╗╚██████╔╝╚██████╔╝██║ ██║██║ ██║██████╔╝ ║
║ ╚══▀▀═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ║
║ ║
║ 🌐 Multi-Agent Moderation Framework MVP ║
║ ⚡ React + TypeScript Demo ⚡ ║
╚════════════════════════════════════════════════════════════════════════════════════════╝
QuackGuard is an MVP prototype demonstrating a multi-agent moderation framework built with React and TypeScript. This interactive demo showcases how intelligent agents can collaborate in sequence to maintain digital community standards through configurable rules and transparent decision-making.
🎯 MVP Goal: Demonstrate agent collaboration through a simulated chat environment with Moderator Agent and Verifier Agent working in sequence.
🎯 Core Directive: Build unstoppable, transparent, and democratically governed content moderation through agent swarms.
- Classification: Tier-1 Detection Unit
- Directive: Real-time threat scanning and initial flagging
- Response Time: <100ms
- Precision Mode: Pattern recognition via heuristic algorithms
- Classification: Tier-2 Validation Unit
- Directive: Secondary confirmation and action execution
- Response Time: 2-3s verification delay
- Authority Level: Content removal authorization
- Governance Layer: On-chain DAO arbitration
- Stake Requirement: 50 $DUCK tokens
- Consensus Model: Decentralized community voting
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 🔍 MODERATOR │───▶│ ✅ VERIFIER │───▶│ 🏛️ DAO APPEAL │
│ │ │ │ │ │
│ • Flag Detection│ │ • Confirmation │ │ • Token Staking │
│ • Rule Engine │ │ • Final Action │ │ • Voting System │
│ • Real-time │ │ • State Update │ │ • Override Auth │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
▼ ▼ ▼
⚡ INSTANT FLAG 🛡️ VERIFIED REMOVAL 📡 CHAIN STATE
- Frontend: React 19.1.1 + TypeScript 5.8.3 via Vite 7.1.2
- Styling: TailwindCSS 4.1.12 + PostCSS + Autoprefixer
- State Management: React hooks (useState, useEffect, useCallback)
- Blockchain Integration: Custom DuckChain hooks and utilities
- Type Safety: Full TypeScript with interfaces for all models
- Linting: ESLint 9.33.0 + TypeScript ESLint
- Node.js v18+
- Modern web browser
- Basic knowledge of React/TypeScript
# Clone the repository
git clone <repository-url>
cd quack-shield-app
# Install dependencies
npm install
# Start development server
npm run dev# Launch QuackGuard Demo
http://localhost:5173
# Run tests
npm run test
# Build for production
npm run buildSee also: DEMO_SCRIPT.md for a 4‑minute speaking script.
Configure your agent swarm with precision controls:
- Agent Activation Switches: Toggle Moderator/Verifier units
- Rule Matrix: Malicious link detection, toxicity scanning, spam filtering
- Live Status: Real-time agent health monitoring
Watch the agents work in real-time:
- Normal State: Standard message flow ⚪
- Flagged State: Moderator detection active
⚠️ - Verified State: Verifier confirmation complete ❌
- Appeal State: DAO arbitration pending 📊
Decentralized governance in action:
- Stake tokens to challenge agent decisions
- Community-driven oversight mechanism
- Transparent voting process
# Unit testing for agent logic
npm run test
# Smoke test full agent lifecycle
npm run test:integration- Malicious Link Detection: Watch agents flag suspicious URLs
- Toxicity Filtering: Observe language pattern recognition
- Appeal Process: Experience democratic override mechanism
🟡 DuckChain Testnet: SIMULATED
⚡ Agent Swarm: 2/2 DEMO ACTIVE (Moderator + Verifier)
📡 DAO Governance: SIMULATED
🛡️ Security Level: PROTOTYPE
Note: This is an MVP prototype with simulated blockchain interactions for demonstration purposes.
QuackGuard MVP is designed as a foundation for future expansion:
- 🧠 Neural Networks: Integration with advanced ML moderation models
- 🔗 Cross-Chain Compatibility: Multi-blockchain agent deployment
- 🤝 Agent Marketplace: Pluggable third-party agent extensions
- 🌍 Real Blockchain Integration: Actual on-chain governance and appeals
- ⚖️ Advanced Rules Engine: More sophisticated content detection algorithms
QuackGuard welcomes community contributions to improve the multi-agent framework:
- Fork the repository
- Create feature branches for new agent types or UI improvements
- Submit pull requests with clear documentation
- Follow TypeScript and React best practices
- Add tests for new functionality
Project: QuackGuard MVP
Version: MVP-2025.09.01
Tech Stack: React 19.1.1 + TypeScript 5.8.3 + Vite 7.1.2 + TailwindCSS 4.1.12
Agent Types: Moderator Agent + Verifier Agent
Blockchain: DuckChain Integration with Wallet Support
Components: ConfigurationPanel, ChatFeed, ChatMessage, Modal, DuckChain Hooks
Status: Interactive Demo with Full Implementation
This MVP prototype operates with the following characteristics:
- Simulated Environment: All blockchain interactions are mocked for demonstration
- In-Memory State: No persistent data storage, resets on page refresh
- Agent Logic: "Wizard of Oz" approach with predefined rules and delays
- Educational Purpose: Designed to demonstrate multi-agent collaboration concepts
- Open Source: All code is transparent and auditable
QuackGuard demonstrates the potential of multi-agent moderation frameworks through an interactive prototype. Built as part of a bounty submission, this MVP showcases agent collaboration, configurable rules, and democratic governance concepts in a simulated Web3 environment.
Built with 🦆 for the future of decentralized moderation
"Demonstrating Multi-Agent Collaboration"
⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡
END DEMO // QUACKGUARD MVP READY FOR TESTING
⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡🦆⚡
- Integration Plan: DAT_INTEGRATION_PLAN.md
- Resources: LazAI Quick Start — Data Contribution Workflow