Pieces 🌟Of all the recent developments in AI tools, ChatGPT stands out as one of the most advanced chatbots, with wide-ranging applications in many fields. This revolutionary chatbot, developed by OpenAI, has attracted significant attention in the tech community due to its proficiency in AI code generation. Powered by advanced natural language processing software and deep learning techniques, ChatGPT can assist developers in writing code snippets, suggesting solutions, and even offering programming guidance.
While ChatGPT’s code generation is already robust, combining it with developer productivity tools can further enhance its potential. Pieces, also known as Pieces for Developers, is a productivity tool specifically designed for developers.
It leverages AI to save, generate, enrich, reuse, and share code. It also integrates seamlessly with your browser, IDE, and collaboration tools, so you can save code snippets from anywhere. Additionally, it uses on-device machine learning to add titles, descriptions, tags, related links, and other related contexts to your code snippets, making them easier to find and use.
This article explores how to write code with ChatGPT and use Pieces to save, organize, and reuse the generated code snippets.
Using ChatGPT to Write Code and Saving Snippets in Pieces
This tutorial explains how to write code with ChatGPT and save snippets forever. You'll learn how to do this by building a blog app in Next.js solely based on code generated by ChatGPT and some code snippets from TinaCMS's official documentation.
Prerequisites
To complete this tutorial, you'll need an OpenAI account and Node.js and npm installed on your local computer.
Installing Pieces
You can install Pieces by following the instructions in the documentation, which provides installation steps for Mac, Windows, and Linux operating systems.
Install the desktop application, browser extension, and IDE extension for Pieces. You need to install it across all three platforms. The desktop application will be used to create, retrieve, and transform code snippets; the browser extension will be used mostly to save, copy, and share code snippets; and the IDE extension will be used to save, reuse, and share code snippets.
You will also find steps for installing Pieces on different platforms, such as IDEs and browsers, in the left sidebar.
Follow the installation steps for your preferred IDE, browser, and operating system.
Setting Up Your Next.js Application
The first step is to create a new Next.js application or use an existing Next.js application if you have one. As this tutorial shows how to generate code using ChatGPT, head over to ChatGPT and type in the prompt below:
Show me how to initialize a Next.js application. The application should be named "tinablog" and the name of the folder should also be "tinablog".
The prompt above asks ChatGPT to show you how to initialize a Next.js application and provides some context to guide ChatGPT, including the application and directory names. You should get a response similar to the one in the following screenshot:
As a side note, with Pieces, you don't have to worry about losing your code snippets from ChatGPT or any other source. For example, you can save a code snippet from the ChatGPT response above forever. To do that, first enable the Pieces browser extension you installed earlier:
Then, go back to the ChatGPT chat thread, reload the page, and hover over any of the code snippets. You'll see two Pieces buttons called Copy and Save and Share:
Click the Copy and Save button to save the code snippet forever. To continue with the Next.js application, save all the code snippets in the ChatGPT response by clicking the Copy and Save button, as you will have to use those code snippets as you proceed with the tutorial.
Next, open the installed Pieces desktop application to see all the code snippets you've saved:
In the screenshot above, you can see that the Pieces desktop application has automatically enriched each snippet with titles, descriptions, tags, and related links.
Open your terminal or command line interface and change the directory to the preferred directory where you want your Next.js application to be initialized. Copy the code snippet titled "Next.js blog creation with npx" from Pieces and run it in your terminal.
You should also see some prompts. For this tutorial, you can select the default answers by punching the Enter key until the package installation starts. The final terminal result should look like the following:
Setting Up TinaCMS
The next step in building this demo blog application is to set up TinaCMS, an open source headless CMS that supports the Markdown format.
Go to TinaCMS's official documentation on TinaCMS and Next.js, which explains how to set up a TinaCMS blog on a Next.js application. You should see the same code snippets as in the following screenshot:
Save all the code snippets to Pieces, just as you did for the ChatGPT response earlier. Once you've saved the code snippets on the page, launch your Pieces desktop application. It should contain the code snippets you just saved:
Change the directory to the Next.js application with cd tinablog and run the "TinaCMS CLI Initialization" command saved in Pieces.
You'll be prompted with some questions. Use the following responses:
- When asked for your Tina Cloud Client ID, as the prompt says, you can hit Enter to set it later.
- Select npm as your package manager.
- Select Next.js as your framework.
- Select "No" when asked whether you'd like to use TypeScript for your Tina configuration.
After completing these prompts, the final result should look like the following screenshot:
Using ChatGPT to Write Code for the Post Listing Page
In this section, you'll use ChatGPT to create a page in the application that lists all blog posts. Enter the following useful ChatGPT prompts:
Show me how to add a post listing page to a Next.js and TinaCMS application
Use the guides below
- Do not create separate components or pages.
- Ensure you add everything in a single file.
- Export const getStaticProps async function that gets and returns data, query, and variables from client.queries.postConnection()
- Export default PostList(prop) function that gets the prop data from the returned data, query, and variables
- Ensure you style the page.
The prompt above asks ChatGPT to describe how you can add a post listing page to your Next.js TinaCMS application and includes some context to guide how it should respond. You should receive a response similar to this:
You should note that ChatGPT may not always return the exact same response, but the prompt should produce a response with a similar intention. If you would like to continue with the exact code used in this tutorial, you can find it here.
Using ChatGPT to Debug Code for the Application
Before saving this code to Pieces, you should debug and demo it to ensure it is working as expected. Change the directory to the src/pages folder of your application, create a new file called posts.js, and paste the code snippet into the newly created file.
After that, change the directory back to your Next.js application root directory and run the npm run dev command to compile the application. The provided code snippet produces the following error:
You can now use ChatGPT for debugging posts.js with the following prompt:
There are a few errors in the code snippet you provided above. You can fix them by doing the following:
- You should add await before client.queries.postConnection();
- I guess there should be a postConnection before data.posts.edges. It should be like data.posts.postConnection.edges
- The node child should be {node.node._sys.filename} not {node.sys.filename}
ChatGPT will then amend the code in response to your feedback. As before, remember that ChatGPT might not return the same response. Hence, here is the link to the code snippet from the response shown in the screenshot below:
Copy the code snippet from the response, then replace the contents of the posts.js file with the copied code. Once you save the changes, the code should compile successfully:
View the page by visiting {{APPLICATION_URL}}/posts, where {{APPLICATION_URL}} is your server URL. In this example, it's http://localhost:3000. You can find your server URL in the compile log. See the screenshot below for more details:
When you try to load the post page, you'll get a server error. This is because the data.loading variable has an undefined value, and an undefined value cannot be serialized as JSON:
Head back to ChatGPT to debug posts.js with the following ChatGPT prompt examples:
There are a few errors in the corrected code snippet you provided above. You can fix them by doing the following:
- Remove everything that has to do with loading and error. (It should be const { data } = await client.queries.postConnection();)
- The node child should be {node.node._sys.filename} not {node.data.title}
ChatGPT will again rework the code in response to your feedback. Here is the link to the code snippet shown in the screenshot below:
Copy the code snippet in the response, go to your posts.js file, remove the existing code in the file, and paste the code snippet you copied into posts.js. Upon saving the changes, the code should compile successfully:
Proceed to view the page by visiting {{APPLICATION_URL}}/posts. Upon visiting the page, the example produces another error:
You will have to head back to ChatGPT to debug posts.js by providing the prompt below:
There are a few errors in the corrected code snippet you provided above. You can fix them by doing the following:
- Since you are no longer returning the "post" key, data.posts.postConnection.edges.map(({ node }) should be data.postConnection.edges.map(({ node })
- Remove the "link" tag and use "a" tag
- The node child should be {node._sys.filename} not {node.node._sys.filename}
The prompt above produces the following response, which you can also find here:
Once again, replace the contents of the posts.js file with this updated code. Save the changes, and the code will compile:
When you view the page by visiting {{APPLICATION_URL}}/posts, it should load successfully without any errors:
Before you proceed to demo the application, save the final, corrected snippet using Pieces. To do that, head back to ChatGPT, ensure you have the Pieces browser extension enabled, and use the Copy and Save button.
Pieces also provides a transform code feature. This feature enables you to make your code snippets more readable by adding inline comments and optimizing the code for better performance.
To use the code transformation feature, open the Pieces desktop app, select the snippet starting with "React Post List Component," and click the Edit icon in the upper right:
You'll be presented with the transform code interface (edit mode):
In edit mode, you can click the Improve Readability icon on the right side of the screen to make the code more readable. Clicking this icon will apply improvements such as adding comments and making the code more legible, as you can see in the following screenshot:
Feel free to play around with other code transformation features in edit mode.
Furthermore, the Pieces Copilot within the desktop application has ChatGPT and proprietary AI models built in, enabling you to generate code snippets right within Pieces. This awesome feature not only enhances your productivity but also minimizes the tools required for code generation, writing, saving, and reuse. Visit the official documentation to learn how to utilize this functionality.
Lastly, proceed to demo the application. Open your browser, paste in {{APPLICATION_URL}}, and visit the page:
To view the TinaCMS admin page, visit {{APPLICATION_URL}}/admin/index.html:
Click the Enter Edit Mode button to start managing your blog application. Feel free to add two or more blog posts. You can also view the post listing page to view all the blog posts by visiting {{APPLICATION_URL}}/posts. If you used the ChatGPT-generated code snippets, the page should look like the screenshot below:
Finally, you can view an individual blog post by clicking any of the listed posts. The default blog page design should look like the screenshot below:
Conclusion
In this article, you learned how to write code with ChatGPT and save that code to Pieces, a free AI tool and robust developer productivity platform. You created a blog app in Next.js using ChatGPT code generation and saved the generated code in Pieces. Pieces provides developers with persistent context and easy access to previously saved snippets, making the software development process more efficient and streamlined.
