Skip to content

5.7 Test the UI Copilot Chat

You are now ready to test the end-to-end copilot chat feature. You must run the FastAPI server and the React SPA locally from VS Code debug sessions. In this next section, you will see how to do this locally for rapid prototyping and testing.

Test with VS Code

Visual Studio Code provides the ability to run applications locally, allowing for debugging and rapid testing.

Start the API

The UI relies on the Woodgrove Bank API to be running. As you did to test the API via its Swagger UI, follow the steps below to start a debug session for the API in VS Code.

  1. In Visual Studio Code Run and Debug panel, select the API Debugger option for your OS from the debug configurations dropdown list.

    Screenshot of the Run and Debug panel, with the Run and Debug configurations dropdown list expanded and the AI Debugger options highlighted.

  2. Select the Start Debugging button (or press F5 on your keyboard).

    Screenshot of the Start Debugging button highlighted next to the Run and Debug configurations dropdown list.

  3. Wait for the API application to start completely, indicated by an Application startup complete. message in the terminal output.

    Screenshot of the Start Debugging button highlighted next to the Run and Debug configurations dropdown list.

Start the Portal

With the API running, you can start a second debug session in VS Code for the Portal project.

  1. Return to the Run and Debug panel in Visual Studio Code and select the Portal Debugger option from the debug configurations dropdown list.

    Screenshot of the Run and Debug panel, with the Run and Debug configurations dropdown list expanded and the Portal Debugger options highlighted.

  2. Select the Start Debugging button (or press F5 on your keyboard).

    Screenshot of the Start Debugging button highlighted next to the Run and Debug configurations dropdown list.

  3. This should launch the Woodgrove Bank Contract Management Portal in a new browser window (http://localhost:3000/).

  4. On the Dashboard page, enter the following message into the chat and send it:

    Paste the following prompt in the copilot chat box!

    1
    What IT vendors are we working with?

    Screenshot of the copilot response to the above question.

  5. Next, ask the following question about vendor invoicing accuracy:

    Paste the following prompt in the copilot chat box!

    1
    What vendor has had the most invoicing issues?

    Screenshot of the copilot's response to the above question.

The response to the previous question may be accurate, but the copilot did not provide any insights about why this vendor was specified as having the most invoicing issues. You may also have received an error because the copilot lacks guidance on correctly selecting the proper function for augmenting the prompt. In either case, prompt engineering can help improve your copilot's response!

In the next task, you will iterate on your copilot's prompt to refine it and improve the quality and groundedness of the responses it provides.

Leave the API and Portal debug sessions running for the next task.