How does CADUCE actually edit my code?

We connect to your running dev server via Chrome DevTools Protocol (CDP). When you click an element, we inspect its DOM tree, map it back to the source file+line, extract context (imports, dependencies), and send everything to Claude/Codex which writes the updated code directly to your filesystem. Git-backed undo is automatic.

What frameworks do you support?

ANY framework that serves HTML over HTTP. We've proven it works with Next.js, Remix, Nuxt, SvelteKit, Astro, Vue, React, Svelte, Rails, Django, Laravel, Express, and plain vanilla JS projects. If it runs in a browser, CADUCE can edit it.

Absolutely. Three guarantees: (1) Sandboxed execution - agents run in isolated Docker containers, (2) File access scoped to your project directory only, (3) Never modifies config/gitignore automatically without explicit confirmation. Plus SOC 2 compliance coming Q1 2027.

Can I use my own API keys?

Yes! We believe in bring-your-own-model strategy. Connect your Anthropic/Claude keys, OpenAI/Codex keys, or self-host custom models locally. We never charge token markup—you pay provider rates directly with no middleman fees.

Built on Claude · Works with your own keys

See Everything.
Edit Anything.

The designer's visual development harness — infinite canvas, live editing against your real codebase, and Claude built in, not bolted on. Bring your own subscription or your own keys.

Free in beta

No credit card required

Cancel anytime

Four pillars. One harness.

CADUCE is the only tool a designer needs: a visual editor for your live app, an infinite canvas for exploration, a production shader library, and reusable component kits — enforced by one quality engine.

Visual Editor

Live Dev Server Editing

Point at your running dev server → click any element → describe change in natural language → watch AI write directly to source files instantly.

Zero instrumentation - works with any framework

Chrome DevTools Protocol integration

Multi-agent support (Claude/Codex/OpenCode)

Branch-based changes with git diff visualization

Accept/Reject workflow per-edit or batch-apply

Next.jsVueSvelteRailsDjango

Infinite Canvas

Design Without Implementation Anxiety

Explore ideas freely on an infinite canvas using programmatic controls. Create components, define variables/theming, then export as clean HTML/Tailwind or switch to live editing mode mid-project.

Programmatic control via JavaScript execute calls

Master component → instance relationships

Variables/theming system with light/dark axes

Component detection + reuse patterns

Export pipeline: .pen → HTML/Tailwind/Vanilla CSS

ReactTailwindCSS Variables

Shader Effects Hub

200+ Production WebGPU Effects

No GLSL knowledge required. Visual node editor or drag-and-drop library. Instantly add gradients, noise textures, glass blur, cursor trails, bloom effects into your apps.

Visual node graph editor

Real-time preview on target element

Export code to React/Vue/Svelte

Already optimized for production

Cross-framework compatibility

ReactVueSvelteSolid

Quality Gates

Built on Rudy's Company OS

Anti-slop enforcement prevents hardcoded colors, accessibility violations, performance regressions, and design debt accumulation. Every ship gets the full quality review.

Static lints (no hardcoded colors)

Accessibility check (WCAG AA)

Performance audit (bundle limits)

Consistency review (design tokens)

Mobile responsiveness validation

WCAG AALighthouseESLint

From idea to production in
three simple steps

No complex setup. No learning curve. Just connect, click, and watch your vision come to life instantly.

Dev Server Preview

$ caduce --target http://localhost:3000

Step 1

Connect Your Dev Server

Point CADUCE at your running Next.js/Vite/Rails app. Zero instrumentation needed—we use Chrome DevTools Protocol to inspect real DOM elements.

caduce --target http://localhost:3000

Auto-detects framework and component structure

Deep dive into
professional-grade capabilities

Built by designers, for designers. Every feature engineered to eliminate technical debt while accelerating creative flow.

Component Library & D2C Patterns

Ready-to-use templates for high-converting e-commerce flows

Checkout flows, onboarding wizards, paywalls, upsell carousels, scarcity banners, trust badges—everything high-converting brands use already organized as reusable components. Auto-detect your project's components and extract design tokens automatically.

primitives/ (Button, Input, Card, Modal)
molecules/ (FormField, Navbar, DataTable)
organisms/ (CheckoutFlow, OnboardingWizard, Paywall)
templates/ (LandingPage, SettingsPage, AuthPage)
patterns/ (ConversionGrowthRetention)

import { CheckoutFlow, UpsellCarousel } from '@caduce/patterns'

export default function StorePage() {
  return (
    <main>
      <CheckoutFlow items={cart.items} />
      <UpsellCarousel productId={current.id} />
    </main>
  )
}

Design Token Extraction

Automatic consistency enforcement across your entire codebase

Scan all components for styling patterns, automatically generate design tokens, and maintain consistency across your team. No more hardcoded colors or arbitrary values slipping through.

Color palettes extracted from usage patterns
Spacing scale inferred from layout
Typography scales identified automatically
Border radius and shadow systems detected
Light/dark theme variants supported

// caduce.yml auto-generated
tokens:
  colors:
    primary: #3B82F6
    secondary: #8B5CF6
    neutral:
      50: #F9FAFB
      100: #F3F4F6
  
  spacing: [4, 8, 12, 16, 24, 32]
  radius: [sm: 4, md: 8, lg: 16]

Multi-Agent Orchestration

Choose the right AI for every task

Bring-your-own-model strategy. Connect your Anthropic/Claude keys, OpenAI/Codex keys, or self-host custom models. We never charge token markup—you pay provider rates directly.

Claude 3.5 Sonnet for complex reasoning
Codex for code-specific operations
OpenCode for batch refactorings
Custom model support via API
Automatic routing based on task type

# .caduce/config.json
{
  "models": {
    "default": "claude-3-5-sonnet",
    "code-review": "codex-large",
    "visual-tweaks": "custom-model-v2"
  },
  "api-keys": {
    "anthropic": "undefined",
    "openai": "undefined"
  }
}

Built to run on
your stack, not ours

Claude Code is first-class in CADUCE. Bring your own Claude subscription, a Codex account, OpenCode — or your own API keys. We never mark up your tokens.

Claude Code

First-class. CADUCE's default engine for planning, writing, and refactoring against your real codebase.

Codex

Drop in Codex when you want multi-file refactors and PR-grade changes.

OpenCode

Fully open-source agents, self-hosted, for teams that stay on their own infra.

Your subscription

Already paying for Claude, Pro, or an API? Bring that — no token markup, ever.

Frequently asked
questions

Everything you need to know about getting started with CADUCE.

Still have questions?

Ready to stop
rebuilding designs
in code?

Join the early access list to be among the first to edit your codebase visually with Claude built in — no token markup, your subscription or your keys.

🎯

Save Time

Reduce visual iteration cycles by 10x

✨

Maintain Fidelity

Never lose design intent again

🚀

Ship Faster

Go from idea to production in minutes

See Everything.Edit Anything.