This is a submission for the Sanity Challenge, Path One: Ship an Agent That Queries Real Content

What I Built

I have worked with production systems where version upgrades need to be planned carefully. In a live environment, an update is not just about running a command. As developers, we need to understand breaking changes, compatibility concerns, configuration updates, and potential impact before making the change.

I have often found myself going back to documentation or looking for additional guidance before making these decisions. Relevant information can be spread across multiple documentation pages, making the investigation process time-consuming.

That experience inspired me to build DocTrace.

I wanted to explore whether an AI agent could make this process more focused: instead of asking a general-purpose chatbot about a migration, give it a structured, curated documentation source and let it investigate the relevant information before answering.

DocTrace is an AI documentation investigation agent focused on Angular 20 → Angular 21 migration.

For this challenge, I intentionally kept the initial Knowledge Base focused on Angular 20 → 21. The same architecture can be extended to future Angular versions by adding the relevant documentation to Sanity and updating the Knowledge Base.

Migration questions often require checking several pieces of documentation: breaking changes, configuration changes, testing updates, and version-specific behavior. DocTrace turns this into a focused investigation workflow.

The documentation is stored as structured content in Sanity, organized into a Knowledge Base, and exposed to the agent through Sanity Context MCP.

A user can ask a question such as:

What are the main breaking changes I should consider when migrating from Angular 20 to Angular 21?

DocTrace retrieves relevant documentation from the connected Sanity Knowledge Base ..

..and uses that context to generate the investigation result

The agent is intentionally scoped to Angular 20 → 21 migration rather than being a general-purpose chatbot. This makes it possible to curate a small but meaningful documentation set and evaluate how an agent works with structured content.

Demo

The deployed application provides a simple interface where users can ask Angular migration questions and receive an investigation based on the connected Sanity documentation.

Code

                    ┌─────────────────────┐
                    │      DocTrace UI     │
                    │      Next.js         │
                    └──────────┬──────────┘
                               │
                               ▼
                    ┌─────────────────────┐
                    │   Next.js API

How I Used Sanity

Sanity is the documentation source and structured content layer behind the agent.

I created a custom documentation schema with fields including:

• title
• technology
• version
• type
• summary
• content
• sourceUrl
• publishedAt
• relatedVersions
• breakingChanges

I then created structured documentation entries focused on Angular 20 → Angular 21:

Angular 21 Migration Guide
Angular 20 to 21 Migration Guide
Angular 21 Zoneless Change Detection
Angular 21 Testing with Vitest
Angular 20 vs Angular 21 Migration Checklist

These documents were added to a Sanity Knowledge Base.

Then i created a Sanity Context MCP endpoint connected to that Knowledge Base.

The agent connects to the MCP endpoint from the server side and uses the available Context tools to investigate the documentation before generating its response.

The agent is instructed to:

Use the Sanity Knowledge Base for Angular migration questions.
Prefer retrieved Sanity content over unsupported general knowledge.
Use multiple investigation steps when necessary.
Avoid inventing information that is not supported by the available documentation.
State when the available documentation is insufficient.

The resulting architecture is:

---
config:
  theme: base
  themeVariables:
    fontFamily: '"Public Sans", system-ui, sans-serif'
    fontSize: 20px

    cScale0: "#f3d6d8"
    cScaleLabel0: "#69444a"
    cScaleInv0: "#c98f97"

    cScale1: "#f3dfc1"
    cScaleLabel1: "#715b38"
    cScaleInv1: "#d0a866"

    cScale2: "#d8e5d2"
    cScaleLabel2: "#4c6047"
    cScaleInv2: "#9bb78f"
---

flowchart LR

    A["💬 User Question"]
        --> B["🖥️ DocTrace UI<br/>Next.js"]

    B --> C["⚙️ API Route<br/>AI SDK"]

    C --> D["🤖 Gemini<br/>AI Agent"]

    D --> E["🔌 Sanity Context<br/>MCP"]

    E --> F["📚 Sanity<br/>Knowledge Base"]

    F --> G["📄 Structured<br/>Angular Documentation"]

    D --> H["✅ Investigation<br/>Result"]

    classDef user fill:#f3d6d8,stroke:#c98f97,color:#69444a,stroke-width:2px
    classDef app fill:#f3dfc1,stroke:#d0a866,color:#715b38,stroke-width:2px
    classDef sanity fill:#d8e5d2,stroke:#9bb78f,color:#4c6047,stroke-width:2px

    class A,H user
    class B,C,D app
    class E,F,G sanity

This allowed me to use Sanity as an actual knowledge source for the agent rather than simply using Sanity as a database for the frontend.

Sanity Project Details

Sanity -> https://www.sanity.io/
Sanity Project ID: 3fv91nvs

The project contains the structured Angular documentation used by the DocTrace Knowledge Base.