Artefact - Setting up MCP Connection with Claude 👋

Payola here.

and here I'm going to talk you through how simple it is to connect any of your AI tools via MCP to Artifact.

now the most common tool I'm sure most of you use is Claude.

And so what I'll do is for the purpose of this exercise is I'll walk you through the process for setting up Claude and connecting it via MCP to Artifact and how super simple it is, and then how powerful it is to be able to create your high fidelity AI designs inside of Claude and then interact, and collaborate on them securely through Artifact.

so first and foremost, once you're logged in, you go to this section up here called AI Tools, which tells you all about the mcp.

Now you can see I already have one agent that I use frequently called Hyper Agent, that's already connected.

so if I just flip over here, you'll see, under the Integrations tab in hyperagent, I've now got Artifact here, already integrated into hyperagent.

And that was as simple as coming down here to the integrations, clicking add, add a custom MCP and then putting in my MCP server details and then it authenticating directly with artifacts.

and it's exactly the same process for connecting claude.

So what we'll do over here, is we take this MCP server, details.

So the URL, we'll copy that and then we'll go across here to Claude.

Customize.

If you click on Customize, then you'll have connectors.

And then if you click on this plus symbol up here to do a custom connector, you add the custom connector and then we'll call the MCP artifact paste in that MCP URL that we copied just before and click Add.

Now what that should do is it'll point you back to the Artifact website where we're already authenticated and logged in.

and then ultimately what it'll do is it'll establish the connection between CLAUDE and the Artifact platform.

and then from there, once it's all established, we're good to go.

So what you'll see here is it's now come across to the artifact website for the approval of the connection.

We approve that connection, Then we go back into Claude and you can see the artifacts MCP connector, now set up and integrated with claude.

And these are the tools that it can call upon when you're interacting and sending, your beautifully designed, HTML artifacts from CLAUDE into the artifact tool to do that secure collaboration.

so I hope that was helpful to get you started with connecting the mcp, between CLAUDE and other tools with artifact.

Cheers.