CoursesAI-powered Sanity developmentInitialize a new front end
AI-powered Sanity development

Initialize a new 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.
Log in to mark your progress for each Lesson and Task

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.

Visit the Templates page for hand-written starter kits and inspiration

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

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.

You have 1 uncompleted task in this lesson
0 of 1