Overview

.gitignore README.md src/app/builder/page.tsx src/app/icon.svg src/app/layout.tsx src/app/page.tsx Avalanche AI Flow Builder (flava) is a visual, node-based development environment for authoring, auditing, and deploying Avalanche smart contracts. It bridges the gap between natural language descriptions and production-ready Solidity code by providing a deterministic canvas governed by a non-AI compiler, supplemented by an AI-powered assistant for iterative prototyping README.md #3-13

The system is designed for developers who want the speed of AI-assisted generation with the safety and transparency of a visual programming interface. Unlike "black-box" code generators, every change proposed by the AI is reflected as a discrete node or edge on the canvas, which can then be manually refined or verified README.md #65-67

System Architecture The application is structured into three primary horizontal zones: the Node Palette, the Main Workspace (Canvas/Code), and the AI Assistant README.md #29-42

Subsystem Interaction Map The following diagram illustrates how user intent flows through the system's code entities.

Sources: README.md #27-90

src/app/page.tsx #31-67

src/lib/flow-store.ts #62-64

Major Subsystems

1. The Visual Canvas The core of the application is a deterministic visual editor built on React Flow. It uses specific node types to represent Solidity constructs like Contract, Variable, Function, and Modifier README.md #6-8

Deterministic Compiler: The canvas does not use AI to generate code. Instead, src/lib/compiler.ts walks the graph to emit standard Solidity README.md #44-53 Validation: Real-time diagnostics check for missing contract roots, invalid connections, or duplicate state variables. 2. AI Assistant (Claude-Powered) The assistant acts as a copilot that communicates via a specific tool-calling protocol.

Canvas Operations: When a user asks for a feature, the assistant calls the propose_canvas_changes tool, which sends a batch of operations (add_node, update_node, etc.) to the useFlowStore README.md #57-61 Context Awareness: The assistant receives a GraphSummary of the current canvas state to ensure its suggestions are contextually relevant README.md #57-58 3. Compilation & Deployment Pipeline The "Code" tab provides a transition from the visual graph to the Ethereum Virtual Machine (EVM).

Server-Side Compilation: Uses a real solc compiler via /api/compile to generate actual ABI and bytecode README.md #76-80 Security Audit: An integrated AI audit tool scans the compiled Solidity for vulnerabilities and gas optimizations README.md #94-95 Wallet Integration: Built on viem, the deployment flow handles constructor arguments and broadcasts transactions directly to the Avalanche Fuji testnet README.md #69-86 4. Code Generation & Export Beyond deployment, the system supports local development workflows.

Hardhat Export: Users can download a full project ZIP containing the contract, deployment scripts, and environment configurations README.md #97-106 Component Relationships The following diagram maps the UI layout to the underlying React components.

Sources: src/app/page.tsx #31-69

src/app/layout.tsx #11-23

Getting Started To begin development, you must configure your environment and install dependencies. The system requires an Anthropic API key for the assistant and audit features.

Clone and Install: npm install README.md #111 Environment: Copy .env.local.example to .env.local and set your ANTHROPIC_API_KEY README.md #112-113 Run: npm run dev and navigate to localhost:3000 README.md #114-115 For detailed setup instructions and a tour of the interface, see Getting Started.

For a deep dive into the UI architecture and mobile responsiveness, see Application Layout and UI Shell.

Sources:

README.md #1-148 src/app/page.tsx #1-69 src/app/layout.tsx #1-23