v0 by Vercel Cost Control: Iterative Component Revision Accumulation, TypeScript Build Feedback Loops, Multi-File Snapshot Re-reads, and shadcn/ui Resolution Spirals

v0 by Vercel is a chat-based React component generator. You describe a UI in natural language — "a responsive pricing table with three tiers, a toggle between monthly and annual billing, and a highlighted recommended plan" — and v0 produces ready-to-copy TypeScript code built on React, Tailwind CSS, and the shadcn/ui component library. The output is structured as JSX components, sometimes spanning multiple files, with full TypeScript types and Tailwind class names that work in a Next.js project without modification. The intended workflow is fast: prompt once, get a component, copy it into your codebase. The actual workflow for any non-trivial UI is iterative: prompt, review the output, request a change, review again, repeat.

v0's generation model is a fine-tuned language model purpose-built for React/Tailwind/shadcn output. It operates in a stateful conversation context: each message in the conversation is part of the model's context window, including the full source code of the most recently generated component. When you ask v0 to "make the card border more subtle and add a hover state," the model receives your instruction plus the entire component source from the previous generation — because the model must understand the current state of the component to generate a coherent revision. This design is correct and necessary. It also produces the primary cost accumulation pattern: every chat turn carries the full prior component source, plus the full conversation history, plus the system prompt context that describes v0's generation constraints, available Tailwind utilities, and shadcn/ui component API surface.

v0 is available at three pricing tiers in 2026: a free tier (limited generations per day), a Premium tier ($20/month, higher generation limits), and an API tier (per-token billing for programmatic access via the Vercel AI SDK). The free and Premium tiers abstract the token cost into daily generation limits — you cannot see how many tokens a generation consumed, only how many generations remain today. The API tier exposes full token cost per call. Teams building UI generation workflows on the v0 API, or using v0 as a component within a larger multi-step agent workflow, are the primary audience for the circuit breaker patterns below: the per-token cost is visible, and the cost multipliers from iterative loops, build error injection, and registry resolution spirals compound directly into API spend.

The root cause common to all four patterns is structural: v0's stateful conversation model and full-file generation architecture each accumulate costs at points that operate independently and multiplicatively. A complex component session that triggers all four patterns simultaneously — 12 revision turns, TypeScript errors at turns 4 and 8, a 6-file component suite re-read at every turn, and a shadcn DateRangePicker resolution loop at turn 3 — produces token consumption that is the product of each multiplier, not their sum.

Pattern 1: Iterative Component Revision Context Accumulation

The core v0 workflow is a chat loop: the user describes a change, v0 generates a revised component, the user sees it rendered, describes the next change, and the loop repeats. Each turn in this loop calls the v0 generation model with a context window that includes the system prompt (v0's generation instructions, shadcn/ui API reference, Tailwind utility constraints — approximately 4,000–8,000 tokens), the complete conversation history (every user message and every prior generated component), and the current generation request (the user's latest instruction, typically 20–100 tokens).

The accumulation comes from the conversation history carrying the full component source at each turn. A v0 session generating a data table component might look like this: Turn 1 generates 180 lines (1,350 tokens of component source). Turn 2's request — "add a search bar above the table" — receives the turn 1 component (1,350 tokens) plus the conversation (100 tokens) and generates 220 lines (1,650 tokens). Turn 3's request — "make the sort indicators more visible" — receives the turn 2 component (1,650 tokens) plus all prior conversation turns (250 tokens) and generates 230 lines (1,725 tokens). By turn 10 on a component that has grown to 280 lines (2,100 tokens), the cumulative conversation history carries all 9 prior component generations plus all 10 user messages — roughly 13,500 tokens of conversation history transmitted at turn 10 alone, on top of the current component and system prompt.

The compounding factor is component growth across revisions. Users typically add features across revision turns rather than replacing them. A turn-1 component with a basic card layout grows to include responsive breakpoints at turn 3, animation states at turn 5, an accessibility ARIA pattern at turn 7, and a dark mode variant at turn 9. The component grows from 80 lines at turn 1 to 320 lines by turn 9. The conversation history at turn 9 carries not just the turn 8 component (320 lines = 2,400 tokens) but every intermediate version — the 80-line turn-1 version, the 110-line turn-2 version, and so on — because each prior turn's response is part of the conversation history. Across 10 turns on a component that grows from 80 to 320 lines, the cumulative component context transmitted in the conversation history is approximately 18,000–22,000 tokens of prior component source code, dominating total session cost.

interface V0RevisionState {
  turnCount: number;
  cumulativeInputTokens: number;
  conversationHistoryTokens: number;
  componentLineCounts: number[];  // one per prior turn
}

class V0RevisionGuard {
  private state: V0RevisionState = {
    turnCount: 0,
    cumulativeInputTokens: 0,
    conversationHistoryTokens: 0,
    componentLineCounts: [],
  };

  constructor(
    private readonly maxTurns: number = 12,
    private readonly maxCumulativeInputTokens: number = 150_000,
    private readonly maxConversationHistoryTokens: number = 60_000,
    private readonly tokensPerLine: number = 7.5,
  ) {}

  onTurnStart(currentComponentLineCount: number, userMessageTokens: number): void {
    this.state.turnCount++;

    // Estimate conversation history: all prior component generations + prior user messages
    const priorComponentTokens = this.state.componentLineCounts.reduce(
      (sum, lines) => sum + Math.round(lines * this.tokensPerLine),
      0,
    );
    this.state.conversationHistoryTokens = priorComponentTokens + userMessageTokens;

    const systemPromptTokens = 6_000;
    const currentTurnInputTokens =
      systemPromptTokens +
      this.state.conversationHistoryTokens +
      Math.round(currentComponentLineCount * this.tokensPerLine) +
      userMessageTokens;

    this.state.cumulativeInputTokens += currentTurnInputTokens;
    this.state.componentLineCounts.push(currentComponentLineCount);

    if (this.state.turnCount > this.maxTurns) {
      throw new Error(
        `V0RevisionGuard: revision ceiling ${this.maxTurns} reached ` +
        `(${this.state.turnCount} turns, ${this.state.cumulativeInputTokens.toLocaleString()} cumulative input tokens). ` +
        `Component has grown to ${currentComponentLineCount} lines across ${this.state.turnCount} revisions. ` +
        `Start a new v0 session with the current component as the initial prompt — ` +
        `this resets conversation history without losing component state.`,
      );
    }

    if (this.state.conversationHistoryTokens > this.maxConversationHistoryTokens) {
      throw new Error(
        `V0RevisionGuard: conversation history ${this.state.conversationHistoryTokens.toLocaleString()} tokens ` +
        `exceeds ceiling ${this.maxConversationHistoryTokens.toLocaleString()} at turn ${this.state.turnCount}. ` +
        `Prior component generations are dominating context. ` +
        `Start a new session — paste the current component source as the first message ` +
        `to anchor the model on the current state without carrying intermediate versions.`,
      );
    }

    if (this.state.cumulativeInputTokens > this.maxCumulativeInputTokens) {
      throw new Error(
        `V0RevisionGuard: cumulative input tokens ${this.state.cumulativeInputTokens.toLocaleString()} ` +
        `exceeds ceiling ${this.maxCumulativeInputTokens.toLocaleString()} across ${this.state.turnCount} turns. ` +
        `Session cost is ${(this.state.cumulativeInputTokens * 0.003 / 1000).toFixed(3)} USD in input tokens alone.`,
      );
    }
  }

  get summary(): V0RevisionState {
    return { ...this.state };
  }
}

V0RevisionGuard tracks the per-turn and cumulative input token cost as the conversation history grows. Call onTurnStart(currentComponentLineCount, userMessageTokens) before each v0 API call, passing the line count of the component version currently in context and the token count of the user's new instruction. The guard estimates the conversation history token load from all prior component line counts and raises before the API call if any ceiling is exceeded. The most operationally valuable signal is the maxConversationHistoryTokens ceiling: when prior component generations dominate the context, starting a new v0 session with the current component as the anchor prompt achieves the same generation quality at a fraction of the input cost.

Pattern 2: TypeScript and Tailwind Build Feedback Loop Context Injection

When v0-generated component code is copied into a project and then fails to compile — TypeScript type errors, missing Tailwind utility classes, unresolved shadcn/ui imports — the natural next step is to paste the error output back into the v0 chat: "I'm getting this TypeScript error when I try to use this component." v0 reads the error, generates a revised component that addresses it, and the user tries again. This error-feedback loop is the intended repair workflow. It is also the second primary cost amplification pattern, because TypeScript compiler output and Tailwind JIT diagnostics are verbose by design.

A TypeScript error on a React component with complex prop types produces output that includes: the error message (1–3 lines), the file and line number where the error occurred, the expected type (which for discriminated unions or conditional types can span 15–40 lines of type signature), the received type (another 10–30 lines), and the full type trace from the offending line back through the call stack (5–20 lines per stack frame, 3–8 frames). A single TypeScript error in a complex generic component — "Type 'string | undefined' is not assignable to type 'string'" in a generically typed data table column definition — produces 60–120 lines of compiler output. A compile session with 4 related errors produces 240–480 lines: 1,800–3,600 tokens of error context injected at the next v0 generation turn.

The compounding factor is error context accumulation across multiple fix attempts. The first fix attempt may resolve 3 of the 4 errors and introduce 2 new ones. The user copies the new errors into v0 — which now receives the current conversation history (carrying the previous error paste and the previous component generation) plus the new error output. By the third fix attempt, the conversation history carries: the turn-3 component generation (230 lines = 1,725 tokens), the turn-3 TypeScript errors (400 tokens), the turn-4 component generation (235 lines = 1,762 tokens), the turn-4 TypeScript errors (350 tokens), plus all earlier conversation. Three error-feedback cycles add approximately 4,500 tokens of error context on top of the normal revision accumulation, contributing 15–25% of total session cost purely in compiler output.

interface ErrorInjection {
  rawLines: number;
  truncatedLines: number;
  tokens: number;
  errorType: 'typescript' | 'tailwind' | 'hydration' | 'import' | 'unknown';
}

class V0BuildErrorGuard {
  private injections: ErrorInjection[] = [];
  private consecutiveErrorTurns = 0;

  constructor(
    private readonly maxLinesPerInjection: number = 80,
    private readonly maxCumulativeErrorTokens: number = 8_000,
    private readonly maxConsecutiveErrorTurns: number = 4,
    private readonly tokensPerLine: number = 7.5,
  ) {}

  prepareErrorInjection(
    rawErrorOutput: string,
    errorType: ErrorInjection['errorType'] = 'unknown',
  ): string {
    const lines = rawErrorOutput.split('\n');
    const rawLines = lines.length;
    let outputLines = lines;

    if (rawLines > this.maxLinesPerInjection) {
      // Keep the first 20 lines (error summary) + last N lines (actionable diagnostics)
      const head = lines.slice(0, 20);
      const tail = lines.slice(-(this.maxLinesPerInjection - 20));
      outputLines = [
        ...head,
        `[${rawLines - this.maxLinesPerInjection} lines omitted — showing first 20 and last ${this.maxLinesPerInjection - 20}]`,
        ...tail,
      ];
    }

    const truncatedLines = outputLines.length;
    const tokens = Math.round(truncatedLines * this.tokensPerLine);

    this.injections.push({ rawLines, truncatedLines, tokens, errorType });
    this.consecutiveErrorTurns++;

    const cumulativeErrorTokens = this.injections.reduce((s, i) => s + i.tokens, 0);

    if (this.consecutiveErrorTurns >= this.maxConsecutiveErrorTurns) {
      throw new Error(
        `V0BuildErrorGuard: ${this.consecutiveErrorTurns} consecutive error-feedback turns ` +
        `without a successful build. Error types seen: ${[...new Set(this.injections.map(i => i.errorType))].join(', ')}. ` +
        `The component may have a structural type issue that v0's generation model ` +
        `cannot resolve through error-feedback iteration. ` +
        `Try: (1) remove the TypeScript generics and retype with explicit types, ` +
        `(2) replace the failing shadcn/ui component with a simpler HTML equivalent, ` +
        `or (3) start a new session describing the component without the feature causing errors.`,
      );
    }

    if (cumulativeErrorTokens > this.maxCumulativeErrorTokens) {
      throw new Error(
        `V0BuildErrorGuard: cumulative error context ${cumulativeErrorTokens.toLocaleString()} tokens ` +
        `across ${this.injections.length} error injections exceeds ceiling ${this.maxCumulativeErrorTokens.toLocaleString()}. ` +
        `Error output is consuming a disproportionate share of conversation context. ` +
        `Distill the error to the single most actionable line before the next v0 turn ` +
        `rather than pasting the full compiler output.`,
      );
    }

    return outputLines.join('\n');
  }

  onSuccessfulBuild(): void {
    this.consecutiveErrorTurns = 0;
  }

  get totalErrorTokens(): number {
    return this.injections.reduce((s, i) => s + i.tokens, 0);
  }
}

V0BuildErrorGuard processes error output before it is pasted into the v0 chat. Call prepareErrorInjection(rawErrorOutput, errorType) with the full compiler output and an error type label; the method returns a truncated version (first 20 lines + last 60 lines of the output) that is safe to inject. Call onSuccessfulBuild() when a revision compiles without errors to reset the consecutive error turn counter. The consecutive error ceiling (maxConsecutiveErrorTurns=4) is the most actionable constraint: four consecutive error-feedback turns without a clean build indicates a structural type incompatibility that iterative error injection will not resolve. At that point, manual debugging — removing the problematic feature, simplifying the type signature, or replacing the failing shadcn/ui component — is faster and cheaper than continued v0 iteration.

Pattern 3: Multi-File Component Suite Snapshot Re-reads

v0 can generate component suites rather than single files: a complex data visualization component might be generated as chart.tsx (the main component), chart-types.ts (TypeScript interfaces), chart-hooks.ts (React hooks for data processing), chart-utils.ts (formatting and calculation utilities), and chart.test.tsx (basic render and interaction tests). This multi-file output is useful because it separates concerns and produces code that integrates cleanly into a well-organized project structure. It is also the source of the third cost amplification pattern: when the user requests a change to any one file in the suite, v0 re-reads and re-generates the full suite.

The re-read is necessary for coherence. If the user asks v0 to "add a tooltip showing the raw value when hovering a data point," v0 needs to update chart.tsx to add the tooltip JSX, chart-types.ts to add a TooltipConfig interface, chart-hooks.ts to add a useTooltip state hook, and possibly chart-utils.ts to add a tooltip value formatter. Generating a coherent multi-file update requires the model to hold all current file states simultaneously. The cost of this coherence is that every revision turn re-transmits the full source of every file in the suite, even for changes that only touch one or two files.

The accumulation compounds across turns. A 5-file component suite with 80 lines per file (3,000 tokens total) re-sent at every turn costs 30,000 tokens of file content across 10 turns — before conversation history overhead. As the suite grows with each revision (each turn typically adds 5–15 lines across files), the per-turn re-transmission cost grows proportionally. A 5-file suite that starts at 400 lines total and grows to 700 lines by turn 10 re-transmits: 3,000 tokens at turn 1, 3,150 at turn 2, ..., 5,250 at turn 10. Total suite re-read cost across 10 turns: approximately 41,250 tokens — more than 4× the turn-1 suite size, consumed entirely in file content re-transmission.

interface FileSnapshot {
  path: string;
  lineCount: number;
  revisedInTurns: number[];
}

class V0SnapshotGuard {
  private files = new Map<string, FileSnapshot>();
  private turnCount = 0;

  constructor(
    private readonly maxFilesInSuite: number = 6,
    private readonly maxTotalSuiteTokens: number = 8_000,
    private readonly maxSuiteReTransmitTokens: number = 60_000,
    private readonly tokensPerLine: number = 7.5,
  ) {}

  onSuiteGenerated(filePaths: string[], lineCounts: number[]): void {
    this.turnCount++;

    if (filePaths.length > this.maxFilesInSuite) {
      throw new Error(
        `V0SnapshotGuard: component suite has ${filePaths.length} files ` +
        `(ceiling: ${this.maxFilesInSuite}). ` +
        `Every revision turn re-transmits all ${filePaths.length} files in full. ` +
        `Split the suite: generate the main component first, then generate ` +
        `supplementary files (hooks, utils, types) in separate single-file sessions ` +
        `that reference the main component's interface rather than re-generating it.`,
      );
    }

    filePaths.forEach((path, i) => {
      const existing = this.files.get(path);
      this.files.set(path, {
        path,
        lineCount: lineCounts[i] ?? 0,
        revisedInTurns: existing
          ? [...existing.revisedInTurns, this.turnCount]
          : [this.turnCount],
      });
    });

    const totalSuiteLines = [...this.files.values()].reduce((s, f) => s + f.lineCount, 0);
    const totalSuiteTokens = Math.round(totalSuiteLines * this.tokensPerLine);

    if (totalSuiteTokens > this.maxTotalSuiteTokens) {
      const largest = [...this.files.values()]
        .sort((a, b) => b.lineCount - a.lineCount)
        .slice(0, 3)
        .map(f => `${f.path} (${f.lineCount} lines)`);
      throw new Error(
        `V0SnapshotGuard: suite total ${totalSuiteTokens.toLocaleString()} tokens ` +
        `(${totalSuiteLines} lines across ${this.files.size} files) exceeds ceiling ` +
        `${this.maxTotalSuiteTokens.toLocaleString()} at turn ${this.turnCount}. ` +
        `Largest files: ${largest.join(', ')}. ` +
        `Each subsequent revision turn re-transmits this full suite in conversation history. ` +
        `Extract the largest file into a standalone session and import its types.`,
      );
    }

    const totalReTransmitTokens = totalSuiteTokens * this.turnCount;
    if (totalReTransmitTokens > this.maxSuiteReTransmitTokens) {
      throw new Error(
        `V0SnapshotGuard: estimated suite re-transmission cost ${totalReTransmitTokens.toLocaleString()} tokens ` +
        `(${totalSuiteTokens.toLocaleString()} tokens/turn × ${this.turnCount} turns) ` +
        `exceeds ceiling ${this.maxSuiteReTransmitTokens.toLocaleString()}. ` +
        `Start a new session anchored on the current suite state. ` +
        `Paste all ${this.files.size} files as the initial context to reset conversation history ` +
        `without losing current component state.`,
      );
    }
  }

  get hotFiles(): FileSnapshot[] {
    return [...this.files.values()].sort((a, b) => b.lineCount - a.lineCount);
  }
}

V0SnapshotGuard tracks the file count and total token size of each generated component suite. Call onSuiteGenerated(filePaths, lineCounts) after each v0 generation turn, passing the paths and line counts of all files in the response. The guard enforces a file count ceiling (maxFilesInSuite=6) and a total suite token ceiling (maxTotalSuiteTokens=8_000), and estimates the cumulative re-transmission cost across all turns. The re-transmission ceiling (maxSuiteReTransmitTokens=60_000) provides a session-level budget for file content alone. Use the hotFiles property to identify which files in the suite are driving the most re-transmission cost and target those for extraction into standalone sessions.

Pattern 4: shadcn/ui Component Resolution Spirals

v0 is built around the shadcn/ui component library. When you prompt v0 to include a date picker, a data table, a command palette, or a drawer, v0 uses shadcn/ui's corresponding component — DatePicker, DataTable, CommandDialog, Drawer — as the implementation. The shadcn/ui component registry is extensive (60+ components as of 2026), and v0's system prompt includes the registry's component API surface to guide generation. This works seamlessly when the requested component exists in shadcn/ui with a stable Radix UI dependency.

The resolution spiral occurs when the requested feature does not cleanly map to an available shadcn/ui component. A common example is date range selection: the shadcn/ui Calendar component supports single date selection natively, but date range selection requires combining Calendar with the react-day-picker library's DayPicker in range mode, which has peer dependency requirements on a specific version of react-day-picker that may conflict with the Radix UI primitives already installed via shadcn. When a user asks v0 for "a date range picker," v0 generates a component using the range pattern, the user reports a peer dependency error, v0 generates an alternative using a different approach, the user reports a different conflict, and the loop continues.

Each loop iteration injects: the previous component attempt (full source), the npm install error or peer dependency warning output (50–200 lines), the user's description of the problem, and v0's next attempt. Unlike the TypeScript error pattern (which is bounded by compiler output verbosity), shadcn/ui resolution spirals inject npm resolver output — which includes the full dependency tree resolution attempt, the peer dependency conflict chain showing which package requires which version of which other package, and the suggested resolutions (which are themselves often incorrect). An npm peer dependency conflict error for a Radix UI version mismatch produces 80–250 lines of output: the conflict summary, the dependency chain, the --legacy-peer-deps suggestion, the overrides configuration suggestion, and the full package requirement matrix. Three resolution loop iterations inject 240–750 lines: 1,800–5,625 tokens of npm output on top of the already-accumulated component history.

type ShadcnComponent =
  | 'Calendar' | 'DatePicker' | 'DataTable' | 'CommandDialog'
  | 'Drawer' | 'Sheet' | 'Combobox' | 'MultiSelect'
  | 'RichTextEditor' | 'FileUpload' | 'ColorPicker' | 'TimePicker'
  | string;

interface ResolutionAttempt {
  component: ShadcnComponent;
  attemptNumber: number;
  hadPeerDepError: boolean;
  npmOutputLines: number;
}

// Components known to have peer dep conflicts or missing registry entries
const KNOWN_UNSTABLE_COMPONENTS: Set<string> = new Set([
  'DateRangePicker',
  'MultiSelect',
  'RichTextEditor',
  'FileUpload',
  'ColorPicker',
  'TimePicker',
  'InfiniteScroll',
  'VirtualList',
]);

class V0ComponentResolutionGuard {
  private attempts: ResolutionAttempt[] = [];

  constructor(
    private readonly maxAttemptsPerComponent: number = 3,
    private readonly maxNpmOutputLinesPerInjection: number = 60,
    private readonly maxCumulativeResolutionTokens: number = 12_000,
    private readonly tokensPerLine: number = 7.5,
  ) {}

  onComponentRequest(componentName: ShadcnComponent): void {
    if (KNOWN_UNSTABLE_COMPONENTS.has(componentName)) {
      throw new Error(
        `V0ComponentResolutionGuard: '${componentName}' is not in the stable shadcn/ui registry ` +
        `or has known Radix UI peer dependency conflicts. ` +
        `Requesting it will likely trigger a resolution loop. ` +
        `Alternatives: ` +
        `(1) use HTML native input elements (e.g.,  for date pickers), ` +
        `(2) request a simpler shadcn/ui component that covers the core use case, ` +
        `or (3) describe the feature without naming a specific component ` +
        `and let v0 choose the most compatible available option.`,
      );
    }
  }

  prepareNpmErrorInjection(
    component: ShadcnComponent,
    rawNpmOutput: string,
  ): string {
    const lines = rawNpmOutput.split('\n');
    const rawLines = lines.length;

    const priorAttemptsForComponent = this.attempts.filter(a => a.component === component).length;

    if (priorAttemptsForComponent >= this.maxAttemptsPerComponent) {
      throw new Error(
        `V0ComponentResolutionGuard: ${priorAttemptsForComponent} failed resolution attempts ` +
        `for '${component}' (ceiling: ${this.maxAttemptsPerComponent}). ` +
        `Peer dependency conflicts for this component are not resolving through v0 iteration. ` +
        `Drop the ${component} requirement and request a functionally equivalent component ` +
        `using only stable shadcn/ui primitives (Button, Input, Popover, Calendar). ` +
        `The peer dep issue requires manual package.json configuration outside v0's scope.`,
      );
    }

    // Keep first 15 lines (conflict summary) + last 45 lines (resolution hints)
    let outputLines = lines;
    if (rawLines > this.maxNpmOutputLinesPerInjection) {
      const head = lines.slice(0, 15);
      const tail = lines.slice(-(this.maxNpmOutputLinesPerInjection - 15));
      outputLines = [
        ...head,
        `[npm output truncated: ${rawLines - this.maxNpmOutputLinesPerInjection} lines omitted]`,
        ...tail,
      ];
    }

    const tokens = Math.round(outputLines.length * this.tokensPerLine);
    this.attempts.push({
      component,
      attemptNumber: priorAttemptsForComponent + 1,
      hadPeerDepError: true,
      npmOutputLines: outputLines.length,
    });

    const cumulativeTokens = this.attempts.reduce(
      (s, a) => s + Math.round(a.npmOutputLines * this.tokensPerLine),
      0,
    );

    if (cumulativeTokens > this.maxCumulativeResolutionTokens) {
      const componentSummary = [...new Set(this.attempts.map(a => a.component))].join(', ');
      throw new Error(
        `V0ComponentResolutionGuard: cumulative resolution overhead ${cumulativeTokens.toLocaleString()} tokens ` +
        `(ceiling: ${this.maxCumulativeResolutionTokens.toLocaleString()}) ` +
        `across ${this.attempts.length} attempts for: ${componentSummary}. ` +
        `npm conflict output is consuming session context budget. ` +
        `Restart with a component-agnostic prompt and avoid specifying shadcn components by name.`,
      );
    }

    return outputLines.join('\n');
  }

  get componentAttemptSummary(): Record<string, number> {
    return this.attempts.reduce(
      (acc, a) => ({ ...acc, [a.component]: (acc[a.component] ?? 0) + 1 }),
      {} as Record<string, number>,
    );
  }
}

V0ComponentResolutionGuard intercepts two points in the resolution loop: the component request and the npm error injection. Call onComponentRequest(componentName) before the first v0 turn that requests a specific shadcn/ui component — the guard checks against a list of components known to have peer dependency conflicts or missing registry entries and raises before the API call, saving the cost of the first failed attempt entirely. Call prepareNpmErrorInjection(component, rawNpmOutput) when pasting npm error output into v0 — the method truncates the output (keeping the conflict summary and resolution hints) and enforces the per-component attempt ceiling. The KNOWN_UNSTABLE_COMPONENTS set should be updated as you encounter conflicts in your own projects; the list above reflects the most commonly problematic components across v0 sessions as of mid-2026.