--- title: "Claude Code Artifacts: What They Are and 6 Ways to Use Them" date: "2026-06-25" author: "Graham" description: "Claude Code Artifacts turn a coding session into a shareable, auto-refreshing page: PR walkthroughs, dashboards, and visual code explainers. What they are and 6 uses." tags: ["Developers", "Power of AI"] url: "https://powerofai.ca/claude-code-artifacts" readTime: "7 min" --- # Claude Code Artifacts: What They Are and 6 Ways to Use Them On June 20, 2026, Anthropic's Claude account showed off a new feature called Claude Code Artifacts. The post got a lot of attention (about 17.7k likes), and Boris Cherny, who created Claude Code, endorsed it. The short version: you can now turn a Claude Code session into an interactive web page and share it with your team at a private link, and that page keeps updating as the session keeps working. If you have used Claude Code, you already know it lives in your terminal. It reads your files, writes code, runs tests, and iterates. Artifacts are about the other half of the job: showing other people what happened, what changed, and why, without making them read a wall of terminal output or clone your branch. This is a news-plus-how-to piece. First, what the feature actually is. Then six concrete ways to use it. Then an honest note on what it is not. ## Quick picks - **What it is: A shareable page from your session.** Claude packages the context it already has, the files, changes, and commands, into an interactive page a human can read. - **The key trick: It auto-refreshes.** While the session keeps working, the link updates. A teammate watching it sees progress without you re-sending anything. - **Availability: Beta, Team and Enterprise only.** As of June 20, 2026 it is in beta on Team and Enterprise plans. Pro and Max users may not see it yet, and beta features change. - **Best first try: A PR walkthrough.** The cheapest experiment: next pull request, send your reviewer an Artifact link instead of a paragraph and see if review goes faster. ## The one-line version A Claude Code Artifact is an interactive page that Claude builds from your session. It can be a pull-request walkthrough, a living project dashboard, a visual explanation of tricky code, a diagram, or a data analysis. You share it at a private link, and the link auto-refreshes as the session keeps working. So instead of pasting screenshots into Slack or writing a long summary by hand, you point Claude at the work and say "make a page that explains this," then send the link. ## What it actually is Here is the plain-English breakdown. The examples Anthropic highlighted were a PR walkthrough, a living project dashboard, visual explanations, diagrams, and data analyses. Those map cleanly onto real work, which is why the six use cases below are mostly just those examples made specific. - It is generated from your session. Claude Code already has the context: the files it read, the changes it made, the commands it ran. An Artifact is Claude packaging that context into something a human can look at. - It is interactive, not a static screenshot. Think a small web page, not a PDF. It can hold diagrams, walkthroughs, tables, and visual explanations. - It lives at a private link. You share the link with your team rather than publishing it to the world. Treat the link itself as the access control: if someone has the link, assume they can see it. - It auto-refreshes. This is the part that makes it more than "export to HTML." While the session keeps working, the page updates, and a teammate watching the link sees progress without you re-sending anything. ## Availability: this is a beta, on specific plans Set your expectations here before you go looking for the button. As announced on June 20, 2026, Claude Code Artifacts are in beta and limited to Team and Enterprise plans. If you are on a personal Pro or Max plan, you may not see it yet. Beta also means the feature can change, and some of what is described today may look different by the time it is generally available. So if you read this and cannot find it in your own Claude Code, that is expected. Check your plan, and check whether your workspace has the beta turned on. This is a "watch this space" feature for a lot of people, not a "use it this afternoon" feature. ## 1. A PR walkthrough for your reviewer This is the headline use case, and for good reason. Code review often stalls because the reviewer has to reconstruct your intent from a diff. An Artifact lets Claude explain the change in order: what problem it solves, which files moved, why each decision was made, and where the risky parts are. The honest caveat: a walkthrough is the author's explanation, generated from the author's session. It is a guide to the change, not an independent review. Your reviewer still has to actually review. Use the prompt below to try it. ## 2. An onboarding page for a new developer When someone joins, the slow part is not the code, it is the map: how the project fits together, where the important files live, how to run things locally. You can have Claude build an Artifact that walks a new dev through the codebase. Because the page auto-refreshes, you can keep the session open and refine it as the new person asks questions, instead of editing a stale wiki page. The prompt below is a starting point. ## 3. A dashboard for a non-technical stakeholder Your manager or client does not want a terminal log. They want "where are we, and is it on track." A living project dashboard Artifact can show progress in language a non-coder can read: what is done, what is in progress, what is blocked, and what is next. The auto-refresh matters most here. You send the link once, and the stakeholder can check it whenever they want instead of asking you for updates. The prompt below sets it up. ## 4. A visual explanation of tricky code Some code is hard to hold in your head: a state machine, an auth flow, a gnarly recursive function, a data pipeline with five stages. Ask Claude to build an Artifact that explains it visually, with a diagram plus a step-by-step trace. This is useful for your future self too. Six months from now, that page is faster to read than the code. The prompt below uses an auth flow as the example. ## 5. Comparing a few UI or animation options When you are trying out variations, for example a few button animations or two layout options, describing them in text is painful. An Artifact can show the options side by side so a teammate or designer can pick. This turns a "can you hop on a call to look at these" into a link someone reviews on their own time. The prompt below compares loading-spinner options. ## 6. A data analysis you share with a teammate If you have used Claude Code to crunch a CSV, query a database, or analyze logs, the result usually ends up trapped in your terminal. An Artifact can hold the analysis as a readable page: the question, the method, the tables or charts, and the caveats. Same honesty rule as everywhere else on this site: the analysis is a draft to discuss, not a verdict. Make sure the "limitations" section is real, not decorative. The prompt below builds the analysis page. ## What Artifacts are not A few expectations worth setting, so nobody gets burned. - Not a public publishing tool. This is a private link for your team, not a CMS or a marketing site. Do not treat the link as secret-grade security either; if someone has it, assume they can read it. - Not a replacement for code review. A PR walkthrough explains the author's reasoning. It does not catch the author's bugs. A human, or a separate review pass, still has to look critically. - Not a source of truth you can stop checking. An Artifact is generated by an AI from a session. It can summarize wrong, miss a file, or describe what the code was supposed to do rather than what it does. Spot-check anything that matters, the same way you would with any AI output. - Not available to everyone yet. As of June 20, 2026 it is beta, Team and Enterprise only. Features in beta change. ## Why this is worth watching The interesting shift here is not the page itself. It is the auto-refresh. As coding agents do more of the long-running work, the bottleneck moves to communication: keeping reviewers, teammates, and stakeholders in the loop without a human writing status updates all day. An Artifact that updates itself while the agent works is a small but pointed answer to that problem. If you are on a Team or Enterprise plan, the cheapest first experiment is the PR walkthrough. Next time you open a pull request, ask Claude to build the walkthrough Artifact and send your reviewer the link instead of a paragraph. See whether the review goes faster. If it does, the rest of the use cases follow naturally. ## Copyable prompts ### A PR walkthrough for your reviewer ```text Build a PR walkthrough Artifact for the changes on this branch. Walk a reviewer through it in this order: 1. The problem this PR solves, in two sentences. 2. The main files changed and what each change does. 3. The trickiest part of the diff and why I did it that way. 4. What I tested, and what I did NOT test. Link to the specific lines where it helps. ``` ### An onboarding page for a new developer ```text Build an onboarding Artifact for a developer who just joined this repo. Include: a plain-English overview of the architecture, the 5 files they should read first and why, how to run the app and the tests locally, and the 3 gotchas most likely to trip them up. Keep it skimmable. ``` ### A dashboard for a non-technical stakeholder ```text Build a project dashboard Artifact for a non-technical stakeholder. Show: features complete, features in progress, what's blocked and why, and the next milestone. No code. Plain English. Update it as we work. ``` ### A visual explanation of tricky code ```text Build a visual explanation Artifact for the auth flow in this codebase. Include a diagram of the steps from login request to issued token, then walk through what happens at each step and which file handles it. Call out the two places this is most likely to break. ``` ### Comparing a few UI or animation options ```text Build an Artifact that shows the three loading-spinner options we just prototyped, side by side, each with a short note on the trade-offs (performance, accessibility, how fussy it is to maintain). Let me share the link so the designer can pick one. ``` ### A data analysis you share with a teammate ```text Build a data analysis Artifact from the query we just ran. Include: the question we asked, how the data was pulled, the key findings as a short list, one or two simple charts, and the limitations of this data. I want to share it with a teammate. ``` ## Related Power of AI pages - [Claude Code vs Codex](/claude-code-vs-codex): How the agent coding race looks from the developer workflow side. - [What Is an AI Agent?](/what-is-an-ai-agent): The foundation for why long-running agent work needs better ways to share progress. - [The Signal: The Week Claude Got Too Powerful to Stay Boring](/the-signal/ai-week-june-14-2026): Recent Claude Code and frontier-model context from the weekly roundup. ## Sources and official references - [Anthropic (@claudeai) announcement of Claude Code Artifacts, June 20, 2026](https://x.com/claudeai/status/2067671912038240487) - [Boris Cherny (@bcherny), creator of Claude Code, endorsing the feature](https://x.com/bcherny/status/2067700226669060207) - [Claude Code documentation](https://docs.anthropic.com/en/docs/claude-code)