The Claude Artifacts Complete Setup Guide (Exact Prompts Inside)

@zodchiii
darkzodchi@zodchiii
95 views Jul 17, 2026 ~4 min read
Advertisement

Claude can now build apps that connect to your real tools: calendar, tasks, analytics. Most people have no idea and still use it for chat.

Media image

Inside: how artifacts actually work, the new connection setup, and 4 tools worth building this week.

Learn this once and you stop paying for half the software you use.

Here's the full guide 👇

Before we dive in, I share daily notes on AI & vibe coding in my Telegram channel: https://t.me/zodchixquant 🧠

Media image

The 5 levels of artifacts

Artifacts stopped being one feature a while ago. It's a ladder, and each level unlocks a different class of tools:

  • Level 1, static output: documents, diagrams, SVG, single-page designs. Available on every plan including Free
  • Level 2, interactive apps: React components and HTML pages with working buttons, forms, and state. Still just a smarter preview
  • Level 3, persistent storage: artifacts remember data between sessions, up to 20MB per artifact. Now your habit tracker doesn't reset on refresh
  • Level 4, Claude inside: an artifact can call the Claude API directly. People call it "Claude in Claude": the app you built has AI running inside it
  • Level 5, MCP connectors (new): artifacts read and write your real services. A dashboard that pulls live BigQuery data, a form that creates Asana tasks
  • Levels 3-5 need Pro, Max, Team, or Enterprise, on web and desktop.

    Media image

    Building your first real artifact

    Skip "make me a website". The prompt pattern that produces working tools:

    Build an artifact: [what it is] for [who uses it].
    
    Core features: [3-5 specific functions]
    Data: [what it stores or fetches]
    Design: [style reference or "clean, minimal"]
    
    Use persistent storage so data survives sessions.

    Concrete example:

    Build an artifact: a content calendar for a solo creator.
    
    Core features: add post ideas with status (draft/scheduled/posted),
    filter by platform, weekly view
    Data: store all entries persistently
    Design: clean, dark mode

    One prompt, working tool. Then iterate: "add a stats bar showing posts per week" instead of re-describing everything.

    The new part: connecting artifacts to real services

    This is what shipped yesterday. The flow, verified from the docs:

  • Build or open an artifact that needs external data ("dashboard showing my calendar and open GitHub issues")
  • On first interaction, the artifact shows a connector approval prompt: "This artifact uses connectors" with a Connect button per service
  • Approve access. Your choice persists for that artifact going forward
  • The artifact now fetches and writes data on demand, live, per viewer
  • Three rules that decide whether your build works:

  • Each viewer authenticates separately. Share an artifact with your team, and every person connects their own accounts. Your GitHub token never leaks to a teammate, and their dashboard shows their data
  • Publicly-shared artifacts can't use connectors. Live-data apps stay private or org-internal. Plan your builds accordingly
  • Admins hold the switch. On Team/Enterprise, org admins can disable artifact MCP access entirely, so check before promising your team a tool
  • 4 builds actually worth making

  • Personal ops dashboard. Calendar + task list + inbox count in one tab. The classic "what should I focus on today" screen, now with live data instead of pasted screenshots
  • Client-facing report page. Pulls metrics from your analytics connector each time it opens. Build once, stop exporting PDFs every Monday
  • Team intake form. A form that writes directly into Asana or Linear through the connector, with your validation rules on top. No Zapier tax
  • Live Artifacts move: persistent dashboards live in their own tab, refresh with current data each time you open them, and keep version history. Treat them as your personal internal tools, not chat outputs
  • Media image

    Publishing and remixing

    The distribution layer most people never touch:

  • Publish any artifact via link. Viewers don't need a Claude account for static and interactive levels
  • Remixing: anyone with a Claude account can fork a published artifact into their own copy and modify it. Your tool becomes a template
  • Community catalog: a browsable library of published artifacts. Before building from scratch, check if someone shipped 80% of your idea already
  • Common mistakes

  • Building connector apps for public sharing. Connectors don't work on public artifacts. If the goal is a public tool, design around static data or the Claude API level instead
  • Re-describing the whole app on every edit. Artifacts iterate. Ask for one change at a time and the quality stays consistent
  • Ignoring the 20MB storage ceiling. Persistent storage is for state and entries, not media libraries. Keep images external
  • Expecting shared artifacts to share your data. Per-user auth means every viewer sees their own services. That's a feature for teams and a surprise for the unprepared
  • Skipping the approval prompt details. The connect dialog names exactly which services the artifact touches. Read it, especially on remixed artifacts someone else built
  • The 15-minute setup

  • Pick one repetitive check you do daily: calendar, metrics, tasks (1 min)
  • Prompt the artifact with the pattern above, persistent storage on (3 min)
  • Add the connector, approve access on first run (2 min)
  • Iterate twice: one layout fix, one feature add (7 min)
  • Pin the tab. That's your first internal tool (2 min)
  • The chat window was never the product. The things you build in it are.

    Thanks for reading!

    I share daily notes on AI & vibe coding in my Telegram channel: https://t.me/zodchixquant 🧠

    Media image
    Actions
    What You Can Do
    • Export as PDF or Markdown
    • Batch Export to Notion
    • Bookmark & Highlight
    • LinkedIn & Instagram Carousel Maker
    Create Free Account

    Includes 7-day Premium trial

    Advertisement