# Writing code with AI assistance

https://www.sanity.io/learn/course/code-with-ai/writing-code-with-ai-assistance.md

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 IDE for authoring code with AI assistance.

[Windsurf](https://codeium.com/windsurf) and [Zed](https://zed.dev/) are popular alternatives, but we will not use them 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.

1. **Download** and install Cursor

## Create a new Sanity project

Open Cursor and open the Terminal by clicking View -> Terminal or pressing `Cmd+T`

1. 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.

1. **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 ai-powered-sanity
cd ai-powered-sanity
```

The install command above has several options preselected so that you won’t need to weigh up the options.

Install the dependencies as instructed and enter the `ai-powered-sanity` directory.

1. **Run** the following from the command line to start the development server

```sh:Terminal
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.

1. 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.

It’s time to finally do some AI’ing.

### Your mileage may vary

Before continuing consider that many factors effect the results you'll get from a prompt. Which model you choose, its capacity at the time, etc. During this course you'll be given prompts to enter and I'll detail in broad terms the responses you are likely to receive. Just know that your specific results may differ in some small way. 

This is part of the nature of AI assisted coding.

## Prompt some new content types

1. **Open** the `ai-powered-sanity` directory in Cursor. Go to File -> Open or press `Cmd+O` and select the folder.

Alternatively, install a command to open the current directory in Cursor from the terminal. Open the Command Palette `Cmd+Shift+P` and type "shell install cursor."

![Cursor editor with command palette open](https://cdn.sanity.io/images/3do82whm/next/358fa1bf9654b7914dde5533b6586a9f03c14ea4-2240x1480.png)

You can now type the below into your Terminal to open the current directory in a new Cursor window.

```sh:Terminal
cursor .
```

You should now see a view similar to the image below, with your project folder open.

![The Cursor code editor with file browser open](https://cdn.sanity.io/images/3do82whm/next/9fc8632eb6f35a2dbf0759617e2d64065e7e6267-2240x1480.png)

### Chat: Ask vs Agent

Press `Cmd+L` to open the chat in “Ask” mode. Prompts written here will return responses that you will need to manually **apply** to the files in the project. This is a similar experience to ChatGPT or Claude. 

Press `Cmd+I` to open the chat in “Agent” mode. Prompts written here will be automatically written to files in the project. It may also ask you to run commands. 

![Cursor's chat panel with the choices of Agent and Ask](https://cdn.sanity.io/images/3do82whm/next/361549c8c53ab9277fe3a5c53e48c2002488bf70-2240x1480.png)

If you'd like to introduce a little chaos, open Cursor settings (`Cmd+Shift+J`) and enable "YOLO mode" to have all commands run automatically.

### Ask about the project

1. **Open** the Chat in “Ask” mode and enter the following prompt

```text:Prompt
Look through this codebase and tell me what you know about this project.
```

The response should scan through the code base of the current directory and make some determinations about the project. It should conclude something like: 

> This project contains a Sanity content management system designed to manage blog posts.

1. If your answer is something very different, try adding the codebase to the context of your prompt by typing or clicking the `@` symbol and selecting "Codebase."

![Cursor code editor with "codebase" being added to the context](https://cdn.sanity.io/images/3do82whm/next/bd06da75b2fc7bffe1704eed69f9ddf2756a0833-2240x1480.png)

### Extend the project

Imagine we wanted to add to currently available document types. Before proceeding, we could ask for some guidance.

1. **Enter** a second prompt to ask for help adding more schema types

```text:Prompt
You are mostly right. This is a content management system for a blog. However, my business also includes store locations. How do you think we could represent that in the content model?
```

The result is an example schema type for Sanity Studio to represent a store location. It's a reasonably good summation. However in my results it has some inconsistencies that I don't love. For one, it says that the geopoint schema type requires a plugin, which is not true. And `storeLocation` as a content type feels too specific.

We can help guide the AI tool to produce a better result.

1. **Enter** one another prompt to perfect the new schema type

```text:Prompt
I think we should just call them locations, not store locations in case we want to reuse this type for other physical locations in future. Also, geopoints do not require a plugin.
```

If you are happy with the new files, you can now apply them to the project by clicking the play button at the top right of both code examples.

1. **Apply** to the new `location.ts` and updated `schemaTypes/index.ts` files

You should now see "Locations" as a document type in the Studio.

![Sanity Studio structure tool showing Post, Author, Category and Location document types](https://cdn.sanity.io/images/3do82whm/next/bfb2b12de29764f7b3e56a2cafa2702c3a1d100a-2240x1480.png)

Now that our content model is extended, it seems too specific to call a person an author. AI tools can write new code and refactor existing code.

### Agentic workflows

Let's give "Agent" mode a try and trust it to write code directly to the project.

1. **Open** a new Chat in “Agent” mode and enter the following prompt

```text:Prompt
This project contains an @author.ts document type. However, this is too specific for our use case. I want to make it generic to represent a person. Update all the files necessary that refer to this document.
```

Note that we are referencing the `author.ts` file directly by adding it to the prompt’s context. This helps keep the chat focused on the specific problem we’re solving without it having to do its own investigation work.

This should now:

* Create a new document for the `person` document type
* Update the reference field in `post` to `person` instead of `author`
* Update the schema imports in `schemaTypes/index.ts`
* Delete the original `author.ts` file

Accept all these changes and see the Studio update.

And with that, you have now both extended and refactored an existing content model. The codebase is simple for now, but so have been our asks. If you continue to work this way with prompts, you will continue to have success.

Let's take a quick detour to learn how to make prompting even faster.