ProWorks Web Design, Development, and Umbraco Blog

Building with Claude and Umbraco: Setting Up MCP and Creating Content with AI

Thu, 25 Jun 2026 16:00:16 Z

I'll be honest, when Jason first mentioned setting up an MCP server to connect Claude to our Umbraco dev environment, I assumed it was going to be a difficult dev-heavy project that would take the day at least, and be a bit past my coding comprehension ability as a Front End Developer. I even made a new local branch assuming I was going to have to write and commit code.

Nope! It wasn't like that at all. And I'm still a little surprised about it. It was just setting up a config file in Claude and setting up API users in Umbraco.

If you're an Umbraco developer who's been curious about AI-assisted content workflows but figured the setup overhead wasn't worth it, this post is for you. I'm going to walk through exactly what I did, what tripped me up (spoiler: one small thing), and what became possible on the other side of it.

Part 1: What Is the Umbraco MCP Server, Anyway?

MCP stands for Model Context Protocol. It's an open standard that lets AI assistants like Claude connect directly to external tools and services, not just chat about them, but actually interact with them.

The Umbraco MCP server is an implementation of that standard for Umbraco. Once it's set up and connected, Claude can read and write content in your Umbraco instance through the Management API. We're talking creating pages, updating properties, working with block components, the same things you'd do in the back office, but driven by Claude. It's actually pretty amazing to see it work.

Part 2: Setting Up the MCP Server

Before anything else, a quick note on prerequisites. You'll need an Umbraco site to connect to (we're using our dev environment), and Claude Desktop or Cowork installed on your machine. That's really it on the "before you start" front, which was the first pleasant surprise.

The MCP server itself is configured through a JSON config file in Claude. Go to your Claude settings, then Developer, and click the "Edit Config" button to bring up the claude_desktop_config.json file in your favorite editor.

Note: Close Claude completely (including killing it in the taskbar) while working on the config file. If Claude is running, it will overwrite your changes when it closes.

Note: Make sure you're on the latest version of Node before you start.

Drop this into your config file, change the name as you like, change the BASE_URL to your site, and we'll cover the CLIENT_ID and SECRET in the next steps.

"mcpServers": {
  "YOUR-umbraco-dev-mcp-server": {
    "command": "npx",
    "args": [
      "@umbraco-cms/mcp-dev@latest"
    ],
    "env": {
      "UMBRACO_CLIENT_ID": "umbraco-back-office-api-user",
      "UMBRACO_CLIENT_SECRET": "12345-GUID-OR-PASSWORD-6789",
      "UMBRACO_BASE_URL": "https://your-site.io",
      "UMBRACO_INCLUDE_TOOL_COLLECTIONS": "document,media,document-type,data-type"
    }
  }
}

Part 3: Creating an API User in the Umbraco Back Office

This is the part I was most nervous about. "API user" sounds like something that involves a terminal and a lot of Googling. It does not. It's just a few clicks in the Umbraco back office and I was genuinely a little embarrassed by how straightforward it was.

Head into your Umbraco back office and navigate to the Users section. We're going to create both a new User Group and a new API user. First, the User Group. Create one and call it MCP-User-Developer and give it as much control as a developer would. If you ever wanted another group called MCP-User-Editor with less control, you can do that too. For now, add Content, Media and Settings sections and turn on everything you'd like it to have access to.

Next, go to Users and create a new API User. Name it something like "something-mcp-developer" and make it a member of the MCP-User-Developer group we just made. Add an email address for its username and check on access to start nodes (or give it full access).

Now the key step: click the Client Credentials button to add the key we'll need in the Claude config file. The ID will have a prefix of "umbraco-back-office" and then you name it whatever you want. In my example I went with "api-user", so the full ID becomes "umbraco-back-office-api-user". For the Secret, generate a GUID or secure password however you like.

Note: Once you click Create, the password won't be visible again. Save it somewhere before moving on!

Now we have all the info for the config file. Go back and add "umbraco-back-office-api-user" to the UMBRACO_CLIENT_ID and your password to the UMBRACO_CLIENT_SECRET.

Part 4: Connecting Claude to Your Umbraco Site

At this point you've got the config file set up and your API user created. The last step is getting Claude to actually recognize the connection. Save your claude_desktop_config.json file and restart Claude. Go to Settings, then Developer again, and you should see your MCP server listed there and running.

I was stuck here for a bit because I was not on the latest version of Node, and also because I had the UMBRACO_CLIENT_ID wrong. Woops! So make sure your config has all the correct info. But if everything checks out you should see a "running" label next to your server, and you're now connected!

A quick way to confirm everything is working is to just ask Claude something simple about your site. Something like "list the pages under the home node" or "what document types are available?" If Claude comes back with real data from your Umbraco instance, you're in business. As soon as it gave me the ID of the home node of our dev site, I knew things were about to get real.

Part 5: Creating Content with Claude

This is the fun part.

Once Claude is connected to your Umbraco instance, you can start asking it to do real content work. Not just drafting copy in the chat window, but actually creating and populating pages inside Umbraco. I started simple, asking Claude to create a Basic Page under the home node with a title and some body text. It did it. First try. I went and checked the back office and there it was, sitting as a draft, ready to review.

From there I started pushing it further. Our Basic Page document type has a bunch of block components available, things like Feature Boxes, Statistics, Testimonials, FAQ sections, Numbered Steps, and a Two-Column Comparison block. I described what I wanted the page to be about and asked Claude to use as many relevant components as made sense for the content. The results were genuinely impressive, well-structured pages with appropriate blocks chosen for the content, not just a wall of rich text.

A few tips from what I've learned so far:

Give Claude context about your document types. The more it knows about your block components and what fields they have, the better the output.
Keep pages as drafts first. Claude creates content as drafts by default, which is exactly what you want. Review before publishing.
Be specific about tone and content. Claude will make reasonable choices on its own, but the more direction you give it, the closer the first draft will be to what you actually want.
Watch out for placeholder content. Claude may generate fictional quotes or statistics as placeholders. Always review before anything goes live.

One small thing to be aware of: on our setup, pages created via the MCP server sometimes needed the template set manually in the back office before they'd render on the front end. It's a quick fix, just one more thing to check on your first run through.

Part 6: Real-World Use Cases

So what's this actually good for in practice? After spending some time with it, here are the use cases that have stood out most.

Spinning up draft pages quickly. If you've got a list of pages that need to exist, Claude can create and populate them fast. What might take an editor an afternoon of copying, pasting and formatting can happen in minutes. The drafts still need a human review pass, but you're starting from something solid rather than a blank page.

Consistent page structure across a site. When Claude is working from the same document type and block components every time, the output is naturally consistent. Every page gets a hero, a logical block order, appropriate use of the available components. It's a lot harder to end up with that one orphaned page that's formatted completely differently from everything else.

Exploring content strategy. This one surprised me. Being able to say "create a page making the case for upgrading Umbraco and use whichever block components make sense" and get back a fully structured draft is genuinely useful for figuring out what you actually want to say. It's a fast way to go from a topic to a first draft you can react to.

Auditing and rewriting existing content. Claude can read your existing pages too, which means you can ask it to review copy, flag inconsistencies, or suggest rewrites across multiple pages without touching the back office yourself.

Like I said, I knew things were about to get real.

We're still figuring out the best workflows ourselves at ProWorks, but it's already changing how we think about content production. I'm excited to see where it goes from here.

If you have questions or want to share what you've built with it, feel free to reach out.

Alan Ballard, Front End Developer, ProWorks

We're in the list of USWDS powered sites!

Wed, 29 Jun 2022 21:12:38 Z

Building the USDA ARS Scientific Discoveries site using the U.S. Web Design System (USWDS) was a great experience for us, and that work has not gone unnoticed because they've added that site to the list of USWDS powered sites!

This list is a compilation of the best of the best USWDS sites as examples for others to use, and we could not be more happy to be included! I looked through all of these sites when I was gathering inspiration to design the USDA ARS Scientific Discoveries site, and hopefully now I can pass that inspiration forward to the next designer.

we learned much about the USWDS and its "tokens" method of utility classes, and found this is a fantastic system for organizing styles across many sites.

Have a read on our introduction to the USWDS Design Tokens here

The USWDS has the flexibility to create just about any component you'd like to make, while providing the guidelines necessary to stay on the road to designing something that fits the system. Honestly, with a system that has some strict rules, I never felt constrained in my creativity. I had plenty of freedom to create something unique for the Scientific Discoveries team.

Here's a couple other sites we made using the USWDS:

Just thought I'd share this "Proud Papa" moment with you all! Hopefully someday you'll get to dig into the USWDS and work with it or take some ideas from it!

How To Create A Seamless Pattern In Photoshop

Tue, 16 Oct 2012 16:55:58 Z

Recently I had the pleasure of creating a fun background pattern for 60East Technologies' new website. I stumbled across a techique for making a seamless repeating pattern and it went really well! So I deconstructed the pattern I made (from quirky, "techy", hand-drawn elements from 60East's suggestions) and reconstructed it for the purposes of this tutorial. If you have Photoshop, follow along it's easy!

1. Create a new square document with transparent background. 500px by 500px is my example.

2. Turn on smart guides if not already

This will make elements snap and guides appear at certain alignments.

in the top menu, find View / Show / Smart Guides

3. Create a new layer called "square".

On your new layer, using the rectangle marquee tool (M), hold shift and drag to make a perfect square in the middle leaving some space around the edges. It doesn't have to be exactly in the middle, there just has to be some space around the edges.

Pick a nice foreground color. Extra points if it's a soft tomato-y red :)

Fill the square with your foreground color. alt + backspace is my favorite method.

4. Place or draw your first element on a new layer above the square.

You can import image files, Illustrator vector graphics, or simply draw something right there

5. Snap the element to the square

Drag the first element slowly towards one of the edges of the square using the Move Tool(V), and look for the "snap" to the center of the edge. You'll also see the pink guide line show up.

6. Duplicate the first element

Using the Move Tool (V) Hold Alt down while dragging a copy of the first element, also holding down Shift to keep it straight. That's Alt + SHIFT + Drag. Move to the opposite side until it snaps to the center of the edge.

7. Repeat this process for another element on the other sides.

Grab a different element and do the other side

8. Repeat the process until the edges are evenly covered.

Here's where the real magic happens in the seamless nature of your pattern. The more elements that bleed off the edge, the more integrated your pattern will look when tiled.

9. Fill the inside

Import or create more elements filling the interior of the square as you like. Play with size and rotation to give your pattern variety.

10. Select the Square

Ctrl + click the layer with the square to select it

11. Define the Pattern

Go Edit / Define Pattern and choose a name for it.

12. Try out your new pattern!

Create a new document any size you like. Use the Paint Bucket tool (G) and choose the "Pattern" option in the top toolbar. Find your saved pattern in the list, select it, then click the canvas to fill with your new pattern!

I hope you found this tutorial useful! I know I'll be using this technique again, coming up with new and interesting patterns.

If you have any questions please ask!

Using Style Tiles to Start a Web Design Project

Tue, 31 Jul 2012 19:52:41 Z

My process for kicking off a new web project used to involve a round of wireframes to nail down the layout, then a few iterations of design mockups based on those wireframes to nail down the look and feel. What I've found is this approach only works great when the client is already solid on how they want thier content to be presented. For us this scenario is actually pretty rare so I've begun a new technique for kicking off web design projects using "Style Tiles" to get design ideas across in a much simpler, easily digestable way.

"Style Tiles" are quick snippets of web design patterns meant to convey an overall feeling of the design rather than defining specifics. A Style Tile can include background colors / patterns, font choices, and examples of button and navigation styles. Often with the wireframe-first process, the client feels like they're getting to the final result too quickly and without much input on thier part. So by using Style Tiles before any wireframing or specific elements are decided, the client can take part in the look and feel decisions and become more involved in the fun part of the process. And without having to adhere to a set of layout and content requirements I can bust out 2 or 3 of these relatively quickly. Nothing besides a stick in the eye hurts worse than spending days on a design only to end up back on the drawing board.

The Photoshop template can be downloaded from http://styletil.es/ and the creator Samantha Warren has a great design philosophy to go with it. She also has a fantastic article about http://www.alistapart.com/articles/style-tiles-and-how-they-work/ Here's what the template looks like:

Here's two Style Tiles I created for a recent project:

This way we can focus on the design and I can get awesome feedback like this. It probably looks silly but it says more to me than a string of emails.

And with one iteration in this case we landed on the accepted look and feel.

Now what we have is a FRAMEWORK for design that can grow as the project evolves, and adapt to many screen sizes if coded responsively.

However, this new process leaves me with a question: How closely should the end result need to stick to the Style Tile? Say, down the road I decide to change a font, is that a no-no? Should the Style Tyle be a loose guideline or a rulebook? So far I've been keeping it loose.