brainbabyAI
DownloadSign in

See the idea. Inspect the code.

Brainbaby Artifacts puts supported code output in an editable panel beside your chat. Preview a self-contained HTML page, an SVG graphic or a Mermaid diagram, then inspect the source and check the behavior before using it.

Start with an HTML calculator

Download the free HTML example

The example download is free and makes no AI requests. Opening chat keeps the brief as an editable draft; generating a response uses your account allowance.

Choose an output the panel can preview.

  • HTML pages

    Preview a complete HTML document with CSS and browser JavaScript in an iframe. A single file with no external dependencies is a useful starting point for a calculator, form layout or small prototype.

  • SVG graphics

    Preview SVG source as a graphic and use the Code tab to change its shapes, labels or colors. Review any links or external resources in generated source.

  • Mermaid diagrams

    Ask for a fenced mermaid code block to describe a flowchart or sequence diagram. The renderer reports invalid syntax so you can inspect and correct the source.

  • Other code and documents

    Python, TypeScript and JSX can be edited as source. The artifact editor does not provide a Python runtime, a React bundler or a general Run button. Documents and tables have their own editors; presentations use a separate workflow.

Try a small HTML preview first.

The downloadable example estimates meeting cost using fictional inputs. Four attendees at $30 per hour for 30 minutes should display $60.00. Set minutes to zero to expect $0.00; clear an input or enter a negative number to see the validation message.

This is a hand-written teaching example, not a recording of an AI response. It contains no external libraries, network requests or stored personal data. Use the brief below to request your own version, then compare its behavior with these checks.

  • An editable starting brief

    Create a single HTML document for a meeting cost calculator. Put CSS and JavaScript in the same file and return it in one fenced html code block. Use labeled number inputs for attendees, hourly rate and minutes. Calculate attendees × hourly rate × minutes / 60, display USD to two decimal places and update when inputs change. Reject negative or non-finite values with a readable message. Include a viewport meta tag, a layout that fits a phone and an accessible result announcement. Use no external libraries, network requests, storage or real personal data. Start with 4 attendees, $30 per hour and 30 minutes: the expected result is $60.00. Explain how to check zero minutes and invalid values. Do not claim the code was tested unless you ran the checks.

From chat to a checked result.

  1. Request a supported format

    Specify one complete HTML document, one SVG graphic or a fenced Mermaid code block. Tell Brainbaby the inputs, desired behavior and any dependencies to avoid.

  2. Wait for the response to finish

    Supported fenced code is detected after streaming finishes. Open the artifact panel and use Preview and Code for HTML, SVG or Mermaid. A partial or incorrectly labeled block may need correction.

  3. Inspect, edit and save

    Read the source, check example inputs and save manual edits with the panel’s Save action. Ask for one specific revision at a time and inspect the returned version; a follow-up does not prove that the original artifact changed.

  4. Use the right workspace next

    Copy the source into your project and run its own checks. For repository changes, use the coding workspace. For a new site or a presentation, open the relevant builder and review that workflow’s output.

A preview is a starting point for review.

  • Check the code as well as the picture

    A rendered page does not establish that validation, accessibility or deployment works. Test empty, zero and invalid inputs, check the layout on a phone and review any generated links.

  • Keep secrets out of prototypes

    Do not paste API keys or customer records into example code. Generated HTML can reference external resources; review those URLs before using it with confidential information.

Before you open an artifact.

Can I run Python or React in the artifact panel?

The panel can edit Python, TypeScript and JSX source, but it does not provide a Python runtime or React bundler. HTML can include browser JavaScript. Use a suitable project environment to install dependencies and run other code.

Why did my code not open as an artifact?

Detection runs after the response finishes and looks for supported fenced code. Request a complete html, svg or mermaid block. Other tagged code needs at least four lines. An incomplete fence or a plain text response may stay in chat.

Are artifact edits saved automatically?

Use the Save action after making manual changes and confirm the result in the panel. You can copy the source for your own files. Asking for a revision in chat is not confirmation that a particular saved artifact was updated.

Does downloading the example use credits?

No. The public HTML example is a free file and makes no AI requests. Opening the starter link preserves a draft for review. Sending it to Brainbaby uses the allowance shown in your account; check current pricing for limits.