How Sanity MCP Transformed My Coding Experiences

I've always been a hands-on coder. Give me a keyboard, and I'll type out most of my code manually, relying on the occasional tab completion but rarely letting AI do the heavy lifting. You could say I've been resistant to the "vibe coding" trend—where developers lean heavily on AI assistants to generate substantial portions of code.

But recently, I had an experience that's making me reconsider my stance.

The Challenge: Custom BigCommerce Product Selector#

While working on a client project using Catalyst (a headless BigCommerce solution) with SanityPress and Typegen as a starter template, I needed to create a custom field. The requirement was straightforward but non-trivial: a field that could search BigCommerce products and retrieve their IDs.

This meant building an asynchronous list component that would:

1. Connect to the BigCommerce API
2. Allow searching through hundreds of products
3. Display results with appropriate formatting
4. Return just the product ID when selected

Normally, this would have taken me the better part of a day—figuring out the API connections, handling pagination, building the UI components, and styling everything appropriately.

Enter Claude Code + Sanity MCP Server#

I decided to try something different. I had recently integrated the Sanity MCP (Model Context Protocol) server into both Cursor and Claude Code, and had noticed improved responses. This seemed like the perfect opportunity to put it to the test.

Starting with some basic scaffolding from the Sanity community plugin for async lists, I asked Claude to help me replace the demo endpoint with a call to my BigCommerce products API.

What happened next genuinely surprised me.

The Conversation#

Here's how the conversation unfolded, with my actual prompts. For context, I started by implement a basic copy-pasted scaffolding from the @sanity/sanity-plugin-async-list plugin.

"i have a working scaffolding for an async list. i want to replace the demo endpoint with a call to my bigcommerce products (which can be found somewhere in this same codebase)"

Claude immediately proposed a solution, but we hit a snag with server components. I literally just pasted the logged error:

"Error: × You're importing a component that needs 'next/headers'. That only works in a Server Component which is not supported in the pages/ directory."

It then created an internal Next.js API route to handle client-side fetching (using the existing BigCommerce GraphQL fetcher that comes built with Catalyst).

I expressed concern about handling the volume of products:

"my only concern is the # of products. i have first 50 as the graphql variable but there's going to be over 300 or so"

Claude suggested implementing pagination and cursor-based fetching—a perfect solution I hadn't even explicitly asked for. After fixing some type errors, I wanted to refine the search behavior:

"only initiate searching after 3 characters are typed"

Then I started focusing on the UI:

"there are options under autocompleteProps to display custom results. i want to show the product title as the main and the entityid below it like (entityId). but the resulting JSON should be just the entityId"

Claude implemented this flawlessly. I pushed further:

"can you add a small image preview to the left of the result?"

Without hesitation, Claude added image previews using Sanity UI components—which I hadn't even mentioned.

There were type errors here and there:

fix the type error

This usually fixes it. Or I do this part myself.

Lastly, I requested one final touch:

"it needs a hover state (just add a light gray on the hovered item). use any existing sanity ui components"

That's all. I had a complete, working component with just these rather simple prompts and feedback.

The Result: Mind-Blown 🤯#

The entire process took less than 30 minutes. Claude had:

1. Created an internal Next.js API route to handle client-side fetching
2. Implemented cursor-based pagination for handling large product catalogs
3. Built a custom component for search results with thumbnails and formatted text
4. Used appropriate Sanity UI components for styling and hover states

With minimal adjustments (mostly spacing and type error fixes), I had a production-ready component that would have taken me hours to build from scratch.

Reflections on AI-Assisted Development#

This experience has genuinely changed my perspective on AI-assisted coding. Years ago, building this component would have involved:

1. Researching the BigCommerce API documentation
2. Figuring out the fetching logic and pagination
3. Learning the Sanity UI component library
4. Styling custom input components
5. Debugging various edge cases

Instead, I was able to focus on the requirements and guide the AI through the implementation, resulting in a better solution than I might have created on my own in the same time frame.

The Takeaway#

If you're still hesitant about giving AI agents a shot at building complex UI components, I encourage you to reconsider. Especially for complex UIs and logic like this, the right AI assistant with access to your codebase through tools like the Sanity MCP server can be transformative.

The key is providing good prompts and guiding the agent along the way. You're still the architect and decision-maker, but you have an incredibly capable pair programmer helping you implement the details.

I may not be a full "vibe coder" yet, but I'm certainly more open to the possibilities than I was before this experience. The combination of Claude Code and the Sanity MCP server has proven to be a game-changer for my development workflow.

Let me know your thoughts or your personal experiences vibe coding in the comments below!