# Debug Agent
A step-by-step walkthrough on how to effectively use Debug Agent for modifying, customizing & debugging apps using natural language prompts.
***
### What is Debug Ai Agent?
It is an intelligent assistant capable of interpreting natural language instructions — commonly referred to as prompts — to perform a wide range of tasks. These include not only debugging existing functionality but also enhancing and extending your application through code generation and feature implementation.
By leveraging this tool, developers can streamline their workflow by describing what they want in plain language, allowing the agent to translate those intentions into functional code, html page generation or UI components.
This guide will walk you through best practices for interacting with the Debug Agent, ensuring that your prompts are clear, effective, and aligned with your development goals.
***
### Models Available
{% hint style="info" %}
*Keying in prompts into the Debug Agent will edit html or CSS code, credits will be consumed with each use, with the performance model costing more. Learn more about the costs in our* [*Debug Pricing Guide*](https://docs.emobiq.com/emobiq-ai/how-pricing-works-in-emobiq-ai/debug-pricing#understanding-how-the-debug-agent-works)
{% endhint %}
***
### How It Works
The debug agent operates in a few key steps:
{% stepper %}
{% step %}
**Understand**
Parses your prompt and extracts functional and visual requirements
{% endstep %}
{% step %}
**Generate**
Creates or modifies HTML (Website Code) and CSS (Website Design) files based on your prompt
{% endstep %}
{% step %}
**Validate**
Ensures APIs and logic align with available functions
{% endstep %}
{% step %}
**Debug**
Identifies and fixes issues such as broken navigation, incorrect API calls, or missing components
{% endstep %}
{% endstepper %}
***
### Best Practices for Prompting
#### 1) Avoid Being Generic
When describing issues or requesting changes, being generic can lead to misunderstandings or incorrect implementations. The Debug AI Agent relies on precise instructions to generate accurate code or resolve issues effectively. By clearly specifying what you see and what you expect, you ensure that the agent understands your requirements correctly.
**Example: Avoiding Generics vs. Being Specific**
| Example | Description |
| ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| ❌ "Fix this page." | This is too vague. The agent doesn’t know which page you’re referring to or what needs fixing. |
| ✅ "Fix the order\_list.html page where clicking an order redirects to a non-existent page." | This is specific. You’ve identified the exact page (order\_list.html) and described the issue (clicking an order leads to a broken link). |
#### 2) Be Specific
Importance of Precision in HTML Page References
To ensure the Debug AI Agent understands exactly which part of your application needs attention, always specify the `.html` file name. This helps avoid confusion and ensures the debug agent targets the correct component.
How to Specify Pages
* Use Exact File Names : Include the .html extension to identify the specific page
* Provide Context : Describe the functionality or behaviour associated with the page
* Use the target function by right clicking the document you would like to reference
Create a return cart button on the header of the return_selection.html page which will
redirect the user to a new create_return.html page. The create_return.html page should
display the customer name and the list of items selected for return (stored in
sessionStorage as returnItems). There should be a "Confirm Return" button upon
clicking it should trigger two API calls to POST the return.
Additional Details to Include
* File Names : Mention relevant files such as ext\_api.txt, requirements.txt, or request.js
* Line Numbers : If applicable, specify line numbers where the issue occurs
* Error Messages : Provide any error messages or logs related to the problem
* Expected Behaviour : Clearly describe what should happen versus what is currently happening
In the return_list.html page, the returns are not being displayed. Instead, I'm seeing
the following message on the page: Failed to load return list. Using sample data is
not allowed. Please edit the code so that it works correctly by fetching data
exclusively from the Business Central API.
#### 3) API Calls
**Ensuring Correct Function Paths**\
One common pitfall is that the Debug Agent might misinterpret or incorrectly reference function names or paths when generating code. To prevent errors, always verify that the generated code aligns with your intended API calls and function references.
**Common Issues**
* **Function Name Mismatches:** The agent may use a different function name than what you specified
* **Incorrect Path References:** The generated code might not match the actual function path defined in your application
**Best Practices for Validation**
1. Cross-Reference with Documentation:
* Compare the generated code with your function list or Word document to ensure accuracy
* Use tools like search functions to locate the correct implementation
2. Check Generated Code:
* Review the HTML or JavaScript code produced by the agent
* Ensure that function calls, API endpoints, and parameters match your specifications
| Example | Image |
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Function List |
|
| Search for the function in the generated html code |
|
By following these best practices, you can significantly improve the effectiveness of your interactions with the Debug AI Agent, leading to more accurate and efficient outcomes.
#### 4) Common errors
Below are some common errors you might encounter while working with the app, along with guidance on how to resolve them.
{% tabs %}
{% tab title="Authentication Token Expired (Error 401)" %}
Description\
The authentication token has expired, which can cause issues when making API calls or accessing protected resources.
Solution\
Refresh the authentication token by logging out and logging back in. If the issue persists, ensure that the token refresh mechanism is functioning correctly.
{% endtab %}
{% tab title="Preview Error" %}
Description\
The AI has detected an error during the preview process, which may affect the functionality or appearance of your application.
Solution\
Click the `Ask AI` button to prompt the Debug agent to analyse and fix the error. This will help identify and resolve any underlying issues in real-time.
{% endtab %}
{% endtabs %}
#### 5) Sample Prompts
Below are some sample prompts you can use as references to help eMOBIQ AI modify or fix your app. These examples illustrate how to structure your requests effectively, ensuring clear communication with the Debug agent.
{% code title="Sample Prompt 1: Editing the functionality of a button" %}
```
In the index.html page when i click new entry i want to create a new entry, it currently allows me to edit the entry instead.
```
{% endcode %}
***
{% code title="Sample Prompt 2: Fixing unlinked buttons & Creating a new page" %}
```
Clicking on any order in the order_list.html page redirects to a non-existent page. Create the order_details.html page with these requirements:
Detail page need to display by selecting order:
Detail page includes:
In Header: Order number, Customer Code & Name, Order Date
In Detail: Item code & name, Unit price, Quantity with uom
In Footer : Sub-total, GST, Total
```
{% endcode %}
***
{% code title="Sample Prompt 3: Fixing Multiple pages at once" %}
```
Can you change all the back buttons in all the pages to a home icon instead and redirect everything to index.html
```
{% endcode %}
***
{% code title="Sample Prompt 4: Deleting sections of the app" %}
```
In the index.html, remove the recent entries section
```
{% endcode %}
***
{% code title="Sample Prompt 5: Fixing minor CSS errors" %}
```
I cant see the bottom of my all my html pages as the task bar is blocking it, fix this issue
```
{% endcode %}
[^1]: By specifying the html page, it helps the AI know which page you need help editing
[^2]: Let AI know what you are seeing and the expected outcome from the page or function
%20(1).png?alt=media)
.png?alt=media)
.png?alt=media)
.png?alt=media)
.png?alt=media)