Transparent

Transparent takes a plain-language UI request, generates working HTML/CSS/JS for it with Claude, renders the result live, and then turns around and explains its own output back to you: concept by concept, tied to specific line numbers, ordered from beginner to advanced. The idea is to make the generated code legible rather than treating it as a black box you just paste and run.

The concept-extraction step is its own separate API call: it hands the generated code and the original request back to Claude and asks for a structured breakdown covering what concept appears, where, its difficulty, its prerequisites, what to learn next, and even a small interactive exercise for practicing it. Claude's replies aren't always clean JSON, so the parser has to defend against text wrapped around the object and responses that get cut off mid-structure.

// Claude might return with markdown code blocks, clean it
let cleanedResponse = response
  .replace(/```json\n?/g, '')
  .replace(/```\n?/g, '')
  .trim();

// Try to extract JSON object if wrapped in other text
const jsonMatch = cleanedResponse.match(/\{[\s\S]*\}/);
if (jsonMatch) {
  cleanedResponse = jsonMatch[0];
}

// Find the end of the JSON object by matching braces
let braceCount = 0;
let jsonEnd = -1;
for (let i = 0; i < cleanedResponse.length; i++) {
  if (cleanedResponse[i] === '{') braceCount++;
  if (cleanedResponse[i] === '}') {
    braceCount--;
    if (braceCount === 0) {
      jsonEnd = i + 1;
      break;
    }
  }
}

Counting braces by hand instead of trusting JSON.parse to fail cleanly means the app can recover the intended object even when Claude appends trailing commentary, and a separate truncation check catches responses that stop before the closing brace so the UI can retry instead of showing a broken lesson.