> For the complete documentation index, see [llms.txt](https://purecodedocs.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://purecodedocs.gitbook.io/docs/features/prompting-techniques.md).

# Prompting  Techniques

{% hint style="info" %}
**What exactly prompting is ?** 

Prompting refers to the method of providing instructions to our coding co-pilot through natural language. You just type a message, and PureCode AI replies based on what you've inputted.
{% endhint %}

## Effective Prompting Strategies

{% stepper %}
{% step %}

## Contextual Prompting

Providing context involves offering background information to help the AI understand the environment or scenario, leading to more accurate and relevant responses.​

**Example:**

Prompt:

```javascript
// In @Navbar.jsx
// Develop a responsive navigation bar featuring dropdown menus for user settings and notifications.
// Ensure the design is mobile-friendly and aligns with the project's existing styling conventions.
```

Here, specifying `@Navbar.jsx` directs the AI to focus on that particular file. Describing the desired features and design considerations provides clear guidance, resulting in code that seamlessly integrates with your project.​

**What to Avoid:**

Prompt:

```javascript
// @form.jsx
// Create a form.
```

This prompt is too vague, lacking details about the form's purpose, fields, validation requirements, or design preferences, making it challenging for the AI to generate useful code.

{% endstep %}

{% step %}

## Using Image Prompts

Incorporating images into your prompts allows PureCode AI to generate solutions that closely match your visual expectations.​

**Simple Image Upload Prompting:**

Prompt:

```javascript
// Build and refine the UI to closely match the attached image. Ensure precise styling, spacing, and responsiveness.
```

**Image Prompting with Detailed Instructions:**

Prompt:

```javascript
// Develop a mind-mapping application resembling the attached screenshot. The app should allow users to:
// - Add, edit, and delete nodes representing ideas.
// - Connect nodes with draggable lines to illustrate relationships.
// - Move nodes around the canvas with a smooth drag-and-drop interface for easy organization.
```

Combining detailed descriptions with visual references provides the AI with a clear understanding of your expectations, leading to more accurate and satisfactory code outputs.​

**Tips for Effective Image Prompting:**

* **Be Specific:** Clearly describe the desired features, functionalities, and design elements.​
* **Provide Context:** Explain the purpose of the application or component to guide the AI's focus.​
* **Use Visual References:** Attach relevant images to offer a concrete example of your expectations.​

This approach aligns with best practices for AI image prompting, emphasizing the importance of specificity and context to achieve desired results.

{% endstep %}

{% step %}

## **Incremental prompting**

Breaking down complex tasks into smaller, sequential steps helps guide PureCode AI through the development process methodically.​

**Example:**

Prompt:

```javascript
// @api.js
// Implement a user authentication function with the following steps:
// 1. Validate the provided credentials against the user database.
// 2. Generate a JWT token upon successful validation.
// 3. Set up secure session management to store the token.
// 4. Implement token expiration and renewal mechanisms to maintain session security.
```

This structured approach ensures that each aspect of the authentication function is addressed systematically, leading to comprehensive and secure code implementation.​

**Best Practices:**

* **Sequential Steps:** Outline the process in a logical order to facilitate step-by-step development.​
* **Clear Objectives:** Define the goal of each step to maintain focus and clarity.​
* **Comprehensive Coverage:** Ensure all necessary components are included to avoid omissions.​

This method aligns with the principle of encouraging step-by-step reasoning, enhancing the AI's ability to generate detailed and accurate code.

{% endstep %}

{% step %}

## **Feedback integration**

Providing constructive feedback on the AI's outputs allows for refinements, ensuring the generated code meets your specific requirements.​

**Example:**

Prompt:

```javascript
// @useAuth.js
// The authentication function performs well. However, please ensure it:
// - Handles token expiration gracefully by prompting users to re-authenticate.
// - Provides clear error messages for failed authentication attempts.
// - Includes logging for monitoring authentication processes.
```

This feedback highlights specific areas for improvement, guiding the AI to refine the code accordingly.​

**Tips for Effective Feedback:**

* **Be Specific:** Identify particular aspects that need adjustment or enhancement.​
* **Be Constructive:** Frame feedback positively to encourage productive revisions.​
* **Be Concise:** Communicate your points clearly without unnecessary details.

{% endstep %}

{% step %}

## Utilizing File References for Specific Guidance

Referencing specific files or components in your prompts directs PureCode AI's focus, ensuring that code generation aligns with your project's structure.​

**Example:**

Prompt:

```javascript
// In @Dashboard.jsx
// Implement a feature that displays user statistics in a graphical format using Chart.js.
// The dashboard should present:
// - A line chart depicting user engagement over the past year.
// - A pie chart showing the distribution of user demographics.
// - A bar chart comparing monthly active users across different regions.
```

By specifying `@Dashboard.jsx`, you guide the AI to generate code pertinent to that file, ensuring consistency and relevance within your project's architecture.​

**Best Practices:**

* **Explicit References:** Clearly mention the file or component to focus the AI's attention.​
* **Detailed Descriptions:** Provide comprehensive details about the desired functionality or feature.​
* **Consistency:** Ensure that the generated code aligns with your project's existing structure and conventions.
  {% endstep %}
  {% endstepper %}

### Best Practices for Prompt Engineering

1. **Be Specific and Provide Context**

   Clearly define the task and offer sufficient background information. This helps the AI model understand the scope and nuances of your request.

   Example:

   ```javascript
   //In @Navbar.jsx Create a responsive navigation bar component with dropdown menus for user settings and notif
   ```

In this example, `@Navbar.jsx` specifies the exact file, guiding the AI to update the navigation bar component accordingly.

     Example to Avoid:

```javascript
// @form.jsx
// Create a form.
```

2. **Use Structured Formats**

Organize your prompts using bullet points, numbered lists, or templates to outline requirements clearly.

Example:

```javascript
// In @Form.jsx
// Implement a user registration form with the following fields:
// Full Name, Email Address, Password, Confirm Password and Agree to Terms and Conditions
// Ensure form validation, responsive design, and user-friendly error messages.
```

3. **Encourage Step-by-Step Reasoning**

   Break down complex tasks into sequential steps to guide the AI through the process.

   Example:

   ```javascript
   // @api.js
   // Implement a function to authenticate a user:
   // 1. Validate the provided credentials.
   // 2. Generate a JWT token for valid credentials.
   // 3. Set up session management to store the token securely.
   // 4. Implement token expiration and renewal logic.
   ```

#### 4. Provide Feedback for Refinement

After the AI generates a response, give it specific feedback for refinement.

Example:

```javascript
// @useAuth.js
// The authentication function works fine, but make sure it handles token expiration and asks 
```

#### 5. Utilize File References for Specific Guidance

Reference specific files or components using the `@` symbol to guide the AI's focus.

*Example:*

```javascript
// @index.jsx
// Refactor the 'HomePage' component to ensure it loads efficiently by minimizing unnecessary
```

## Common Mistakes to Avoid in Prompt Engineering

### 1. Being Too Vague

Vague prompts lead to unclear responses. Always ensure your prompt provides sufficient detail.

*Example to Avoid:*

```javascript
// @page.jsx
// Generate a component.
```

*Improvement:*

```javascript
// @page.jsx
// Create a responsive navigation bar with a dropdown menu for user settings and notifications
```

###  **2. Combining Multiple Tasks**

Avoid combining too many tasks in a single prompt as it might confuse the AI and lead to incomplete or irrelevant responses.

*Example to Avoid:*

```javascript
// @helpers.js
// Refactor the fetchData function and also write unit tests for it.
```

*Improvement:*

```javascript
// @helpers.js
// Refactor the fetchData function to improve performance and readability.
```

```javascript
// @helpers.test.js
// Write unit tests to ensure the fetchData function is working correctly.
```