How to build connected AI apps with Claude Artifacts

With AI everyone can build. Even if you’re coming from a non-technical background, like design or product. Whether you're building new products or internal tools, you can now create exactly what you need. Missing a feature in your daily tools? Just build it yourself.

At the beginning of the year I participated in the Prototyping with AI Bootcamp, from Harold Dijkstra and Ciara Wearen. For me this was the perfect starting point. With their hands-on approach, live demos and many bite-sized lessons, Harold and Ciara break down all the barriers to getting started. Highly recommended!

Today’s tutorial is an example, which I created with Harold. Follow along and learn how you can build AI-powered apps with Claude Artifacts, and connect them to the tools you use in your daily workflows. 

The next round of the Prototyping with AI Bootcamp starts on 1st of December. Perfect timing to pick up these skills for the year ahead. Click here to join with $100 off.

How to build connected apps with Claude Artifacts

I've always loved Claude Artifacts. With Artifacts, anyone can build apps. They make it so easy to turn ideas into prototypes on the fly. And with Anthropic's latest updates, they're even better! Have you tried them yet?

You can now add AI-powered features to your Artifacts, like generating new content when the user hits a button. In addition to that, you can also connect your Artifacts to other tools now, using MCP. For example with Zapier MCP, which we used last week. This means you can build custom AI-powered tools on top of your existing stack now, to boost your productivity.  

To add AI features to your Artifacts, you can use Antrophic’s own Claude API. This way you can build mini-tools for your team tailored to your specific needs for content generation, analysis or training purposes.

And as you already saw last week, you can give Claude access to over 8,000+ tools using Zapier MCP. Every tool you add to your Zapier MCP Server can be used with your Artifacts as well. 

Time to cook 🧑‍🍳

What I loved most about the Prototyping with AI Bootcamp was Harold and Ciara's guided approach. As they say, you learn by building. The daily bite-sized lessons help you get comfortable with building with AI fast.

Consider this as an example 🙂

We are going to build a LinkedIn Post Generator, to show what's possible with Artifacts today. Based on your prompt and settings, it generates a LinkedIn post that you can publish directly from the Artifact.

1️⃣ Open claude.ai, and login or signup if needed.

2️⃣ Open your settings, navigate to Capabilities and make sure Artifacts are enabled

3️⃣ Now open Artifacts from the menu on the left and click the + New Artifact button on the right to start a new artifact. Select the Apps and websites category or Start from scratch to start building.

4️⃣ Copy the prompt below to get started:

Can you create an artifact for a LinkedIn post generator for me, using Claude to generate the content?

Please include:

1. A form with a text area asking 'What would you like to write about?', dropdowns for post style (Professional, Storytelling, Thought Leadership, Casual, Inspiring) and length (Short/Medium/Long), and a 'Generate Post' button.

2. When clicked, send the topic and preferences to Claude requesting a LinkedIn post with engaging hooks, hashtags, and proper formatting that emphasizes authenticity.

3. Display the generated post in a preview box with 'Copy to Clipboard' and 'Regenerate' buttons.

4. Use clean, professional Tailwind CSS styling with proper error handling and loading states.

5️⃣ Wait until Claude is finished with coding your tool, and then test the Artifact

6️⃣ Now wouldn’t it be great if you could also share the content to LinkedIn right away from inside Claude?

This is now possible! 😃On 21st October Claude added enhanced artifact capabilities, including MCP integrations. To implement this, we are going to use the Zapier MCP Server that you have set up in the previous lesson. If you haven’t already set this up last time, follow the step-by-step guide here. When your Zapier MCP Server is up and running, we are going to add the right LinkedIn tool to it:Go to mcp.zapier.com and login if needed. Open the Claude MCP Server you’ve created last time and click on the + Add tool button to open the menu.

7️⃣ Search for LinkedIn, click on the LinkedIn tool from the results and then select Create Share Update to add to this tool to your MCP server.

8️⃣ Now you have added this tool to your MCP Server, go back to Claude and open the Artifact you are working on to implement this tool. 

First check whether the LinkedIn tool is enabled in Claude: click on the slider icon at the bottom of the chat box, check in the menu that appears whether Zapier is enabled and click > to open the available tools.

If you don’t see the LinkedIn tool yet, it might help to refresh Claude. Or open Settings > Connectors > Configure if you want to check the connection and tool permissions.

9️⃣ Add the following prompt to implement the tool in your post generator:

Can you add another button below the generated post? Call this "Share on LinkedIn". When a user clicks this, use the LinkedIn Create Share Update tool from the Zapier MCP Server to share the generated post on the connected LinkedIn account. 

1️⃣0️⃣ When you test it, you first need to approve that the artifact can access the Zapier connector and the generated post should automatically be shared on your LinkedIn.

1️⃣1️⃣ Use the Publish button in the right top corner in order to share your Artifact with others, like colleagues, clients or prospects. 

Click Publish & copy link to generate the link. Anyone with the link can view your Artifact, but your chat with Claude to generate the artifact will remain private. 

You can also embed the artifact on your website or internal portal. 

1️⃣2️⃣ When you share the link with your colleagues, they will need a Claude account to use it. And don’t worry: usage counts toward each user’s own limits, not yours. In addition to that, other users also need to implement their own Zapier MCP Server and tools, and don’t get access to the accounts you use for the tools that you connected (like your LinkedIn account)If you have a Team or Enterprise plan, you can also just share Artifacts internally, instead of publishing it.

And that’s it! You just built your own LinkedIn post generator 😃

Try it out and post an update on LinkedIn to complete this lesson. Don’t forget to tag us to let us know how it went 😇

Which tools are you going to connect next?

With Claude Artifacts and Zapier MCP you can build custom mini-tools for everything you need to streamline your daily workflows. 

You can find an overview of all the tools that are integrated with Zapier here. Try to find the tools you use a lot, and click to open them to explore all actions that are available for that tool. 

Which tool are you going to connect to your next Claude Artifact?

Learn by doing

If you enjoyed this bite-sized lesson, you’ll love Harold and Ciara’s Prototyping with AI Bootcamp. Like today it’s very action-oriented and hands-on, because you’ll learn the most from doing. And while doing so, the team is ready to help you out whenever you get stuck. 

The next round starts on 1st December, click here to join with $100 off.