Writing code with AI assistance

In 2021, VS Code 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 and Zed 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.

Cursor is a free app which can be downloaded from their website. 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.

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

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.

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.

npm run dev

You can now open the Studio at http://localhost:3333 and log in.

Open to enlarge image

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.

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

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.

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

Open to enlarge image

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

cursor .

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

Open to enlarge image

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.

Open to enlarge image

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.

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.

Open to enlarge image

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

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.

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.

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

Open to enlarge image

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.

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

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.