mariposa
Visual no-code workflow builder for Chainlink CRE with AI copilot that generates workflows from text
What it is
Mariposa is a visual drag-and-drop workflow builder for Chainlink CRE, similar to n8n or Zapier but designed specifically for blockchain automation.
Problem: Building CRE workflows currently requires TypeScript knowledge, understanding the CRE SDK, and manually configuring complex JSON structures. This creates a barrier for non-developers and slows down developers.
Solution: Mariposa provides two ways to build CRE workflows:
Method 1 - Visual Builder (Like Building with Legos):
Drag-and-drop components from the library onto the canvas, connect them together, and configure each node using simple forms. No code required — just pick your pieces and snap them together.
Method 2 - AI Copilot:
Describe what you want in plain English, and the AI generates the complete workflow on the canvas. Users can then customize any node visually.
Features:
- Visual canvas with 22+ CRE components (triggers, capabilities, logic, contracts)
- AI Copilot powered by Claude that generates workflows from natural language
- Automatic CRE TypeScript code generation from visual workflows
- One-click simulation and deployment via CRE CLI
How it works:
- Choose your method: drag-and-drop components like legos OR describe what you want to the AI Copilot
- AI Copilot generates the workflow visually on the canvas (or build it yourself)
- Customize nodes via simple forms (no JSON editing)
- Click "Code" → valid CRE TypeScript code
- Click "Simulate" → runs via CRE CLI
- Click "Deploy" → deploy CRE pipeline
Mariposa makes CRE accessible to everyone while saving developers significant time.
How it Works
Mariposa is a full-stack application built from scratch, combining modern web technologies with AI and blockchain infrastructure.
Frontend (React-Based Visual Builder):
- Next.js 14 + React 18 for a fast, responsive interface
- ReactFlow powering an advanced drag-and-drop canvas with real-time node connections
- Zustand for complex state management across canvas, workflows, and AI interactions
- Monaco Editor (VS Code's editor) for syntax-highlighted code display
- Tailwind CSS with custom dark theme optimized for developer experience
Backend (Scalable API Architecture):
- Express.js REST API with modular controller architecture
- MongoDB for persistent workflow storage and versioning
- Redis + BullMQ for async job processing and simulation queues
- WebSocket support for real-time canvas updates
AI Copilot (Custom LLM Integration):
- Together AI API with advanced prompt engineering
- Built a comprehensive system prompt containing the entire CRE component registry (22 node types with full config schemas)
- Designed 5 custom AI tools (add_node, update_node, delete_node, add_edge, delete_edge) that translate AI decisions directly into canvas actions
- Intelligent context awareness — AI reads current canvas state and makes smart modifications
- Natural language to visual workflow in seconds
CRE Integration (Deep Chainlink SDK Knowledge):
- Full CRE CLI integration for simulation and deployment
- Built a custom TypeScript code generator that transforms visual workflows into valid CRE code
- viem integration for blockchain interactions
- Multi-chain support: Ethereum, Arbitrum, Base, Avalanche, Polygon (testnets + mainnets)
Component Library (22 Custom Node Types):
Built an entire component system from scratch with 5 categories:
- CRE Triggers: cron-trigger, http-trigger, evm-log-trigger
- CRE Capabilities: http-fetch, evm-read, evm-write, node-mode, secrets-access
- CRE Logic: condition, data-transform, consensus-aggregation, abi-encode, abi-decode
- Solidity Contracts: IReceiver, price-feed-consumer, custom-data-consumer, proof-of-reserve
- Chain Config: chain-selector, contract-address, wallet-signer, rpc-endpoint
Each component includes:
- Custom React configuration forms with validation
- JSON config schemas for dynamic form generation
- Input/output type definitions for edge compatibility
- Auto-generated code snippets for CRE export
Every layer — from the visual canvas to the AI engine to the code generator — was architected to feel seamless, so users focus on their workflow logic, not the underlying complexity.
Links
Created by
- Hatem Azaiez