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

How It Works
The debug agent operates in a few key steps:
Understand
Parses your prompt and extracts functional and visual requirements
Generate
Creates or modifies HTML (Website Code) and CSS (Website Design) files based on your prompt
Validate
Ensures APIs and logic align with available functions
Debug
Identifies and fixes issues such as broken navigation, incorrect API calls, or missing components
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
❌ "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 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: 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
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
Check Generated Code:
Review the HTML or JavaScript code produced by the agent
Ensure that function calls, API endpoints, and parameters match your specifications
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.

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.
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.
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.
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
Can you change all the back buttons in all the pages to a home icon instead and redirect everything to index.html
In the index.html, remove the recent entries section
I cant see the bottom of my all my html pages as the task bar is blocking it, fix this issue
Last updated