AI Document Assistant: How We Made 5 Document Types Work Seamlessly

The AI Document Assistant in Capability Challenge is a chat panel that generates content for whatever document type you're working on. One chat interface, five completely different output formats. Getting it to work well across all of them required solving a different problem for each type.

Text: the straightforward one

Text documents were simple. The AI generates plain prose — analysis, decision memos, recommendations — and you paste it into the editor. The main challenge was prompt design: getting Claude to write like a professional in a specific role, not like a general-purpose assistant summarizing a brief. The system prompt includes the role, company context, and challenge brief so the output is grounded in the actual scenario.

Diagrams: teaching Mermaid syntax

System diagrams use Mermaid.js — a text-to-diagram format where you write flowchart syntax and it renders as an SVG. The challenge was getting the AI to produce valid Mermaid reliably, especially the node shapes (rectangles, diamonds, cylinders, circles) and arrow types.

We also had to handle the fact that Claude sometimes wraps code in backtick fences even when told not to. The route strips mermaid code fences before returning the content, so what lands in the editor is always raw Mermaid that renders cleanly in the preview tab.

Slides: reliable JSON structure

Slides needed the AI to return structured JSON — a slides array where each item has a title and bullets list — that we then render as slide cards. The hard part was consistency: Claude occasionally wraps JSON in markdown fences or adds explanatory text before/after the object.

We wrote a three-strategy extractor: try to parse the raw response directly, then look for a code fence and extract its contents, then find the first opening brace and last closing brace and extract that range. At least one of these works in every case we've seen.

Code: language-aware generation

For code files, we pass the user's selected language as context so the AI generates in the right language without being asked. The server-side route strips any code fences from the response, since the output is going directly into a monospace editor — not a markdown renderer.

Wireframes: a new format entirely

Wireframes were the most involved. We designed a JSON schema with 18 element types, each with optional properties (variant, size, align, height, tabs, items, children). The AI prompt documents every element type and the rules for how to compose them into a realistic screen.

The "Use this in document" button for wireframes does one extra thing: it automatically switches the editor to the Visual tab so you see the rendered result immediately after inserting.

The shared pattern

Every document type follows the same flow: user asks AI → AI generates content → "Use this in document" button inserts it → user edits if needed → save. The differences are entirely in how we handle the format on the way in and out. The chat interface itself doesn't change. This lets the AI assist across all five types without the user having to switch contexts.