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.

#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

Download & install 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.

#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 Netflix
This 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 {
    title
    movieInfo: federateMovie {
      data {
        Title
        Plot
        Director
        Genre
        Runtime
        Poster
      }
    }
    imdbId
    slug
moviePoster {
      url
    }
  }
}

The homepage should have a card style for each movie
Each movie page should check for a moviePoster URL and if it doesn't exist use the movieInfo image instead
The project should be set up to use images from either *.graphassets.com or m.media-amazon.com domains 
This should use the App router and not use getStaticPaths
Please 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.

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.