All projects

mariposa

Visual no-code workflow builder for Chainlink CRE with AI copilot that generates workflows from text

DeFi & Tokenization CRE & AI

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:

  1. Choose your method: drag-and-drop components like legos OR describe what you want to the AI Copilot
  2. AI Copilot generates the workflow visually on the canvas (or build it yourself)
  3. Customize nodes via simple forms (no JSON editing)
  4. Click "Code" → valid CRE TypeScript code
  5. Click "Simulate" → runs via CRE CLI
  6. 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