15:22Brock Mesarich | AI for Non Techies · Tutorial
Claude Fable 5 Just Changed How We Get Customers Forever
A 15-minute live demo turning Claude into an autonomous lead machine with Clay, Gmail, and a free email-voice skill.
June 11thThe argument in one line.
Claude Code Artifacts turn a session's raw output into a permanently-live, auto-updating web page that any team member can open, removing the status-update cycle between the person using AI and everyone watching from the outside.
Read if. Skip if.
READ IF YOU ARE…
- You use Claude Code on a Team or Enterprise plan and spend time writing status updates or explaining AI output to colleagues who never touch the terminal.
- You already use Claude connectors or MCPs (Gmail, Slack, Calendar, Zapier) and want to surface that data as a shareable dashboard rather than a raw chat log.
- You are a solo operator whose clients or collaborators need visibility into AI-assisted workflows without logging into Claude themselves.
SKIP IF…
- You are on the free or Pro plan — the feature is currently beta-gated to Team and Enterprise ($150/mo).
- You have no collaborators; the primary unlock is async visibility for others, not solo productivity improvements.
The full version, fast.
Claude Code now generates Artifacts — live HTML pages at a private share link — built from the full context of a session, including the codebase, connected apps via MCPs, and the conversation itself. The key differentiator from plain HTML export is 'always share latest version': the link auto-updates when the underlying work changes, so there is no re-sending loop. The video demos two use cases: converting a complex competitor-scraping workflow into a readable dashboard, and building a team availability page that pulls live from Gmail and Google Calendar. For apps without a native connector, Zapier MCP bridges the gap in a few clicks.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 01:24
01 · Cold open — Artifacts tab demo
Host shows two existing artifacts already in Claude Code desktop; introduces the new Artifacts tab sidebar.
01:24 – 01:42
02 · Announcement tweet
Anthropic tweet: 'Interactive pages built from your session, shared with your team at a private link.'
01:42 – 02:00
03 · Access + cost caveat
Beta only on Team and Enterprise plans; host paid $150 to demo this for the video.
02:00 – 03:48
04 · Why live shareable pages change the game
Anthropic blog walkthrough; 'always share latest version' auto-sync mechanic explained.
03:48 – 05:53
05 · Example: competitor-scraping dashboard
Raw Claude Code text output vs. polished artifact dashboard; demonstrates share flow and live-update mechanic.
05:53 – 06:41
06 · Building an artifact from scratch
Natural-language prompt to build a Gmail + Google Calendar team-availability dashboard.
06:41 – 08:18
07 · Connecting apps via connectors + Zapier MCP
Native connectors for Gmail and Calendar; Zapier MCP walkthrough for Buffer (no native connector).
08:18 – 08:58
08 · Finished artifact — team availability
'Brock is free' dashboard: real-time meeting count, unread emails, calendar day-at-a-glance, best contact windows.
08:58 – 09:40
09 · Share flow + outro
Add team members by email, copy link, grant org-wide access. Subscribe, description link, School community CTAs.
Lines worth screenshotting.
- Claude Code Artifacts differ from claude.ai artifacts in one critical way: they carry the full session context — codebase, MCP connectors, and conversation history — not just an isolated code snippet.
- The 'always share latest version' toggle means a shared artifact link never goes stale; recipients see the current state of the work automatically.
- The practical prompt structure for building an artifact is three parts: the data sources, the intended audience, and what they need to decide — Claude infers the dashboard layout from that.
- Native connectors (Gmail, Calendar, Slack) require only a few clicks to activate; Zapier MCP covers the remaining long tail of apps that lack a native connector.
- The feature's value scales directly with team size: solo builders get a cleaner self-view; teams eliminate an entire category of status-update communication.
- A complex AI workflow that produces walls of terminal text can be translated into a readable dashboard with a single natural-language prompt — no HTML knowledge required.
- The share flow requires recipients to be on the same Team or Enterprise plan; external clients or free-tier users cannot access shared artifact links.
- Artifacts are session-aware, not file-aware: Claude pulls from conversation history and connected app data, not just the files in the working directory.
- The contrast between plain HTML artifacts (locally viewable) and Claude Code Artifacts (hosted, live-updating) is the difference between a report and a dashboard.
- Zapier MCP is a one-time setup: connect it once, and all the apps you add there become available as data sources for any future artifact prompt.
Live artifacts replace status updates, not just reports.
WHAT TO LEARN
The most underrated part of Claude Code Artifacts is not the dashboard itself — it is that the link stays current automatically, which removes the entire loop of re-sending updated outputs to teammates.
- Artifacts update in real time via an 'always share latest version' toggle, so a link sent once remains accurate — the recipient never needs a new link when the work changes.
- The feature's value scales with team size: a solo builder gets a cleaner view of their own output; a team eliminates a whole category of status-update communication.
- Native connectors (Gmail, Calendar, Slack) activate in a few clicks inside Claude; Zapier MCP bridges the remaining long tail of apps that lack a native connector, and requires only one setup session.
- The practical artifact prompt structure is three parts: name the data sources, name the intended audience, and name what they need to decide — Claude infers the dashboard layout from that context.
- Access is currently gated to Team and Enterprise plans; before paying the upgrade cost, determine whether the async-visibility problem is actually costing meaningful time in your current workflow.
Terms worth knowing.
- Claude Code Artifacts
- Live, shareable HTML pages generated from a Claude Code session, hosted at a private link and auto-updated when the session's work changes. Available in beta on Team and Enterprise plans.
- Connector
- A first-party integration inside Claude that grants access to a specific app (Gmail, Google Calendar, Slack) so Claude can read and write to it during a session.
- MCP (Model Context Protocol)
- An open protocol that lets external tools and services expose their capabilities to AI models. Claude Code uses MCPs to extend its reach beyond built-in connectors.
- Zapier MCP
- Zapier's MCP server that acts as a bridge between Claude and any app in Zapier's catalog, allowing Claude to read from and write to thousands of third-party services that lack native connectors.
- Always Share Latest Version
- A toggle in the Claude Code Artifacts share dialog that ensures any link recipient always sees the most current version of the artifact without the owner needing to re-share.
Things they pointed at.
Lines you could clip.
03:20
“Artifacts translate the work into a web page anyone can open and explore.”
05:23
“Claude Code builds an artifact using the full context of our session, including our codebase, connectors, and the conversation itself.”
05:31
“Artifacts make it easier to collaborate on shared work so teams can spend more time building and less time communicating status updates.”
08:29
“When I give them the link to this, they could see live information, which is the exact same information I can see.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphor
00:00Anthropic just dropped artifacts directly inside of Claude Code. This is a really interesting feature if you are a Claude Code user. This is slightly different from Claude Cowork artifacts and normal Claude chat artifacts.
00:11So in this video, we're gonna break down what this means for you if you're a Claude user. I'm gonna show you it live in action with a couple of different use cases, as well as you're gonna see how you can now share artifacts inside of Claude with your team with live information across your code base and all the different applications that you use on a day to day basis.
00:29Alright. So I, first of all, wanna show this in action, just a quick little example. So I came to Claude code.
00:34As you could see, you were in Claude code, not Cowork, and I said, create an artifact explaining the new Claude code artifacts compared to the claude.ai app. And then now we actually have this artifact that lives on the right hand side of our screen.
00:48You could see I have one in this style, and then I have another one, um, in this style as well as we can now see we have an artifacts tab right here that we did not have prior inside of Claude Code in the desktop app. So if I click on this, you can now see I have two artifacts that are living here that I just created a couple of minutes ago.
01:06I can click on create new artifact. And, basically, inside of this text box here, we could just explain what it is we wanna turn into an artifact, and then it will create it. So we'll come back to this, but I first wanna talk about how this works and some of the key differentiating features that makes this really interesting compared to the other Claude artifacts that we had before this.
01:24Alright. So first of all, here is the tweet announcement from Anthropic. It said new in Claude code artifacts.
01:31Interactive pages built from your session like a PR walk through or a live project dashboard shared with your team at a private link, and this is one of the key things that really makes this a game changer, so to say, when it comes to artifacts. I do wanna I do wanna preface that this is available in beta only on team and enterprise plans as of right now.
01:51I personally had to pay a 150 to get access to this on the team plan so I could show you in this video. So if you could do me a favor and subscribe to this channel for more content like this, it would really help me out.
02:01Now if I pull up the article they gave us on the new claw to code artifacts, I'm gonna break down some of the key things here, um, that we need to understand. Right here, it says, starting today, Claude code can capture work progress as an artifact, which turns Claude code's work into live, shareable visual pages if you've never used an artifact before.
02:21They're basically interactive dashboards that you could create that you could run inside of your Claude desktop app or inside of the claude.ai application that that you can access on the web browser. What I have highlighted right here is kind of the key topic for this release.
02:36Artifacts can translate the work into a web page anyone can open and explore. This is really powerful if you are using ClotCode with your team, for example, because what you could do is you could take all of the work from your previous applications that you're connected to via your connectors or MCPs, and you could pull all of that data into a artifact that you could share with your team so they could see what it is you're working on not only inside of Claude and your code base, but also inside of the apps that you're using, whether that is Gmail or Slack, Google Calendar, all those different things.
03:08We can now pull from our entire workspace to create interactive dashboards for our team to look at. Artifacts make it easier to collaborate on shared work so teams can .
03:24Again, just like I said before, Cloud Code builds an artifact using the full context of our session, including our code base connectors and the conversation itself. So let's say we were working on a pretty comprehensive task or we had a huge chat conversation with Claude Code. We can now share that as an artifact to our team so they could see what we're working on to provide context, and we could have it in a very structured dashboard that looks really clean and simple.
03:48Alright. So to give you a perfect example, right here, I have this conversation to have with Cloud Code. I said create an artifact explaining how we are scraping competitors' content so I could share it with my team.
03:59Then what it did is it pulled through all of the different skills and workflows and databases we're pulling in order to scrape content out there, and this is a pretty complex task that I have Cloud Code do. Now on the right hand side, this is the text output. And as you could see, this is kind of a bunch of gibberish right here.
04:18It's breaking down the data files and storage, and this is just a bunch of text for us to read through. And this isn't pleasing to the eye, um, and there's a better way to do this now using artifacts. So what I did is I created that artifact called competitor scraping explained that lives right here.
04:33I could open it up. Now on the right hand side, we can see this artifact, which acts as an internal dashboard explaining all that gibberish into a much more digestible format that we could see right here.
04:45So it breaks down these specific Apify tools that we're using here that my team can understand. It shows the daily flow, the step by step process on how it's actually scraping for content ideas. And then it's even showing how topics get scored in order to in order to figure out which ideas we should actually turn into content.
05:02Now this is great, and this is great for me and internal use. We could have just spun up a normal HTML that we could view locally on our device inside of Cloud Code.
05:13But what makes this really interesting is we could click share, and we could now share this with anybody on our team plan. When I give them the link to this, they could see live information, which is the exact same information I could see.
05:25So let's say I make a change to this workflow here. It would then automatically pull the changes that we've made to this artifact, not only for me, but for my team member that has access to it.
05:37Because as you could see, it shows always share latest version, so it's always gonna update in real time. So you don't need to constantly go back and forth and make sure it's up to date. And then if I come back and click on artifacts, we should now see this living directly inside of here, how we scrape competitors' content.
05:53Alright. So let's now build an artifact from scratch so you could see exactly how this works. This is gonna pull from a couple of different apps that we connect to Claude so you could see the power when we combine it with the applications we're using in order to pull real live information across our different workspace and not just the code bases that we're working inside of.
06:10I'm gonna come over to artifacts, click on new artifact, or we could simply just type in what we wanna build. So let's do that now.
06:16I want you to build me an artifact that automatically pulls from my Gmail and my Google Calendar so that way my team can see what's on my calendar and my docket for the day so that way they don't always bother me because they could see how busy I am. I want them to see when free time is for them to actually speak with me.
06:34This is gonna be a universal dashboard our entire company. And while it's doing that, we need to make sure to configure the apps that we wanna add. So first of all, we're gonna come over to customize.
06:43Click on connectors. I'm simply going to browse the connectors and select Gmail. I'm gonna click on connect, and now I have Gmail connected.
06:52From here, I'm just gonna click on always allow for permissions. So it doesn't always ask if, you know, it could go ahead and, you know, create emails for me, read my emails, etcetera. Then I'm gonna do the same thing for Google Calendar.
07:03Now let's say there is an app we wanna connect to that we do not see in this list right here. I'm gonna show you how you could do that right now. So I wanna connect to something called Buffer, which is basically a scheduling platform where my team and I schedule content for me for Instagram, LinkedIn, TikTok, etcetera.
07:18And I wanna be able to pull information from that. So what I could do is since there is no connector here, I could use something called Zapier MCP, and let me show you exactly how that works. So if you don't know what this is, this is basically an automation platform, and they have an MCP in order to bridge the gap between all the different apps you use and things like Clawd, OpenClaw, Hermes agent, all those different AI applications.
07:39What I'm gonna do is sign up for an account. I already have one, and what I'm gonna do is click on new MCP server. And, you guys don't need to do this.
07:45This is only if there's an app you wanna connect to. You can't do directly inside of Claw. Now I have all these apps already connected.
07:52We have Buffer already added here. And in order to add an app, we just click on add app. I would search up Buffer.
07:59Simply select this, toggle it on, select all tools, click add tool, and then we can now access information across this app and do things on that app as well. Then I'm just gonna select connect, click add to Claude, and we now have Zapier connected so I can now use Buffer and take a look at all the posts I have scheduled along with my team.
08:18Alright. So this is pretty cool. You can now see that it created this dashboard for us.
08:23It shows that I'm available right now. Brock is free. No meetings on the books today.
08:28This is the best window to catch up with It then shows how many unread emails I have so my team could see, okay, maybe Brock is busy even if he doesn't have a meeting right now. Obviously, it shows my week and day at a glance right here, which is pretty cool. It even shows the best times to reach me, everything that's going on inside of my email inbox.
08:45So this is a very random example. I just wanted to show you how we can now share this with our team so they could see what's going on across all the different applications we're using. Or you could do the same with, you know, the code bases you're working inside of so your team could see what it is you're working on day to day.
08:58So if I wanted to share this, I just click share. I would have to add in the email of somebody in my workspace. And mind you, they need to be somebody that is on my team's plan.
09:07And if they're not, they won't be able to access this. And then I click copy link and can send it to them directly. Obviously, I'd have to come here and grant access to everyone inside of the Brock Messerich organization.
09:17So if one if I wanted anyone to see that, then I would just go ahead and grant that and then copy the link to share with them. Now there we have it. That's a new ClaudeCode artifacts.
09:26You If guys wanna try it out, there will be a link in the description. If you want more content like this, subscribe to the channel. And if you wanna dive deeper with Claude and how to use AI as a non techie, make sure to join my school community.
09:35There is a link in the description below. Hope you enjoyed, and I'll see you guys in the next video. Peace.
The Hook
The bait, then the rug-pull.
Anthropic shipped a quiet feature update that changes how teams share AI work: Artifacts inside Claude Code. Not the static kind from claude.ai — these are live, session-aware dashboards that update automatically and live at a private link anyone on your team plan can open.
Named ideas worth stealing.
02:00concept
Artifact vs. Export distinction
Plain HTML export = locally viewable, static. Claude Code Artifact = hosted, live-updating, session-context-aware. The difference is async team visibility.
Steal forExplaining why AI output sharing needs to be live, not file-based
06:41model
Two-tier integration model
- Native connectors (first-party: Gmail, Calendar, Slack)
- Zapier MCP (bridge: any app in Zapier catalog)
Connect first-party apps via native connectors; bridge everything else via Zapier MCP. One-time setup per app.
Steal forExplaining MCP integration strategy to non-technical audiences
How they asked for the click.
VERBAL ASK
09:30subscribe
“If you want more content like this, subscribe to the channel. And if you wanna dive deeper with Claude and how to use AI as a non techie, make sure to join my school community.”
Standard triple CTA: subscribe, description link, School community. Delivered at the end after the feature demo is complete — no mid-video pitch.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
