Stop reading agents.
Start seeing them.

Claude Code, Codex and Cursor draw diagrams, documents, dashboards and whole prototypes with An Artifacts. Your team sees them live, and any agent can pick up where another stopped. Free.

curl -fsSL https://artifacts.an.dev/install | sh

Claude CodeCodexCursorGemini CLI

The An Artifacts constructor: a picker of landing sections on the left, the assembled page on the right

What agents make

Everything your agent makes, in one place

How does sign-in work in this repo?

Here's the flow, from the email to a 90-day session.

v2Open in viewerAn Artifacts

Visuals in the chatDiagrams and charts right where you asked, kept as versions.

A document: How sign-in works, with a diagram, steps and code

DocumentsWrite-ups and specs with real typography, one link to share.

A release dashboard with tiles, a latency chart and deploys

Dashboards and appsPages that work: numbers, charts, controls.

A canvas of phone screens: welcome, check your email, you are in

Canvases and prototypesEvery screen of a flow, side by side, and clickable.

Your product, drawn one to one

Ask any agent to mock up a screen of your app and you get emoji for icons and grey boxes for content. With An Artifacts it looks at the real screen first, copies its fonts, colors and spacing, and uses your own icons and images.

A rough mockup of the 21st library with emoji icons and grey placeholder cards — Claude Code on its own

Claude Code with An Artifacts

Prototypes by the batch

Ask for six heroes and five feature sections at once. Every row is a part of the page, every board a direction: pick one per row and see the page assembled while you choose.

A canvas of landing sections in rows, one variant picked in each

Hand work to anyone on your team

A work isn't stuck in the agent or the person who started it. Anyone in your team opens it, and their agent, in whatever harness they use, reads the latest version and keeps going.

You · Claude Code

> draw the checkout flow

⏺ canvas_publish("Checkout")
  ⎿ v1 · 4 screens · in 21st

Sergey · Codex

> make the checkout compact

⏺ artifact_read("Checkout") v1
⏺ canvas_publish ⎿ v2

Ann · Cursor

> build the compact one in React

⏺ artifact_handoff v2
  ⎿ src/checkout/Pay.tsx
     src/checkout/Done.tsx

Reuse what's already drawn

Screens and components your team made before come back when they fit. The agent finds them, reuses or adapts them, and draws new only what's missing.

You · Claude Code

> add a settings screen to the app

⏺ library_find("settings screen")
  ⎿ reuse Settings · v3, by Ann
⏺ library_reuse ⎿ copied with its source

Point at it. The agent fixes it.

Pin a comment on any element. The agent gets the element, its styles and your words, and answers in the next version.

A comment on the Pay button and Claude Code replying that it is done in v4

Set it up your way

In a terminalInstalls An Artifacts, adds it to your agents and connects your computer.