DUET AI — Prompts for Code Generation

Authors: Arjun Vijayvargiya & Hasan Khan

Duet AI is an AI — powered collaborator which is available on Google Cloud Platform with various IDE to help users to perform various software development processes e.g. code assistance, code review, test cases generation etc. Under the hood, DUET AI utilizes Vertex AI platform to generate responses.

In this series of blogs, we will be covering each topic (e.g. review) and sharing our thoughts on the best prompts which could generate better and more favorable responses. The first blog is about the prompts for code generation, the second blog is about the code review and the third and last blog will be for test cases generation. The following work was done using VS Code IDE and used for React. The current blog is first in the series and will cover code generation in the following areas.

1. Code Generation and Auto Completion
2. Code Explanation and Understanding
3. Code Improvement and Optimization
4. Debugging and Troubleshooting

For the other blogs of the series please follow the following links.

DUET AI — Prompts for Code Review

DUET AI — Prompts for Test Case Generation

Code Generation and Auto Completion

Component Creation

• Create a new Next.js component called ‘ProductCard’ that displays product image, title, and price.
• Generate a basic layout for a ‘ContactForm’ component with name, email, and message fields.

API Routes

• Write a Next.js API route to fetch product data from a database.
• Create an API endpoint that handles user registration and authentication.

Data Fetching and Handling

• Write code to fetch blog posts from a headless CMS using getStaticProps.
• Show how to implement client-side data fetching using SWR for dynamic updates.

Code Explanation and Understanding

Explaining Functionality

• Explain what this Next.js middleware function does.
• Break down how data flows through this component.

Clarifying Concepts

• What’s the difference between getStaticProps and getServerSideProps in Next.js?
• Explain how Next.js handles routing and file-based routing.

Code Improvement and Optimization

• Refactoring
• Suggest ways to make this data fetching logic more efficient.
• Can you refactor this component to use functional components instead?

Performance Optimization

• Are there any performance optimizations I can make in this image rendering code?
• How can I improve the SEO of this Next.js page?

Debugging and Troubleshooting

Identifying Errors

• Help me debug why this component isn’t rendering correctly.
• I’m getting an error in my API route. Can you suggest what might be wrong?

Troubleshooting Suggestions

• Suggest possible fixes for this issue where my data isn’t updating dynamically.
• What are some common causes of slow loading times in Next.js apps?

Additional Best Practices

Project Structure and Organization

• What’s the recommended folder structure for a medium-sized Next.js project?
• Suggest best practices for organizing API routes in a Next.js application.

Staying Up-to-Date

• Are there any new Next.js features that would improve this component?
• Show me how to implement [new Next.js feature] in this project.

Important Considerations

• Be Specific The clearer your prompts, the better Duet AI can assist you. Provide context about the component’s purpose or the problem you’re trying to solve.
• Learning the Basics Having a foundational understanding of Next.js concepts and syntax will make Duet AI’s suggestions more valuable.
• Don’t Rely Solely on Duet AI Use Duet AI for guidance and inspiration, but always review and understand the generated code before integrating it. Don’t blindly copy-paste.
• Set the right expectation, Duet AI is an evolving product and we keep improving. Code won’t be perfect and even not compilable, still need to check the import modules, or other missing parts or inconsistencies.

Demo

Follow this for setting up Duet AI:

Repository used: https://github.com/JsIqbal/next-ecommerce

file opened: category-form.tsx

1- Are there any potential bugs or logic errors in this code

2- Check if this code adheres to best practices for handling user input to prevent security vulnerabilities.

3- Write code to fix all of this

4- Are there ways to make this code more efficient or improve its performance?

5- Suggest ways to improve readability with better variable names or comments.

Some good links to read:

https://cloud.google.com/duet-ai/docs/discover/write-prompts

https://www.googlecloudcommunity.com/gc/Community-Blogs/Tips-and-resources-to-maximize-your-productivity-with-Gemini-for/ba-p/702290

Disclaimer: The above are author’s observations and learning while working on a project. It doesn’t reflect their employer’s view.