Cursor + Hygraph
#Overview
If you're new to frontend implementation, you can use AI to help out!
This guide shows you how to use Cursor to create a frontend implementation for your Hygraph project.
As with anything being generated by AI, the more you know about the underlying technologies you work with, the smoother the process.
Basic understanding of the framework you choose and debugging common issues with it will make the process of generating code with AI much smoother.
#HYGRAPHlix & Cursor
This example uses the HYGRAPHlix starter. You can clone this project here.
#Basic step-by-step
After creating your Hygraph project and defining your schema, follow these steps:
#1. Get Cursor
Start Cursor and open the chat (CMD+L). The chat lets you select which LLM to use. We use claude-3.5-sonnet in the example.
You can alternatively install the Cursor extension for your IDE.
#2. Write the prompt
Use Cursor to implement your Hygraph project
Write a prompt in the Cursor chat. A prompt is the set of instructions that you provide as input to generate a response or perform a task based on the context, which you must also provide.
Your prompt should state all the necessary information. Check out the prompt example we wrote for you.
#How to write a prompt
While we cannot guarantee that Cursor will provide the same answer each time, here is a prompt that we used with great results!
Make a Next.js project with Tailwind that is designed to look like NetflixThis project should have a homepage and a dynamic route pulling data from a Hygraph endpoint with a GraphQL query that looks like this:query MyQuery {movies {titlemovieInfo: federateMovie {data {TitlePlotDirectorGenreRuntimePoster}}imdbIdslugmoviePoster {url}}}The homepage should have a card style for each movieEach movie page should check for a moviePoster URL and if it doesn't exist use the movieInfo image insteadThe project should be set up to use images from either *.graphassets.com or m.media-amazon.com domainsThis should use the App router and not use getStaticPathsPlease create the directory structure and the files necessary
As you can see, the prompt above offers all the necessary information. The more comprehensive your prompt is, the less debugging you will need to work on to get the project up and running.
We started by defining the framework and library we want the frontend implementation to use, and then we indicated what we want it to look like, visually.
We also state that it will require a dynamic route that pulls data from a Hygraph endpoint with a GraphQL query that should look like an example that we also provided.
You can easily build your queries using our API Playground!
Since the project uses remote sources for some of the images, we state how the images should be fetches when a moviePoster is not available.
If you'd like to follow the step by step of how we used this prompt to create a frontend for one of our starter projects, check out our implementation example!
#3. Follow the instructions
Cursor will provide steps:
- For the steps where you need to run a command, click
Run
to run them in the command line. - For the steps where you need to add bits of code into files in your project, you can click
Apply
or copy the code and paste it into the file. - In some cases, you will need to create these files - and even a folder to contain them - which Cursor will indicate in the instructions preceding the code snippet. The IDE will prompt you to accept the changes made by Cursor.
Go over the steps running the commands and adding the files & code using the flow laid out by cursor. At the end of this flow, run the app locally to see if it works. Troubleshooting might be necessary.
#Troubleshooting
When running your app locally, you might get errors. This is where some experience debugging code might come in handy! Copy and paste the errors in the Cursor chat indicating that this is an error you're getting.
Cursor will explain the error and provide a solution - which might contain several steps and involve modifying several of your project files.
Follow the instructions and apply the changes, then check your app locally again.
You may have to repeat this process several times, until you've fixed all errors.
If, at some point, any of the changes you apply while troubleshooting cause your app to crash, you will see this in the command line.
Copy the error you get there and paste it on the cursor chat, just like you did before.
Cursor will, again, provide a solution that you need to apply.