Brainbaby Artifacts: HTML Previews, Code & Diagrams

Brainbaby Artifacts lets you inspect supported code in a panel beside the conversation. HTML, SVG and Mermaid have a preview view; other code can be edited as source. Start with a small, self-contained example, check its behavior, and choose the coding workspace when your task needs a repository or project environment.

This guide explains the current web workflow. It does not assume that a rendered prototype has been tested, deployed or connected to a real service.

What is an AI artifact useful for?

An artifact separates a piece of output from the surrounding conversation so you can inspect its source and, for supported formats, its appearance. Useful first tasks include an HTML calculator, an SVG illustration or a Mermaid flowchart explaining a feature.

The artifact overview includes an interactive meeting-cost example. It is a hand-written teaching example with fictional values, not a capture of an AI-generated result. Download it without signing in or spending credits:

Download the free HTML meeting-cost example

For an existing application, use the coding task guide or GitHub connection workflow. A single-file preview is useful for exploring an interface; it is not a substitute for building and checking your actual project.

Which formats can I preview?

Presentations have a separate slide workflow. Do not assume that a diagram automatically becomes a slide or that a source snippet is already a deployed app.

Worked example: make an HTML meeting-cost calculator

A concrete brief gives the AI a result you can check. For this example, the formula is attendees × hourly rate × minutes ÷ 60. Four attendees at $30 per hour for 30 minutes should produce $60.00. The inputs are fictional and the output is a simple estimate.

Ask for one complete HTML document with its CSS and JavaScript included. That avoids package installation, import resolution and remote-library availability during the first preview.

1. Specify the format and expected behavior

Use this starter 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.

The starter link below carries this request into chat as an editable draft. Review it before sending. Opening the link does not automatically generate an artifact or spend credits; sending a request uses your account allowance.

Open the calculator brief in chat

2. Wait for the complete code block

Artifact detection runs after the response finishes streaming. Request a fenced html block with the complete document. An incomplete fence or a plain text explanation may remain in the conversation. Other tagged code needs at least four lines for automatic detection.

Open the artifact panel and choose Preview to inspect the HTML result. Use Code to read the source. HTML previews embed a document in an iframe; this is a browser context, not a general-purpose compiler. See the MDN iframe reference for the underlying browser behavior.

3. Check results before changing the design

Try these checks on the generated version and the downloadable reference:

• Default values: 4 attendees, $30 per hour, 30 minutes → $60.00.
• Zero minutes → $0.00, without an error.
• Change the hourly rate to $40 → $80.00 with the other defaults unchanged.
• Empty or negative input → a readable validation message, rather than a misleading cost.
• Narrow screen → labels and inputs remain usable without horizontal scrolling.
• Keyboard use → each input can receive focus and the result can be read without relying on color.

These are acceptance checks, not a claim that every AI-generated version will pass. If your result fails, report the exact input and observed output in the follow-up.

4. Make one revision and inspect it

For example: “Keep the calculation unchanged. Add a short explanation under the result and make the inputs easier to use on a phone. Return the complete revised HTML.” Compare the new output with the previous source and repeat the checks.

Use the panel’s Save action after making manual edits. A reply in chat is not confirmation that a particular saved artifact changed. Copy the source into your own project when you are ready to integrate it, then run that project’s checks.

Use Mermaid to explain a workflow

Mermaid describes diagrams as text. Ask for a fenced mermaid block; its source can be inspected alongside the rendered result. Here is an illustrative review workflow:

flowchart LR
  A[Describe observed behavior] --> B[Draft a small change]
  B --> C[Inspect the source]
  C --> D[Run relevant checks]
  D --> E{Checks passed?}
  E -->|No| B
  E -->|Yes| F[Review before publishing]

This diagram explains a process, not a completed coding task. Compare it with your own workflow and correct the labels before sharing. Consult the official Mermaid introduction for the diagram format.

When should I move to another workspace?

Use repository coding when you need to inspect several files, change an existing app or prepare a reviewable patch. Use the website builder for a new site project, and the presentation maker for slide creation and export. Check each workflow’s output and available execution rather than assuming an artifact transfers automatically.

Do not paste API keys or customer records into prototype code. Review generated URLs and dependencies; HTML can reference external resources. Keep the example small until its behavior is clear.

Questions before you start

Can I execute Python or React here?

The artifact source editor supports those languages for editing. It does not provide a Python runtime or React bundler. A self-contained HTML document can include browser JavaScript; other code needs an appropriate execution environment.

Why is my preview blank?

Check that the response has finished, the block is labeled correctly and the document is complete. Inspect the source for missing elements or unavailable dependencies. For a Mermaid error, start with a smaller valid diagram and add one relationship at a time.

Is artifact generation unlimited?

Check current pricing and allowances and the limits shown in your account. Downloading the reference file is free; generating or revising an AI response uses your allowance. This guide does not promise unlimited usage.