# Course: AI-powered Sanity development https://www.sanity.io/learn/course/code-with-ai With its all-code configuration, AI tools make Sanity a perfect choice as a content backend, and developers of varying levels of experience—including those with none at all—greatly benefit from AI tooling. Do it the right way for the best results, take on more ambitious projects, lower the barrier to entry and create happier content authors. --- ## Navigation ## Contents 1. [The present future of Sanity development](https://www.sanity.io/learn/course/code-with-ai/the-present-future-of-sanity-development) · [markdown](https://www.sanity.io/learn/course/code-with-ai/the-present-future-of-sanity-development.md) 2. [You don't need this course](https://www.sanity.io/learn/course/code-with-ai/you-dont-need-this-course) · [markdown](https://www.sanity.io/learn/course/code-with-ai/you-dont-need-this-course.md) 3. [The value of working with AI](https://www.sanity.io/learn/course/code-with-ai/the-value-of-working-with-ai) · [markdown](https://www.sanity.io/learn/course/code-with-ai/the-value-of-working-with-ai.md) 4. [Glossary of terms](https://www.sanity.io/learn/course/code-with-ai/glossary-of-terms) · [markdown](https://www.sanity.io/learn/course/code-with-ai/glossary-of-terms.md) 5. [Prompting primer](https://www.sanity.io/learn/course/code-with-ai/introduction-to-prompting) · [markdown](https://www.sanity.io/learn/course/code-with-ai/introduction-to-prompting.md) 6. [Voice dictated prompts](https://www.sanity.io/learn/course/code-with-ai/voice-dictated-prompts) · [markdown](https://www.sanity.io/learn/course/code-with-ai/voice-dictated-prompts.md) 7. [Cursor IDE](https://www.sanity.io/learn/course/code-with-ai/writing-code-with-ai-assistance) · [markdown](https://www.sanity.io/learn/course/code-with-ai/writing-code-with-ai-assistance.md) 8. [Claude Code](https://www.sanity.io/learn/course/code-with-ai/claude-code-ide) · [markdown](https://www.sanity.io/learn/course/code-with-ai/claude-code-ide.md) 9. [OpenAI Codex](https://www.sanity.io/learn/course/code-with-ai/openai-codex-ide) · [markdown](https://www.sanity.io/learn/course/code-with-ai/openai-codex-ide.md) 10. [Add best practice skills](https://www.sanity.io/learn/course/code-with-ai/agent-toolkit-skills) · [markdown](https://www.sanity.io/learn/course/code-with-ai/agent-toolkit-skills.md) 11. [Give your AI the full picture](https://www.sanity.io/learn/course/code-with-ai/import-the-sanity-documentation) · [markdown](https://www.sanity.io/learn/course/code-with-ai/import-the-sanity-documentation.md) 12. [Connect to the Sanity MCP server](https://www.sanity.io/learn/course/code-with-ai/rapidly-generating-placeholder-content) · [markdown](https://www.sanity.io/learn/course/code-with-ai/rapidly-generating-placeholder-content.md) 13. [Define your project specifications](https://www.sanity.io/learn/course/code-with-ai/creating-a-prd-with-ai) · [markdown](https://www.sanity.io/learn/course/code-with-ai/creating-a-prd-with-ai.md) 14. [Initialize a new Studio](https://www.sanity.io/learn/course/code-with-ai/initialize-a-new-studio) · [markdown](https://www.sanity.io/learn/course/code-with-ai/initialize-a-new-studio.md) 15. [Create schema types](https://www.sanity.io/learn/course/code-with-ai/create-schema-types) · [markdown](https://www.sanity.io/learn/course/code-with-ai/create-schema-types.md) 16. [Automatically generate content](https://www.sanity.io/learn/course/code-with-ai/create-placeholder-content) · [markdown](https://www.sanity.io/learn/course/code-with-ai/create-placeholder-content.md) 17. [Initialize a new front end](https://www.sanity.io/learn/course/code-with-ai/adding-sanity-content-to-any-front-end) · [markdown](https://www.sanity.io/learn/course/code-with-ai/adding-sanity-content-to-any-front-end.md) 18. [Continuing to build](https://www.sanity.io/learn/course/code-with-ai/building-more-routes) · [markdown](https://www.sanity.io/learn/course/code-with-ai/building-more-routes.md) 19. [AI-unassisted quiz](https://www.sanity.io/learn/course/code-with-ai/ai-unassisted-quiz) · [markdown](https://www.sanity.io/learn/course/code-with-ai/ai-unassisted-quiz.md) --- ## Lesson 1: The present future of Sanity development https://www.sanity.io/learn/course/code-with-ai/the-present-future-of-sanity-development Coding is no longer just for developers, however AI won't "do it all." Level-set your expectations on what AI tooling can and can't do for the pace and quality of development. With its all-code configuration, thanks to AI-assisted development you can rapidly build Sanity-powered applications faster than low-code or no-code tools, which require hundreds of clicks in a browser to complete. > [!NOTE] > The videos in this course are also available as a full-length walkthrough, watch [Build web apps with your voice and Cursor](https://youtu.be/j6zrfJ56KYE) on YouTube. However without guidance AI tools will not write excellent code. Among other problems, this can lead to a Sanity Studio configured only with the defaults and will not provide the best possible experience for your content creators. While most AI tools understand the APIs Sanity makes available, they will not follow our opinionated best practices. Nor have they—like human developers—formed their own. We have! They're published in guides and courses on Sanity Learn and when followed lead to great implementations. ## What you'll learn In this course, you'll be onboarded to simple AI tools to level-up your ambition to build content-driven web applications. This course covers how to: - Write prompts that get desired results - Understand what makes a great "prompt" - Setup the AI-powered code editor, Cursor - Apply best-practice skills to guide the responses to your prompts - Setup the Sanity MCP server to connect AI to your content - Rapidly build a new web application front-end ### What you may already know People who have never written code before have successfully completed this course! These lessons are less about being technically demanding and more about introducing how to most efficiently develop by using AI tools. You will benefit by having some amount of understanding of web application development and some appreciation for Sanity, the Content Operating System. In short: Sanity offers a hosted backend—the Content Lake—and an all-code administration dashboard called Sanity Studio. Along with many more features. If you have any other questions, ask your favorite AI tool. > [!TIP] > If you would prefer to learn Sanity's feature set more deeply with less of an AI focus, take the [Day one content operations](https://www.sanity.io/learn/course/day-one-with-sanity-studio) course. ## Why we wrote this course Whether you’re a seasoned programmer, a rookie developer, or a complete novice—you may have formed some opinion on AI tools. I’m a 10+ year web developer and recently reformed AI cynic who has seen the light that our futures involve AI tooling, and there’s no going back. If you’re new to programming, welcome! There’s never been a better time to dip your toe in the water. AI tools will do all the work writing things you haven’t learned yet. You’ll get started faster than ever before and get to focus purely on the outcomes that you want—less so on the code. On the other hand, if you have programming experience, I hope that this course will show you how to work faster, better and with more ambition with AI-tooling. ## More reading Beyond the material presented in this course, I recommend reading the following valuable, hype-free content: > [!TIP] > [Get started with AI-powered Sanity development](https://www.sanity.io/learn/ai/ai-quickstart) > [!TIP] > [How I use LLMs to help me write code](https://simonw.substack.com/p/how-i-use-llms-to-help-me-write-code) by Simon Willison > [!TIP] > [The AI Engineer Roadmap](https://www.aihero.dev/ai-engineer-roadmap) by Matt Pocock --- ## Lesson 2: You don't need this course https://www.sanity.io/learn/course/code-with-ai/you-dont-need-this-course You could build something with AI in the time it takes to complete this course. You'd probably not learn much though. It's true. You could go to Cursor, Claude, or ChatGPT right now and ask it... ```:Prompt How do I make a website with Sanity? ``` ...and it will give you an answer. You'll make progress. You'll have to keep asking questions. You'll copy and paste code from a web browser into some other format. You'll probably get frustrated along the way. Maybe the context window will fill up. And while you'll make progress, it's not the sort of progress that's sustainable, nor will it lead to a best practice implementation. So you don't need this course, but it will help greatly. I want to set you up with the best possible coding environment so that the project that you begin today, you will be able to maintain well into the future. This course will give you a better understanding of not just how to author code, but how to prompt an LLM to write code on your behalf—and get the result you want. Completing this course will give your Sanity implementation a huge head start. Instead of just being given install instructions for a bare bones template, you'll be working with an LLM that will be pre-trained on the best way to implement and work with Sanity, The Content Operating System. That's the reason why this course contains many lessons that set the foundations of your project instead of just diving into an install script. A little preparation now is going to pay dividends soon. Just you wait and see. --- ## Lesson 3: The value of working with AI https://www.sanity.io/learn/course/code-with-ai/the-value-of-working-with-ai What do you get from working with AI tools that you never had before? ## Rapid prototyping The first version of anything you create is unlikely to be perfect. This has always been true in product development, but is now magnified when AI tooling allows you to go from 0% to 80% in a very short time. As you build any project, you will begin to uncover edge cases that you had not considered and you'll begin to build context of what a final version of your product might look like. Fortunately, our AI tooling allows you to take everything you'll learn along the way and write it into updated versions of the prompts that started the project. Allowing you to build, trash, and build again in a short time. This prompt, evaluate, destroy cycle is one of the great benefits of AI tooling. You can get something that looks almost finished into the hands of test users and authors faster than ever before. ## Wider skillset AI tooling should also allow you to take on more ambitious projects than ever before. Previously, before approaching a new front-end technology, framework, or any area of expertise, you would need to gather some amount of understanding in that area first before proceeding. You can now take the things that you already know, apply them to the concepts that you don't, and an LLM will help translate and close the knowledge gap. For example, if you don't know how to build a 3D model in a front-end application, LLMs do, and so long as you can sufficiently describe the outcome that you want with enough context to get what you need, you should be able to get very close to a result you are happy with. Along the way, if there are any concepts that you do not understand, you can ask your LLM and it should be able to give you accurate information. --- ## Lesson 4: Glossary of terms https://www.sanity.io/learn/course/code-with-ai/glossary-of-terms > [!NOTE] > If you have web development application experience, you can skip this lesson. There are a number of unavoidable technical terms that will be used throughout the following lessons. This is not a comprehensive guide of all definitions that make up web application development. Just explanations of the main concepts that will be introduced in the following lessons. ## AI tooling and technology ### AI (Artificial Intelligence) Computer systems designed to perform tasks that typically require human intelligence, such as understanding language, recognizing patterns, or making decisions. ### LLM (Large Language Model) A type of AI system trained on vast amounts of text data to predict and generate human-like language. Examples include GPT-4, Claude, and Gemini. ### Model The underlying AI system that processes your input and generates responses. Think of it as the "brain" that has learned patterns from training data and uses those patterns to predict what text should come next. ### Prompt The input text you provide to guide the model's response. Rather than just a question, it's the complete context that sets up the scenario for the model to complete in the way you want. ## Version Control & Development ### GitHub GitHub uses the "Git" version control system that tracks changes to your code over time. Think of it like "track changes" for code - you can see what changed, when, and revert to previous versions if something breaks. ### Repository (Repo) A folder containing your project files along with the complete history of changes made to those files. Repositories can be stored locally on your computer or remotely on services like GitHub. ### Commit A snapshot of your code at a specific point in time. When you commit, you're saving a version of your project with a message describing what you changed. ### Branch A separate line of development in your project. You can create branches to work on new features without affecting the main code, then merge them back when ready. ## Web Development ### Frontend The part of a web application that users interact with directly in their browser. Also called the "client-side," it includes everything users see and click on - the interface, buttons, forms, and visual design. ### Framework A pre-built foundation that provides structure and common functionality for building applications. React, Angular, and Vue.js are popular frontend frameworks. ### Meta-framework A higher-level framework built on top of existing frameworks that adds additional features like routing, server-side rendering, and build optimization. Next.js (built on React), React Router, and Astro are popular meta-frameworks. ## Development Tools & Concepts ### IDE/Code Editor Software for writing and editing code. Popular options include Cursor and Visual Studio Code. These provide syntax highlighting, error detection, and debugging tools. ### Terminal/Command Line A text-based interface for interacting with your computer. Developers use it to run commands, install packages, and manage files without using a graphical interface. ## Deployment & Hosting ### Build Process The steps that convert your development code into optimized files ready for production. This might include minifying code, compiling TypeScript, or bundling assets. ### Hosting Modern web hosting providers connects to your repositories to build and host version of your application which can be served around the world to users. Examples include Vercel and Netlify. --- ## Lesson 5: Prompting primer https://www.sanity.io/learn/course/code-with-ai/introduction-to-prompting Get better results from AI tools by crafting effective prompts, setting realistic expectations, and using them for interactive brainstorming sessions. Much of working with AI tooling requires “prompting,“ and writing great prompts is part of "prompt engineering." Essentially, writing instructions into a text box that the AI will execute. For the entire history of computing, programming relied on getting consistent outputs from consistent inputs. However, this is not true when working with AI tools and so knowing how to write good inputs to get *predictably good *outputs becomes critically important. Many factors will define the results that you get. The model that you are working with (for example, Claude Sonnet by Anthropic, ChatGPT by OpenAI, etc), the context that it has, and above all the quality of your prompt. ## What a prompt does When an LLM responds with words, it is generating the most likely next word, word-by-word in its response. It will compare the text that you have written to everything that it already knows to create the most likely response to your prompt. So writing a prompt is less about getting an answer and more about shaping the most likely response. > If you ask a question in your prompt, the model isn't following a separate “Q&A” code path, but rather it appears to answer the question because an answer is the most likely sort of response for the given question as input. > [!TIP] > Read [Prompt engineering techniques](https://learn.microsoft.com/en-us/azure/ai-foundry/openai/concepts/prompt-engineering) in the Microsoft Azure documentation. ## Testing prompts Prompts are the default way most people interact with LLM's. Try any of the examples below in [ChatGPT](https://chatgpt.com/), [Claude](https://chatgpt.com/) or [Grok](https://grok.com/). ## Writing great prompts Through a lot of hype and the need for attention, AI tools have been largely oversold in terms of the scale what they can do with short prompts and large code-bases. If you have only seen a few tweets and demos, you may expect to be able to write a short description of what you need, watch the computer magically do the rest, and put your feet up. This is not the case. Bad prompting will lead to frustration. Great prompting leads to success. ### Set clear goals for success On the first page of Anthropic's documentation on Prompt Engineering they recommend before prompting to have a clear definition of success. > [!TIP] > Read [Prompt engineering](https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview) on the Anthropic documentation Without knowing what "good" or "finished" looks like, how can you begin to evaluate the work that AI in response to your prompt? A strong recommendation for new and existing projects is to create a "product requirements document" that lives at the root of your code base to provide as much context as possible about its aims and functionality. So before you next prompt, think about “I need X that achieves Y measured by Z.” ```:Prompt Please review this marketing copy. It is intentionally short, deliberate to the point and conversational. The goal of this copy is to dramatically increase conversions. The target audience is busy professionals. If this landing page works I'm more likely to get a promotion. ``` The first part of this prompt is the "what," the second part explains the "why" and the benefits of being succesful. ### Provide examples While prompts *describe* what you want, the best way to keep an LLM on track is to *show* it what you want. A simple prompt without examples might ask a question or define a task to be done. But the response will be greatly enhanced by providing an example of what you are going to provide and how you would like it to be returned. ```:Prompt I'm writing a course on how to build web applications with AI tooling. It is primarily directed at people with application development experience, but some novices want to take the course as well. I want to build out a glossary of terms page for topics that they may be expected to know. Here are some examples. Can you think of any other useful terminology that a web development novice or beginner may not know? And write out more explanations of the same style as the examples that I'm providing. INPUT: GitHub The world's most popular service for version controlling files. Developers make changes to files locally and "commit" their files to a GitHub repository in order to keep projects organized. OUTPUT: ## {{ title }} {{ description }} ``` Without the example "input" and "output" the model would likely have given me way too much information and formatted in some random way. With the examples I got exactly what I wanted, in the short manner in which I described. When working with code, it is useful to provide snippets of what works or patterns you already implemented that should be copied. ### Invite criticism and failure The default setting with most LLMs is subservient agreement. You can ask for some pretty ridiculous things, and the model will cheerfully enable you. For this reason, it can be useful—particularly the less familiar you are with the code—to invite criticism and enable a failure mode if your ask is poorly defined or will lead to bad results. ```:Prompt Change the button color to lime green. The intention is to make it more eye-catching so that more people click on the button. If this will cause accessibility problems, or goes against our brand style guide, don't make this change and instead suggest alternatives toward the same goal. ``` ### Provide context Perhaps the most common reason prompts fall short of a user's expectation is a lack of context. LLMs simply do not know everything that you know. Bad prompting highlights the "curse of knowledge" where a person may find it difficult to communicate a requirement to someone that does not have the same context they have. Whatever context you leave out of your prompt will be filled by the LLM's own knowledge. This means whatever context you are missing makes getting the response you want a roll of the dice. It can be time-consuming, but any amount of context, no matter how small, provided in the prompt will greatly improve the responses you receive. This is also why it is a major benefit to put together files that contain your context that can be fed into every prompt—such as rules or product requirements documents. Many LLM's will accept URL's which can be fetched and read for additional context. ### Role play "System prompting" is a term given to beginning your prompt by asking the LLM to inhabit a character for their response. You may have seen silly demos of this where LLM's respond by talking like a pirate or fictional characters. The same method can be applied to tell the model that it is an expert in a particular topic or has a particular role within your organization. ```:Prompt You are an expert in mobile application onboarding with high activation rates. Please review our onboarding flow as described in the product requirements document and identify any friction that may lead users to bounce or churn. ``` Without the first part of this prompt the response may have been generic to address any website or application. Since we've narrowed the role down to "mobile" the response should be more useful. ## Summary - Before prompting, create a definition of success to evaluate your responses - Provide examples of what you want the response to contain - Enable criticism and allow failure to reduce blind prompt following - Provide context to reduce guess-work by LLM's - Make the LLM and domain-expert with a system role to narrow the response --- ## Lesson 6: Voice dictated prompts https://www.sanity.io/learn/course/code-with-ai/voice-dictated-prompts You may find it much faster and more natural to write prompts with your voice rather than your hands. Here's how I like to do it. I can type over 100 words per minute. I've been proud of that for a long time, to the point of—for better or worse—considering it part of my personality. But there's just something about writing prompts that I find so laborious. It feels like micromanagement. Having to write out a task in full instead of just *doing* it. Fortunately, I have found a way to reduce the friction of writing prompts: I don’t write them at all; I say them. In fact, I barely “wrote” any of this course. The words you are reading right now, I spoke into my microphone and cleaned up with AI. What a time to be alive. ## Install Superwhisper While there are many voice dictation tools available, and your system likely comes with one built in, I have found Superwhisper to be an excellent choice. It's free to try. - [ ] **Download** and install [Superwhisper](https://superwhisper.com/). ## Speak a prompt - [ ] **Open** a new chat on [ChatGPT](https://chatgpt.com/), [Claude](https://chatgpt.com/) or [Grok](https://grok.com/). ```:Prompt List the planets of our solar system from smallest to largest. Measure by diameter in kilometres. Ignore dwarf planets. ``` You should get a nicely formatted response. You may need to modify the prompt after it is transcribed to include markup for examples or URLs to more documentation. ### Speech-to-text alternatives If for some reason you're not happy with Superwhisper, there are alternatives that will perform similarly. - [VS Code Speech](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-speech) is an extension by Microsoft for use in VS Code - [Wispr Flow](https://wisprflow.ai/) is a similar OS application with some additional features Now we’re more comfortable with prompting, let’s add some guardrails to the results. --- ## Lesson 7: Cursor IDE https://www.sanity.io/learn/course/code-with-ai/writing-code-with-ai-assistance An introduction to Cursor, the AI-powered code editor you'll use in this course. Get to know the Chat window and the difference between an Ask and an Agent. In 2021, [VS Code](https://code.visualstudio.com/) popularized AI coding assistance with GitHub Copilot. This coding assistant helps modify or complete single lines of code. Recently, it has been expanded into a chat interface and multi-line editing. While it continues to receive updates, in my opinion, it has not kept pace with alternative options. This space is evolving so rapidly that it's likely that this course will be updated in future with alternate recommendations. In this course, we'll use Cursor, a fork of VS Code. At the time of writing, it is emerging as the most popular Integrated Development Environment (IDE) for authoring code with AI assistance. There are popular alternatives, but we will not use them in this course. There are also AI tools that only use the command line. We will not use those in this course. You may also have experience writing code through copy-and-paste sessions with in-browser AI tools like Open AI's ChatGPT or Anthropic's Claude. However, in this course, you'll use AI tools closer to the code base. ## Installation Cursor is a free app which can be [downloaded from their website](https://www.cursor.com/). While the paid plan provides access to better models and features, the free version is still feature-rich. You should be able to complete this course without upgrading. - [ ] **Download** and install [Cursor](https://www.cursor.com/) Open Cursor, and you should see a screen something like this: ![Image](https://cdn.sanity.io/images/3do82whm/next/07fc3a242ee080010c2c86713606efb5d530950b-2240x1480.png) > [!NOTE] > Cursor is a rapidly evolving application and so in some ways may look slightly different from the screenshots in this course. ## Command palette One of the most powerful ways to move around an IDE is by using the command palette. Press `Cmd+Shift+P` to bring up the palette, in which you can through files in your project or settings in Cursor. - [ ] **Open** the Command palette `Cmd+Shift+P` and type "Terminal" to create a new terminal Notice that many Cursor commands will also show their keyboard shortcuts in the command palette. Keep an eye on these as moving around with these shortcuts is much more efficient. ## Terminal The terminal is a Command Line Interface (CLI) in which you can run commands that will perform actions on your computer. It can be used to begin new coding projects, start local development servers and ... almost anything else. Some terminals like [Warp](https://www.warp.dev/warp-ai) are AI powered, which will convert your prompts into commands which can be run, and the terminal will do its own debugging to address any issues. The terminal in Cursor is **not** naturally AI-assisted, and so commands written into the terminal must be correct and specific to your computer. However you can use the Chat pane to interact with the terminal. You can now close the terminal `Cmd+J` ## Chat and file panes - [ ] Click **Open project** and create a new folder to work in When you are opening and editing files, these will fill the middle section of the Cursor window. You should now also see two panes open to the left and right. ### Chat pane On the left-hand side in my screenshot is the chat pane. This is where you can write prompts to LLMs which will interact with your project. You can send prompts in "Ask" mode, which will just return responses in the chat pane, or you can change over to "Agent" mode, where Cursor will make changes directly to files in your project. Toggle the Chat pane with `Cmd+I`, `Cmd+L` or using the Command Palette. ![Image](https://cdn.sanity.io/images/3do82whm/next/06e727cd80b26f8f44965d6e3e1fc5c3acb7fb26-2240x1480.png) ### File browser The files in your project will begin to show up in the "Primary Sidebar" which can be toggled with the Command Palette or by pressing `Cmd+B`. We don't have any files yet, but let's make our first in the next lesson. ## Sanity setup In the following lessons you'll prepare your environment for the best possible implementation of Sanity. You could skip these steps, but your prompt responses would not nearly be as good. Let's prepare for success. --- ## Lesson 8: Claude Code https://www.sanity.io/learn/course/code-with-ai/claude-code-ide An introduction to Claude Code, Anthropic's AI-powered coding tool. Learn how to install it, navigate its interface, and use it to write and edit code with AI assistance. Claude Code is a terminal-based AI coding agent. Instead of a GUI, you work in your shell. It reads your project files, applies changes, runs commands, and explains what it's doing, all from the command line. It's a good fit if you're already comfortable in the terminal and prefer not to maintain a full IDE setup, or if you're working on a remote machine or in a CI context. ## Installation Claude Code is installed as a global npm package. Before you begin, make sure you have [Node.js](https://nodejs.org/) installed on your machine. npm comes bundled with it. To install Claude Code, run the following command in your terminal: ``` npm install -g @anthropic-ai/claude-code ``` Claude Code is free to try, with usage-based pricing. You pay only for what you use. If you're already on a Claude Pro, Max, or Team plan, Claude Code usage is included. - [ ] **Install** Claude Code by running `npm install -g @anthropic-ai/claude-code` in your terminal Once installation is complete, you can verify it worked by running `claude --version` in your terminal. You should see the installed version number printed to the screen. ## Start a session Unlike GUI-based IDEs, Claude Code has no separate application window. You do not launch it from a dock, a desktop shortcut, or an applications folder. It lives entirely in the terminal. - [ ] **Navigate** to your project directory and run `claude` to start a session Claude Code can read any file in the directory where you ran `claude`, and its subdirectories. The closer your working directory is to the task, the better its responses will be. This opens an interactive session. Claude reads your project structure and is ready for prompts. You can describe what you want to build, and it will work through the task: editing files, running commands, iterating on errors. ## Chat and agent modes Once Claude Code is running, you interact with it through a REPL-style interface. You type a prompt, press Enter, and Claude Code responds. There are two broad ways to use it. ### Chat mode You can ask Claude Code questions or request explanations about your code. This is similar to Ask mode in Cursor: you get a response in the terminal, but nothing in your project changes. It is useful for understanding unfamiliar code, exploring options, or getting a second opinion before making changes. ### Agent mode You can also give Claude Code tasks to perform autonomously. In this mode, it will read files, write new ones, and edit existing code in your project, all without you having to copy and paste anything. By default, Claude Code shows you exactly what it intends to do and asks for your confirmation before applying any changes. You stay in control, and can loosen these guardrails later once you trust it for routine edits. **A concrete example.** From a Sanity Studio project, a prompt like *"Add a category field to my post schema, with references to a new category document type, and regenerate the TypeGen types"* triggers a predictable pattern: 1. Claude Code reads `schemas/post.ts` and nearby schema files. 2. It drafts `schemas/category.ts`, adds a `reference` field to `post`, and shows you both diffs. 3. After you approve, it runs `npx sanity schema typegen` and shows the updated `sanity.types.ts`. 4. If the TypeGen run fails, it reads the error, proposes a fix, and asks again. The pattern holds for most tasks: read → propose → confirm → apply → verify. - [ ] **Type** a question or task into the Claude Code prompt and press Enter to see it respond ## Slash commands Claude Code supports slash commands for common workflows. Type `/` in a session to see what's available. The Sanity Agent Toolkit (covered in the next lesson) adds its own slash commands here, which is one reason Claude Code pairs well with Sanity development. ## How it compares to Cursor The main difference is the environment, not the capability. Claude Code uses the same underlying model as Cursor's Agent mode. The practical difference is that Claude Code is fully keyboard and terminal-driven, with no GUI for reviewing file diffs visually. Some developers find this faster; others find the Cursor interface easier to navigate when changes are complex. ## Sanity setup In the following lessons you'll prepare your environment for the best possible Sanity implementation. You could skip these steps, but your results wouldn't be nearly as good. Let's prepare for success. --- ## Lesson 9: OpenAI Codex https://www.sanity.io/learn/course/code-with-ai/openai-codex-ide Install Codex CLI, start a session in your project, and learn the prompt-and-confirm loop that makes it useful for Sanity work. Codex CLI is OpenAI's terminal-based AI coding agent. Like Claude Code, it runs in your shell, reads your project files, makes edits, and works through tasks autonomously. No IDE required. It's a good fit if you're already in a ChatGPT-heavy workflow, or if you want to run multiple agents in parallel across different parts of a project (Codex supports subagents for this). ## Installation ```sh npm install -g @openai/codex ``` You'll need a ChatGPT Plus, Pro, Business, Edu, or Enterprise account. Codex is included in these plans. - [ ] **Install** Codex CLI by running `npm install -g @openai/codex` in your terminal Once installation is complete, you can verify it worked by running `codex --version` in your terminal. You should see the installed version number printed to the screen. ## Start a session Unlike Cursor, which embeds a terminal pane inside a graphical IDE, Codex CLI runs entirely in the terminal. There is no graphical user interface. The terminal is the interface. - [ ] **Navigate** to your project directory and run `codex` to start a session On first run, Codex prompts you to authenticate with your ChatGPT account. Once in, you'll see the interactive TUI: a prompt where you describe what you want done, and Codex works through it. **A concrete example.** From a Sanity Studio project, a prompt like *"Add a category field to my post schema, with references to a new category document type, and regenerate the TypeGen types"* triggers a predictable pattern: 1. Codex reads `schemas/post.ts` and nearby schema files. 2. It drafts `schemas/category.ts`, adds a `reference` field to `post`, and shows you both diffs. 3. After you approve, it runs `npx sanity schema typegen` and shows the updated `sanity.types.ts`. 4. If the TypeGen run fails, it reads the error, proposes a fix, and asks again. The pattern holds for most tasks: read → propose → confirm → apply → verify. ## Slash commands Type `/` in a session to see available commands. `/mcp` shows your connected MCP servers once you've set those up in the next lessons. ## How it compares to Claude Code Both are terminal-based agents that operate on your local files. The main differences are the underlying model (GPT vs. Claude) and some workflow tooling. Codex has built-in subagents for parallelising tasks, while Claude Code has tighter integration with the Sanity Agent Toolkit via its plugin system. Either works well for this course. ## Sanity setup In the following lessons you'll prepare your environment for the best possible Sanity implementation. You could skip these steps, but your results wouldn't be nearly as good. Let's set things up properly from the start. --- ## Lesson 10: Add best practice skills https://www.sanity.io/learn/course/code-with-ai/agent-toolkit-skills The Sanity Agent Toolkit gives your AI assistant opinionated, Sanity-specific guidance—so it writes better code from the start. Without guidance, AI tools write generic Sanity code. They know the APIs, but they won't follow our opinionated best practices—things like how to structure schemas, write GROQ queries, handle localization, or set up Visual Editing. The Sanity Agent Toolkit fixes that. ## What is the Sanity Agent Toolkit? The Sanity Agent Toolkit (github.com/sanity-io/agent-toolkit) is a collection of resources that helps AI agents build better with Sanity. It includes: - 20+ context skills covering schema design, GROQ, Visual Editing, SEO, localization, migrations, and framework integrations - A Claude Code plugin with slash commands and interactive skills for common workflows - A knowledge router (AGENTS.md) that directs AI to the right guidance based on task keywords ## Install with Skills The fastest way to add the toolkit to your project is with the skills CLI. Run this from your project directory: ```sh npx skills add sanity-io/agent-toolkit ``` This installs the toolkit's rules and skills directly into your project, making them available to your AI assistant in Cursor and other supported editors. ## What changes after install? Once installed, your AI assistant will have access to Sanity-specific guidance whenever it's working on your project. You'll notice it makes better decisions about schema design, writes more idiomatic GROQ, and avoids common pitfalls—without you having to explain Sanity conventions in every prompt. - Read more in the [Get started with AI-powered Sanity development](https://www.sanity.io/docs/ai/ai-quickstart) guide --- ## Lesson 11: Give your AI the full picture https://www.sanity.io/learn/course/code-with-ai/import-the-sanity-documentation LLMs know a lot, but not everything. Here are several ways to make sure your AI assistant always has accurate, up-to-date Sanity context. AI tools are trained on public data up to a cutoff date. That means they may have outdated knowledge of Sanity APIs, miss recent features, or fill gaps with plausible-but-wrong code. Here are the best ways to keep your AI well-informed. ## Use the MCP server (recommended) The Sanity MCP server includes built-in search_docs and read_docs tools. When connected, your AI can look up accurate, current documentation on demand—without you having to paste anything in. This is the most reliable approach. ## Use llms.txt for comprehensive context The Sanity docs are available in the LLM-friendly llms.txt format. You can point your AI to either of these URLs: - `/docs/llms.txt` — an abbreviated index of all content with links - `/docs/llms-full.txt` — the complete documentation corpus as markdown All Sanity Learn course and lesson content is also available at /learn/llms.txt and /learn/llms-full.txt. ## Add docs via @Docs in Cursor In Cursor, you can index the Sanity documentation directly by typing @Docs in the agent chat and adding sanity.io/docs as a source. This gives Cursor persistent, searchable access to the docs without needing to paste content into every prompt. ## Copy individual articles Every article on sanity.io/docs has a Copy article button that puts the markdown version on your clipboard. You can also append .md to any docs URL to get the raw markdown. Useful when you need to give your AI a specific reference for a focused task. - See all options in the [Get started with AI-powered Sanity development](https://www.sanity.io/docs/ai/ai-quickstart) guide ## Request markdown directly with Accept: text/markdown Both sanity.io/docs and sanity.io/learn now support content negotiation. Any page can return its content as markdown by sending an Accept: text/markdown header in the request. This means you can fetch any docs article or Learn lesson as clean, LLM-ready markdown without scraping HTML. ```sh curl -H "Accept: text/markdown" https://www.sanity.io/docs/ai/mcp-server ``` This is especially useful when you want to give your AI a specific article as context, or when building tools that programmatically fetch Sanity documentation. - Want to implement this pattern in your own Sanity-powered site? Take the [Markdown Routes with Next.js](https://www.sanity.io/learn/course/markdown-routes-with-nextjs) course on Sanity Learn. --- ## Lesson 12: Connect to the Sanity MCP server https://www.sanity.io/learn/course/code-with-ai/rapidly-generating-placeholder-content The Model Context Protocol (MCP) allows AI tools to reach out and perform actions on external applications—like your Sanity project. The Sanity MCP server is a hosted service at mcp.sanity.io that gives AI assistants like Cursor direct access to your Sanity project. Once connected, your AI can execute GROQ queries, read and write documents, explore your schema, and more—without you having to paste in context manually. ## Quick install The fastest way to get set up is with the Sanity CLI. Run this command from your project directory—it auto-detects Cursor, Claude Code, and VS Code and configures the MCP server for you: ```sh npx sanity@latest mcp configure ``` - This uses your logged-in CLI user for authentication. No manual token management needed. ## Install into Cursor manually If you prefer to configure manually, open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P), run View: Open MCP Settings, select + New MCP Server, and add the following to your mcp.json file: ```json { "mcpServers": { "Sanity": { "type": "http", "url": "https://mcp.sanity.io" } } } ``` Save the file. Cursor will detect the new server and prompt you to authenticate via OAuth. ## Verify the connection Open Cursor's agent chat and ask: ``` Do you have access to the Sanity MCP server? What can you tell me about the project? ``` If it responds with details about your schema and project, you are connected and ready to go. - For the full list of available tools—GROQ queries, document creation, schema exploration, and more—see the [Sanity MCP server documentation](https://www.sanity.io/docs/ai/mcp-server). --- ## Lesson 13: Define your project specifications https://www.sanity.io/learn/course/code-with-ai/creating-a-prd-with-ai Now we have the perfect environment to build something. But that something is still undefined. It could be that we've got a great idea in our heads of the content-driven application we'd like to build. But if it's not written down, our LLMs won't know anything about it. One of the emerging ways to keep projects on track is "spec driven development". Where you create something like a "Product Requirements Document" (PRD) to describe what you're building and how you'd like the LLM to perform tasks. This typically lives at the root of the project as either `PRD.md` or `README.md`. It's not always easy to know everything that you want before you start building anything. So the purpose of this document is not to get everything right in one shot, but to give the LLM a starting point to build. It may be that you alter this document as your requirements change. Or should your work ever get out of sync with the document, you can prompt the LLM to update the document to match the current state of the project. ## What we're building If you have a specific project in mind, you could take the example prompts in the rest of the course and modify them to what you are working on. If you don't have an idea of what you'd like to build, then follow the prompts and build with me! - [ ] **Open** the Chat Panel, and in Agent mode prompt the creation of a PRD ```:Prompt We need to create a PRD that describes the creation of a content-driven web application experience. The content backend will be powered by Sanity. The frontend will be an Astro template. We are trying to build a content model that describes a solar system. We'll start with our own solar system. And our frontend will render facts and images about the solar system. Given this simplified outline, write a `PRD.md` file to the root of this project. We are in the early planning phases, so only address the requirements as I have discussed. If you would like to clarify these requirements please ask questions. ``` Depending on the model that you have chosen, it may write your document, ask clarifying questions, or both. Review the work that it has done and address the questions to the best of your ability. Remember one of the benefits of AI tooling is the ability to rapidly prototype, so there's nothing that we can't tear down, destroy, and start again. --- ## Lesson 14: Initialize a new Studio https://www.sanity.io/learn/course/code-with-ai/initialize-a-new-studio ## Create a new Sanity project Open Cursor and open the Terminal from the Command Palette or press `Cmd+J` > [!WARNING] > We could have "prompted" a new Sanity project into existence, but I wanted to make sure you start with this specific experience. Run the following command to create a new Sanity project. If you are not logged into Sanity in the terminal, you will be asked to do so. If you do not yet have a Sanity account, you can create one for free. The install command below has a few opinionated options preselected so that you won’t need to weigh up the options. - [ ] **Run** the following from the command line to create a new Sanity project ```sh:Terminal npm create sanity@latest -- --template blog --create-project "AI-powered Sanity" --dataset production --typescript --output-path apps/studio cd apps/studio ``` > [!WARNING] > Getting errors during the install process? If this is your first time developing you may not have the necessary software installed. Copy any errors you see in the **terminal** into a new **chat** and the LLM should help you debug your system. The files in your project (press `Cmd+B` to open the file browser pane) should now look like this: ```sh:Terminal ai-demo ├── .cursor/ │ └── rules ├── apps/ │ └── studio/ │ └── ...other files and folders └── PRD.md ``` Install the dependencies as instructed in the `apps/studio` directory. - [ ] **Run **the following from the command line to start the development server ```sh:Terminal # in apps/studio npm run dev ``` You can now open the Studio at [http://localhost:3333](http://localhost:3333) and log in. ![A blank Sanity Studio with the blog template schema running in local development](https://cdn.sanity.io/images/3do82whm/next/c1db705d3d1d39480543c8ef88a6fdb43d6561c9-2240x1480.png) You now have a configured Sanity project that is a cloud-hosted real-time content database and a local Sanity Studio development server that is an admin interface for authoring content. In the script that created this project we chose the “blog” template to create a new Sanity Studio. This is why you can currently see Post, Author, and Category document schema types in your studio. > [!WARNING] > This course **won't** cover [Hosting and deployment](https://www.sanity.io/learn/studio/deployment)—see our documentation and other courses on Sanity Learn for more details. You now have a Sanity Studio locally but it's only configured with a default blog template, let's prompt updates to the Studio to make it ours. --- ## Lesson 15: Create schema types https://www.sanity.io/learn/course/code-with-ai/create-schema-types Your Sanity Studio came with some content types for a blog. But this might not be what your project is about. - [ ] **Open** the Chat Pane and prompt it to look through the context we've provided to create schema types according to our requirements ```:Prompt Take a look at the @PRD.md file and create schema types in our Sanity Studio that express the content model. Follow the guidance in @sanity.mdc for implementation. If any of the instructions I have given you are unclear, please ask clarifying questions before proceeding. ``` This could take a little while! Thanks to our product requirement document, the LLM has a good idea already of the sort of content we're going to be creating. Thanks to our Sanity cursor rules, the LLM knows how to create content types the right way and what scripts to run after it has completed work to verify what it has done. You may be prompted to execute a few scripts along the way. Follow the LLM's chain of thought in the Chat Pane as it works through each step of the request. Once complete, your Sanity Studio should have a few more content types than before. Try creating a new document, yours may look something like this: ![Image](https://cdn.sanity.io/images/3do82whm/next/c6c21f8f29ff1c63769cee368f8065506e49850f-2240x1480.png) You may have individual content types for moons and planets, or it may have made one generic content type, something like "celestial body" in which you can select its type. The variation between this prompt and your results can be minimized by more strict instructions in the PRD or the prompt. This is where it pays to: 1. Have a definition of success, to know what good looks like. 2. Have a way to evaluate the quality of the response by comparing our product requirements with what has been generated. 3. Perform all of this in Cursor so that you if you need to reject this work, you can do with one button click (by clicking **Undo All**), update the prompt, the PRD (or both) and try again. If you are happy with the results so far, you can proceed. Otherwise, refine your content model through prompting or updates to your product requirements before continuing. --- ## Lesson 16: Automatically generate content https://www.sanity.io/learn/course/code-with-ai/create-placeholder-content The Sanity MCP server is going to do the heavy lifting of creating our initial content. Sanity Studio is the ultimate workspace to create and edit individual pieces of content. However, if we want to get a good feel for how our studio looks with content in it, and we want to have something to query in our front end later, we're going to need a lot more than a few blog posts. This is why we installed the Sanity MCP server. It is able to not only query content and interact with the project, it can write data in huge volume with an understanding of your Sanity Studio schema. You've already set up and confirmed the installation of the MCP server, but just to be sure, you can write a quick prompt now to confirm the LLM has access to the tools. - [ ] **Open** the Chat Pane and **prompt** the LLM to confirm it has access to the Sanity MCP server. ```:Prompt Do you have access to the Sanity MCP server? What can you tell me about the project currently? ``` > [!NOTE] > The MCP server relies on a deployed version of your Sanity Studio schema, which this course has not yet prompted you to do. Your LLM might prompt you to do this, or it may just do it itself. Hopefully you now have confirmation that the Sanity MCP server is operational and your LLM understands the project. - [ ] **Prompt** the LLM to create a document ```:Prompt Please just create one document first, one that represents the Sun in our solar system. ``` Find the document that was created and verify that you're happy with the results. ## Examine the content and schema This is a good opportunity to double-check that the schema types that were created in the previous lesson are actually suitable for the content being created in this lesson. For example, my content schema does not contain a `type` of "star," so it has described the sun as a "planet." It has also decided to store `mass` in kilograms, which is going to require numbers larger than it makes sense to store. With all the context that we have given our LLM, it should be smart enough to be able to make changes to the schema, redeploy the schema, and update the document using the MCP server. The following prompt is specific to the schema type in my project, you may need to adjust it to suit your results: ```:Prompt 1. Update the schema for this document type to include "star" as an option. 2. You attempted to write "mass" as a string, but the schema type was setup for kilograms. Modify the schema for this document type to use a more suitable measure than kilograms. Update the schema types, deploy the schema, and update the document that you have just created. ``` ## Prompt bulk content Once you've modified your schema and content into a shape you're happier with, it's time to prompt for the rest. - [ ] **Prompt** the LLM to create documents for the planets and moons ```:Prompt Perfect, can we please create documents for the planets and moons of the solar system ``` Your Studio should now have many documents filled with rich information. This is perfect for creating a front-end. --- ## Lesson 17: Initialize a new front end https://www.sanity.io/learn/course/code-with-ai/adding-sanity-content-to-any-front-end You can pick whatever framework you'd like to complete this lesson. It's up to AI—and your prompting skills—to make it work. In every course that I have ever written before this one, I've had to be very specific about what steps you are going to take. However, I can take a great liberty with this in an AI-powered course because I am relying on the AI's ability to perform most of the technical tasks. All we need to do is describe *what* we want, not recall *how* we want it. And so instead of telling you which framework to use, I'm going to trust the AI has a reasonable understanding on the best way to do things. Admittedly, this is not the most reliable method to get bulletproof code. If you do want to start with a particular framework, we have many templates available, which will give you a handcrafted starting point. > [!TIP] > [Visit the Templates page](https://www.sanity.io/templates) for hand-written starter kits and inspiration ## Prompt a front end Next.js is the most popular front-end framework, Sanity already provides many templates and tutorials for it. I'm not an expert in Astro, so I'm going to use it instead in this course. - [ ] **Open** a new Chat in "Agent" mode and prompt it to create a new project in the front end of your choice ```:Prompt Take a look at @PRD.md. I want to begin the process of building a frontend for our content. For this, I’d like to use the Astro framework, written in TypeScript and styled with Tailwind CSS. For now, just start with a homepage that queries and renders data from our Sanity project. Here's some documentation on how to best integrate Astro + Sanity: @https://github.com/sanity-io/sanity-astro ``` Adding the URL to the official Astro + Sanity integration keeps the LLM on track by providing examples. Find a guide or template you like and supply it as an input example. You should now have a great home page with editable content. Make some changes in Sanity Studio and you should see them update on your front-end. ## Back-to-front coding One of the major benefits of having both your back and front end in code is now that you can make changes to both at once. Say you wanted to rename a field or add a new field to a document type. You could write a prompt that will update both the Sanity Studio configuration and the front end layout. --- ## Lesson 18: Continuing to build https://www.sanity.io/learn/course/code-with-ai/building-more-routes Right now you only have a homepage, but what you do next is up to you. ## Update the PRD The product requirements document that you created initially may now be a little out of line with what has actually been developed. Whether you change the document to suit what you have created or you prompt changes to what you have created based on the document is up to you. ```:Prompt Examine the files in the project and how they relate to the product requirements document. Give me a list of ways in which they differ, whether there are tasks yet to be done in the product requirements, or if there are features built out in the project that were never specified. Give me a list to decide which actions to take. ``` ## Create more routes If you know what additional pages you would like to have in your web application, you could prompt the LLM to create these. Or you might ask it to have a look at the schema types in your studio and suggest what pages it makes sense to build next. ```:Prompt Look at our Sanity Studio schema types and what we have built in our frontend application. We will need to create more routes, likely for individual celestial bodies, but perhaps for blog posts or other web pages as well. Give me a list of suggested schema types that we should turn into frontend pages. ``` ## Version control While all these files are saved on your computer, you have no version control system in place. The most popular one in development is Git, and the most popular provider is GitHub. LLMs understand Git very well, and having version control set up in your project will be invaluable should your LLM ever go off the rails and make far too many changes that you don't agree with. You will need to setup a Git repository in order to deploy your frontend. ```:Prompt I need to set up Git in this project so that we can track changes and push them to a repository. Please help guide me through the process. ``` ## Deployment Currently, your frontend and studio are both only visible on your computer. You can prompt the LLM to help guide you through the process of going live. Your studio can be deployed to Sanity's hosting. Your frontend can be deployed to one of many providers. Vercel is likely the easiest. ```:Prompt I'd like to deploy the Sanity Studio to Sanity's own hosting and deploy my frontend to Vercel. Can you help guide me through the process for each? ``` ## Go nuts LLMs allow us to take on tasks that we otherwise may feel too daunted by to even consider... ```:Prompt I'd like to use Three.js to create an interactive 3D model of the solar system on our Astro frontend driven by our Sanity Studio. Plan this out in our product requirements document and make any necessary changes required to our Sanity Studio schema for missing fields or content that will help us map our Sanity documents to a 3D model. ``` --- ## Lesson 19: AI-unassisted quiz https://www.sanity.io/learn/course/code-with-ai/ai-unassisted-quiz AI can't help you here. Let's reflect on what you've learned. We're in a wonderful future where AI can do most of the grunt work for you and you can focus on solving problems of yours and your authors. But without intentionality to commit your new understandings to memory you may find yourself tripping over time and time again. Here's a quick quiz to reinforce what you've learned in this course. You're on your own, now. > **Question:** What will an "agentic" AI tool do? > > 1. Brainstorm more deeply > 2. Take actions independently **[correct]** > 3. Give better responses > 4. Work faster > **Question:** What will improve the response from a prompt > > 1. Shorter words in your prompt > 2. A faster internet connection > 3. More context about what you're doing **[correct]** > 4. Writing TypeScript > **Question:** What is the purpose of Cursor rules? > > 1. To get the same result from prompt responses > 2. To add guardrails to prompt responses **[correct]** > 3. To get faster prompt responses > 4. To teach the AI new skills > **Question:** Before having an AI write code, you should > > 1. Take a good, hard look at yourself > 2. Memorize the documentation > 3. Ask it about the best approach forward **[correct]** > 4. Ask it to rewrite your app in Rust > **Question:** The major benefit of AI tooling for development is: > > 1. Building applications with code you don't understand > 2. Forcing authors to configure their own apps > 3. Rapidly prototyping things no one will ever use > 4. A way to do better work, faster **[correct]** --- ## Related Resources - [All courses and lessons](https://www.sanity.io/learn/sitemap.md) - [Complete content for LLMs](https://www.sanity.io/learn/llms-full.txt)