ilse

Product Introduction

1. Definition: Ilse is a local-first, agentic WYSIWYG (What You See Is What You Get) development tool for React applications. It functions as a CLI (Command Line Interface) and MCP (Model Context Protocol) server that overlays a design and testing toolbar directly onto a running local development server.
2. Core Value Proposition: Ilse exists to bridge the gap between visual design iteration and code changes for developers working on existing React applications. It enables rapid, precise UI refinement directly in the browser, using the developer's existing AI agent (like Claude Code or Cursor) to execute code edits, eliminating the need for manual file searching and context switching.

Main Features

1. In-Browser Design Mode: A toolbar provides direct manipulation of the live React app. Developers can click elements, drag to reorder or resize, adjust spacing/colors using the project's own design tokens, and edit text. Simple style tweaks that map to existing CSS classes are applied instantly without AI. More complex changes are packaged as a precise note for the user's AI agent.
2. Agentic Code Integration: Ilse does not generate code itself. It acts as a context-gathering bridge. When a change request is made, it automatically identifies the exact file, line number, and relevant code snippet (JSX, component usage, design tokens) and sends this structured context to the developer's chosen AI agent (via MCP/CLI) to perform the code edit in the local repository.
3. Pro Test Mode (Founder Pre-sale): This advanced feature allows automated user journey testing. Developers describe a user flow (e.g., "buy the lamp"). Ilse autonomously walks through the steps in the real application and generates a report detailing where the flow broke, including the step, screen, and problematic element.

Problems Solved

1. Pain Point: The inefficiency of translating visual UI adjustments in a browser back to precise code changes in a complex React codebase. Manually finding the correct component file and line of code for a "crooked button" is time-consuming.
2. Target Audience: React developers, design engineers, and solo founders who develop locally and are already using AI coding assistants (Claude Code, Cursor, etc.) but need a more visual and precise way to direct them for UI refinements.
3. Use Cases: Rapidly iterating on UI polish (spacing, colors, text) after core functionality is built. Conducting visual regression or user flow testing directly on the dev server. Streamlining collaboration where non-technical stakeholders can point at issues in a live build, with context flowing directly to the developer and their AI agent.

Unique Advantages

1. Strengths & Limitations (Pros & Cons):

   • Pros:
     • Zero Data Leakage: Entirely local; code, context, and history never leave the developer's machine.
     • Leverages Existing Stack: Works with the developer's current AI agent, IDE, React framework (Next.js, Vite, etc.), and design system (Tailwind, shadcn/ui).
     • Precision Context: Drastically reduces AI agent hallucinations by providing exact code location and project-specific tokens.
     • Non-Destructive: The Ilse toolbar only exists on the dev server; production builds ship with no added overhead.
   • Cons:
     • React-Only: Currently limited to React-based projects with a dev server.
     • Agent Dependency: Requires the user to already have and pay for a compatible AI coding agent (Claude Code, Cursor CLI, etc.).
     • Pro Feature Timeline: The flagship Test Mode feature is in pre-sale with a delivery date set for November 2026.

2. Key Alternatives & Differentiation:

   • vs. Lovable / Replit / Claude Design: These are full-stack, cloud-based AI application generators designed for starting projects from scratch in their own hosted environment. Ilse is for refining existing, locally-hosted React codebases. It edits your code in your repo, using your tools.
   • vs. Traditional Browser DevTools: DevTools allow inspection and style tweaks, but changes are ephemeral and must be manually replicated in code. Ilse formalizes these tweaks into actionable tasks for an AI agent to permanently implement in the source code.
   • vs. Visual Editing SDKs (e.g., Builder.io, Storybook): These often require embedding proprietary components or building a dedicated design system playground. Ilse works on top of the existing application with its native components, requiring no architectural changes.

Frequently Asked Questions (FAQ)

1. Is Ilse free and does my code stay private? Yes, the core Design Mode is free forever under the PolyForm Shield license for non-competitive use. Critically, Ilse is a local tool; it never sends your source code, context, or AI keys to any external server.
2. What AI agents does Ilse work with? Ilse works with any AI agent that supports the Model Context Protocol (MCP) or a CLI. This includes Claude Code, Codex, Cursor CLI, and Gemini CLI. It uses the agent you already pay for to execute code changes.
3. How is Ilse different from an AI code generator? Ilse does not generate net-new code from a blank prompt. It is an "agentic WYSIWYG" that provides precise visual context from your running app to your existing AI agent, which then edits your existing codebase. The focus is on refinement, not generation.
4. What is included in the Ilse Pro one-time purchase? The Pro pre-sale includes Test Mode (automated user journey testing with accessibility and layout checks), a future Component Library for drag-and-drop, and a "memory" feature. It includes 12 months of updates from the launch date of Pro, after which you retain a perpetual license for that version.
5. What happens if the Pro Test Mode features are delayed? The founder pre-sale terms state that if the core Pro features (like journeys) do not ship by November 30, 2026, purchasers will receive a full refund.