Artifacts & Canvas

Turn AI conversations into living documents, dashboards, tools, and mini-apps — then edit, save, share, and reuse them.

Quick mental model: Chat is where you think. Canvas is where you build. An artifact is what you build inside Canvas.

---

1. What are artifacts?

An artifact is a structured output from your AI conversation — something you can open, preview, edit, and keep working on outside the chat bubble.

Examples of artifacts:

• A PRD or report in rich markdown
• A landing page or dashboard in HTML
• A flowchart in Mermaid
• A React component prototype
• A Python script you can run in the browser
• An interactive tool (quiz, calculator, Q&A app) that calls AI from inside the page

Artifacts live in Canvas — a side panel on web (full-screen overlay on mobile) where you can:

• Switch between Preview, Code, Split, and Visual Edit (HTML)
• Keep multiple tabs open in one chat
• Let the AI propose edits you accept or reject
• Publish a link anyone can open
• Export to PDF, Word, or raw files

Your work saves automatically as you edit. When you publish, you get a permanent link like https://springbase.ai/a/abc123xyz.

---

2. Getting started — your first artifact

Option A — Ask the AI to create one

The easiest path is to describe what you want in chat:

For a document:

"Write a one-page product brief for our Q3 launch in markdown. Open it in Canvas."

For an interactive page:

"Build a simple todo list web page with a dark theme."

For a diagram:

"Draw a Mermaid sequence diagram for our login flow."

Phrases that help Canvas open:

• "in canvas"
• "in markdown"
• "open in canvas"
• "as a document"
• "build me a dashboard / landing page / tool"

Option B — Open from an existing message

If the AI already wrote something you want to keep:

1. Find the assistant message (or code block).
2. Click Open in Canvas.
3. Canvas opens with a new tab linked to that message.

Option C — Resume a previous session

If you were working in Canvas before and closed the panel:

1. Look for Resume Canvas near the chat input.
2. Click it to reopen your last tabs and pick up where you left off.

Keyboard shortcut (web)

Press ⌘/Ctrl + Shift + K to toggle Canvas open or closed.

---

3. The Canvas workspace

Layout

Tabs

• You can have up to 12 open tabs per chat.
• Recently closed tabs (up to 10) can be restored from the tab bar menu.
• Each tab has a title and type badge (HTML, Markdown, Diagram, etc.).

View modes

Header actions

From the Canvas header you can:

• Refresh the preview
• Copy all code to clipboard
• Download the raw file
• Export PDF / Word (markdown artifacts)
• Share — publish and get a link
• History — restore an earlier version
• Maximize — expand Canvas to use more screen space

Auto-save

Edits save automatically (about every quarter-second). You'll see a save status indicator in the header. Your draft is tied to the chat — come back later and Resume Canvas to continue.

---

4. Artifact types

Springbase supports eight artifact types. The AI picks the right one based on what you ask for; you can also switch by editing in Code mode.

Which type should I use?

Important: The built-in AI SDK (springbase.ai) — text, images, knowledge bases, meetings — works best in HTML artifacts. See §7.

---

5. Creating artifacts

5.1 Through conversation (recommended)

Documents

Use markdown-oriented language:

"Create a competitive analysis in markdown with a comparison table."

"Draft a meeting agenda as a canvas document."

The AI opens Canvas and puts the content in a markdown tab with a rich editor (headings, tables, task lists, links).

Web pages & tools

Switch to Code mode (or ask explicitly):

"Build a pricing calculator as a single HTML page with Tailwind."

"Create an interactive chart dashboard using Chart.js."

Diagrams

"Draw a Mermaid flowchart for our onboarding funnel."

"Show a system architecture diagram for our API."

Attach context first (optional)

Before creating an artifact grounded in your data:

1. Select a Knowledge Base (project) in the chat context picker.
2. Or attach a Meeting transcript.
3. Then ask: "Build an HTML Q&A app that answers questions from my product docs."

The artifact can use that context automatically when it calls AI (HTML only).

5.2 From code blocks in chat

When the AI outputs HTML, React, Mermaid, or SVG in a fenced code block, Springbase may auto-open Canvas for types that need a live preview.

You can always click Open in Canvas on any eligible message or code block.

5.3 Manual creation flow

1. Start a chat and get the AI to produce content (or paste your own in Code mode).
2. Click Open in Canvas.
3. Edit title by working with the AI: "Rename this artifact to 'Q3 Launch Plan'."
4. Keep iterating in chat: "Add a risks section to the canvas document."

5.4 Plan Mode outputs

When you use Plan Mode, steps that produce deliverables (reports, specs, apps) can open directly in Canvas as artifacts — same editing and sharing workflow applies.

---

6. Editing artifacts

Edit yourself

1. Open Canvas and select the tab.
2. Choose a view mode:
   • Markdown → WYSIWYG editor with formatting toolbar
   • HTML → Visual Edit to click elements, or Code for full control
   • Diagrams → Edit Mermaid source in Code mode
3. Changes save automatically.

Edit with AI (in chat)

With Canvas open, talk to the AI naturally:

"Add a section on pricing strategy."

"Change the hero headline to 'Ship faster.'"

"Fix the button color to blue."

The AI sends structured updates to your open artifact. When the change is significant, you'll see an Accept / Reject banner with a diff preview.

Markdown tip: Select text in the editor and use Ask AI (sparkle icon) to rewrite just that selection.

Version history

Open History in the Canvas header to browse snapshots (manual edits, AI updates, publish events) and restore an earlier version if needed.

---

7. AI-powered artifacts

Some artifacts aren't just static pages — they're apps that call AI while you use them. Think: chatbots, quiz generators, meeting email drafters, image studios, translators.

How it works (simple version)

Inside an HTML artifact, the AI can write JavaScript that calls:

await springbase.ai.chat({ message: "Your question here" });

You don't need API keys or setup. Springbase handles authentication, model routing, and credits — the same way as chat.

What AI-powered artifacts can do

Grounding in your data

When you select a Knowledge Base or Meeting in chat before building an artifact, those selections flow into the artifact's AI calls automatically.

You can also build a picker inside the artifact (e.g. dropdown of your projects) — ask the AI:

"Build an HTML Q&A app where I pick a knowledge base from a dropdown, then ask questions against it."

To disable grounding for creative tasks (translation, fiction), the artifact can opt out — ask:

"Build a translator that does not use my knowledge bases."

Example prompts to create AI-powered artifacts

Credits & limits

AI calls from artifacts use your Springbase credits (same as chat). Practical limits:

• Up to 3 simultaneous AI requests per artifact session
• 60 seconds timeout for text; 90 seconds for images
• Rate limits apply (roughly 30 requests/minute)

For advanced SDK patterns (streaming, image tools, knowledge-base grounding), ask Springbase in Code mode to extend your HTML artifact — or explore the examples in the use cases section below.

---

8. Artifacts that save data

By default, artifacts are stateless — refreshing might reset anything stored only in the browser session. For artifacts that remember todos, quiz scores, form entries, or user preferences, you need published storage.

The key rule

Publish your artifact first. Data persistence only works on published artifacts (after you click Share and save).

Draft-only artifacts cannot use persistent storage — you'll get a clear error if the code tries.

Two storage modes

Springbase provides springbase.storage inside HTML artifacts (after publishing):

Choose carefully:

• Private artifact + your todo app → shared (you're the owner; your checkboxes persist)
• Shared team tutorial → mine (each teammate tracks their own progress)
• Public quiz you share on LinkedIn → mine (each visitor gets their own score)

How to create a stateful artifact

Step 1 — Build it

"Build an HTML todo list with checkboxes. Persist todos using springbase.storage.shared so they survive reloads."

Step 2 — Publish

1. Click Share in Canvas.
2. Choose visibility (Private, Unlisted, etc.).
3. Save — your artifact gets a link and a storage token.

Step 3 — Use it

Open the artifact (from Canvas or the shared link). Checkboxes, form fields, and saved state now persist across reloads and devices (when signed in).

Example prompts for stateful artifacts

Storage limits (good to know)

What does not persist reliably

• Data saved only in the browser's local storage inside the preview iframe (session-scoped, not cross-device)
• Storage on unpublished drafts
• Real-time sync between two people editing the same artifact at once (no live co-editing yet)

---

9. Sharing & publishing

Publish from Canvas

1. Open the artifact tab.
2. Click Share in the header.
3. Configure:
   • Title (shown on the link page)
   • Visibility
   • Category (Dashboards, Documents, Tools, etc.)
   • Tags (up to 8)
   • Optional: attach Knowledge Bases / Meetings for viewers
4. Save — copy the link or scan the QR code.

Visibility options

Enterprise note: Your admin may restrict public/unlisted sharing. If Share is blocked, use Enterprise or Team visibility instead.

Shared link format

https://springbase.ai/a/{token}

Viewers see a read-only render (with watermark on public views). HTML artifacts with RAG attached can still call AI — billing may be charged to you or the viewer depending on share settings.

My Artifacts library

Visit Artifacts in the app (/artifacts) to browse, search, and filter everything you've published.

---

10. Export & download

Exported files use your artifact title as the filename.

---

11. Use cases & examples

Documents & specs

Scenario: Product manager needs a PRD after a discovery call.

1. Attach the meeting in chat.
2. "Write a PRD in markdown with goals, user stories, and open questions."
3. Edit in Canvas; export PDF for stakeholders.

---

Landing pages & marketing

Scenario: Marketer wants a campaign landing page.

1. Code mode: "Build a mobile-responsive landing page for our coffee subscription — hero, features, pricing, CTA. Use Tailwind."
2. Visual Edit to tweak copy and colors.
3. Share as Unlisted; send link to design review.

---

Dashboards & data viz

Scenario: Founder wants a KPI dashboard.

1. "Build an HTML dashboard with Chart.js showing MRR, churn, and active users — use sample data I can edit."
2. Iterate: "Add a date range filter (UI only)."
3. Publish to Enterprise for the leadership team.

---

Architecture & process diagrams

Scenario: Engineer documents a new microservice flow.

1. "Draw a Mermaid diagram: client → API gateway → auth service → database."
2. Export PDF for the architecture review deck.

---

Knowledge-base Q&A tool

Scenario: Support team wants internal doc search.

1. Select Help Center knowledge base in chat.
2. "Build an HTML Q&A app with a question box and streaming answers grounded in my context."
3. Publish to Enterprise; support agents open the link daily.

---

Meeting follow-up writer

Scenario: Sales rep drafts recap emails after calls.

1. "Build an HTML tool: pick a meeting, choose tone (Professional/Casual), generate a follow-up email with action items."
2. Uses meeting transcripts via the AI SDK.
3. Keep private — no need to publish unless sharing with the team.

---

Interactive tutorial with progress

Scenario: HR shares onboarding checklist with new hires.

1. "Build a 10-step onboarding checklist HTML page. Save completed steps in springbase.storage.mine per viewer."
2. Publish as Team or Enterprise link.
3. Each hire sees their own progress when signed in.

---

Quiz / assessment

Scenario: L&D creates a training quiz from internal docs.

1. Attach training knowledge base.
2. "Build a quiz app: generate 5 MCQ from my docs, score answers, save high score in springbase.storage.mine."
3. Publish unlisted; share link in Slack.

---

Image studio

Scenario: Content creator needs quick visuals.

1. "Build an image studio: generate from prompt, upload to edit, or describe uploaded images."
2. No publish required unless you want a permanent team tool.

---

Personal todo / tracker

Scenario: You want a simple task list that persists.

1. "HTML todo list with add/complete/delete; persist via springbase.storage.shared."
2. Publish (Private visibility is fine).
3. Reopen anytime from My Artifacts — tasks remain.

---

12. Tips for great results

Prompting

1. Say the format explicitly — "in markdown", "as HTML", "Mermaid diagram".
2. Say "canvas" when you want a side panel document, not a chat reply.
3. One HTML file for web apps — ask for "a single self-contained HTML file with CSS and JS."
4. Keep Canvas open when asking for edits — the AI sees an outline of your document.
5. Accept/Reject AI edits when unsure; use History to roll back.

Design

1. Ask for Tailwind CSS and a dark theme for polished HTML quickly.
2. For markdown docs, ask for tables, task lists, and clear headings.
3. Name your artifact early: "Title this 'Q3 Launch Plan'."

AI-powered apps

1. Publish before adding persistence (springbase.storage).
2. Select knowledge bases before building grounded tools.
3. Ask for streaming UI ("show the answer word by word") for snappier feel.
4. For image editing, remind the AI: "use the uploaded image, don't generate from scratch."

Sharing

1. Use Unlisted for "anyone with link" without broad discovery.
2. Use Enterprise/Team for internal tools.
3. Attach RAG on share only when viewers should query your docs (remember billing settings).

---

13. Limits & troubleshooting

Size & tabs

If you hit size limits, split into multiple artifacts or trim embedded data.

Common issues

Platform differences

---

14. FAQ

Can I edit an artifact after publishing?
Yes. Edit in Canvas, then update the published version from the Share dialog. Viewers see the latest saved content.

Can two people edit the same artifact together?
Not in real time today. Share a link for viewing; each person edits their own copy or you edit sequentially.

Do artifacts work offline?
No. Preview and AI features need an internet connection.

Can I fork someone else's artifact?
Open the shared link, then ask the AI to recreate or adapt it in your chat (respect the author's terms and visibility).

Does the AI SDK work in markdown or Python artifacts?
Reliably in HTML only. Use HTML for interactive AI apps.

Will my iframe localStorage persist?
Treat it as temporary. For real persistence, publish and use springbase.storage.

How much do AI calls inside artifacts cost?
Same credit model as chat — based on model and tokens used.

Can viewers use my knowledge bases without paying?
Share settings include RAG billing: author pays, viewer pays, or hybrid. Pick what fits your use case when publishing.

---

15. Related guides

---

Ready to build? Start a chat, say what you want in markdown or as an HTML tool, and open Canvas. When you're happy with it, hit Share — and if it needs memory, publish before you rely on saved data.