Skip to main content
In this tutorial, we will explore how to build a custom human annotation interface for Phoenix using Lovable. We will then leverage those annotations to construct experiments and evaluate your application. The purpose of a custom annotations UI is to make it easy for anyone to provide structured human feedback on traces, capturing essential details directly in Phoenix. Annotations are vital for collecting feedback during human review, enabling iterative improvement of your LLM applications.

"Applying the scientific method to building AI products" from Eugene Yan in https://eugeneyan.com/writing/eval-process

By establishing this feedback loop and an evaluation pipeline, you can effectively monitor and enhance your system’s performance.

Notebook Walkthrough

Google Colab

colab.research.google.com
We will go through key code snippets on this page. To follow the full tutorial, check out the notebook or video above.

Generate traces to annotate

We will generate some LLM traces and send them to Phoenix. We will then annotate these traces to add labels, scores, or explanations directly onto specific spans.
We deliberately generate some bad or nonsensical traces in the system prompt to demonstrate annotating and experimenting with different types of results.

Launch Custom Annotation UI

Visit our implementation here: https://phoenix-trace-annotator.lovable.app/
Note: This annotation UI was built for Phoenix Cloud demo purposes and is not optimized for high-volume trace workflows.
How to annotate your traces in Lovable:
  1. Enter your Phoenix Cloud endpoint, API key, and project name. Optionally, also include an identifier to tie annotations to a specific user.
  2. Click Refresh Traces.
  3. Select the traces you want to annotate and click Send to Phoenix.
  4. See your annotations appear instantly in Phoenix.
This tool was built using the Phoenix REST API. For more details on how to build your own custom annotations tool to fit your needs, see here.

Create a dataset from annotated spans

Build an Eval based on annotations

Next, you will construct an LLM-as-a-Judge template to evaluate your experiments. This evaluator will mark nonsensical outputs as incorrect. As you experiment, you’ll see evaluation results improve. Once your annotated trace dataset shows consistent improvement, you can confidently apply these changes to your production system.

Experimentation Example: Improving the System Prompt

The next step is to form a hypothesis about why some outputs are failing. In our full walkthrough, we demonstrate the experimentation process by testing out different hypotheses such as swapping out models. However, for demonstration purposes, we will show an experiment that will almost certainly improve your results: modifying the weak system prompt we originally used.
Here, we expect to see improvements in our experiment. The evaluator should flag significantly fewer nonsensical answers as you have refined your system prompt.

Applying Improvements

Now that we’ve completed a successful experimentation cycle and confirmed our improvements on the annotated traces dataset, we can update the application and test the results on the broader dataset. This helps ensure that improvements made during experimentation translate effectively to real-world usage and that your system performs reliably at scale.

Tips for building your custom annotation UI

Here is a sample prompt you can feed into Lovable (or a similar tool) to start building your custom LLM trace annotation interface. Feel free to adjust it to your needs. Note that you will need to implement functionality to fetch spans and send annotations to Phoenix. We’ve also included a brief explanation of how we approached this in our own implementation. A tool like this can benefit teams that want to collect human annotation data without requiring annotators to work directly within the Phoenix platform. You can also configure features like “thumbs up” and “thumbs down” buttons to streamline filling in annotation fields. Once submitted, the annotations immediately appear in Phoenix. Prompt for Lovable: Build a platform for annotating LLM spans and traces:
  1. Connect to Phoenix Cloud by collecting endpoint, API Key, and project name from the user
  2. Load traces and spans from Phoenix (via REST API or Python SDK).
  3. Display spans grouped by trace_id, with clear visual separation.
  4. Allow annotators to assign a label, score, and explanation to each span or entire trace.
  5. Support sending annotations back to Phoenix and reloading to see updates.
  6. Use a clean, modern design
Details on how we built our Annotation UI: ✅ Frontend (Lovable):
  • Built in Lovable for easy UI generation.
  • Allows loading LLM traces, displaying spans grouped by trace_id, and annotating spans with label, score, explanation.
✅ Backend (Render, FastAPI):
  • Hosted on Render using FastAPI.
  • Adds CORS for your Lovable frontend to communicate securely.
  • Uses two key endpoints:
    1. GET /v1/projects/{project_identifier}/spans
    2. POST /v1/span_annotations