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

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


How It Works

The debug agent operates in a few key steps:

1

Understand

Parses your prompt and extracts functional and visual requirements

2

Generate

Creates or modifies HTML (Website Code) and CSS (Website Design) files based on your prompt

3

Validate

Ensures APIs and logic align with available functions

4

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

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

Example: Specifying the page
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

Example: Expected Behaviour
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

  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.

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.

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.

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​

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

Sample Prompt 4: Deleting sections of the app
In the index.html, remove the recent entries section

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

Last updated