🚀 IntentTrace

Intent-driven API debugging UI powered by Generative AI

IntentTrace is a developer-focused debugging tool that replaces dashboards, logs, and guesswork with an intent-first interface. Instead of navigating tools manually, developers describe their API issue in plain English — and the UI dynamically assembles the right debugging components to investigate the problem.

This is not a chatbot.
This is Generative UI for debugging.

---

🌐 Live Demo

👉 Try IntentTrace live:
https://intent-trace.vercel.app

Describe an API issue in plain English and see the UI assemble the right debugging tools instantly.

---

✨ What makes IntentTrace different?

Traditional tools:

• Show everything
• Require manual navigation
• Force developers to know where to look

IntentTrace:

• Starts with intent
• Shows only relevant debugging tools
• Hides noise
• Adapts the UI per problem

“Describe the problem → Get the tools you need”

---

🧠 How it works (High-level)

1. Developer types a debugging problem
   Example:

   • “JWT expired”
   • “Which APIs are slow?”
   • “CORS error in browser but works in Postman”

2. AI analyzes the intent

3. Based on the intent, the system:

   • Selects relevant debugging components
   • Renders them directly in the UI

4. No chat UI, no explanations unless needed — just tools.

---

🧩 Core Features

🔍 Intent-Based Component Rendering

• AI decides which debugging cards to show
• No hardcoded conditions
• No manual toggles

---

🔐 Authentication Flow Debugging

AuthFlowCard

• Visualizes login → token → protected API flow
• Clearly highlights failures (e.g. expired tokens, auth issues)
• Renders only when auth-related intent is detected

---

🪪 JWT Token Inspection

JWTDecoderCard

• Decodes JWT header & payload
• Detects token expiration
• Explains why authentication fails
• Never renders unless JWT-related intent exists

---

🌐 Request / Response Debugging

RequestResponseCard

• Displays HTTP method, endpoint, status, and error message
• Useful for 401s, 500s, and failed API calls

---

⚡ Performance & Latency Analysis

LatencyChartCard

• Highlights slow APIs
• Shows response times
• Renders only for performance-related issues

EndpointListCard

• Lists affected endpoints
• Shows which APIs are slow and by how much

---

🧠 Error Insight & Root Cause Analysis

ErrorInsightCard

• Explains possible reasons behind failures
• Helps developers decide next steps
• Only shown when error context exists

---

🧑‍💻 Example Scenarios

🔸 “JWT expired”

UI renders:

• Authentication Flow
• JWT Token Inspector

🔸 “Which APIs are slow?”

UI renders:

• Performance Overview
• Affected Endpoints

🔸 “CORS error in browser but works in Postman”

UI renders:

• Request / Response Debug
• Error Insights

No unnecessary cards.
No irrelevant tools.

---

🏗️ Tech Stack

• React + Vite
• Tambo AI (Generative UI & intent-based rendering)
• Zod (component prop schemas)
• Modern CSS (dark developer-first UI)

---

📁 Project Structure

src/
├── app/
│   └── Layout.jsx                     # Application layout wrapper
│
├── components/
│   ├── core/                          # Core application flow
│   │   ├── DynamicCanvas.jsx          # Intent-driven UI renderer (Tambo output)
│   │   ├── EmptyState.jsx             # Initial state with example prompts
│   │   └── PromptInput.jsx            # Natural language input interface
│   │
│   ├── debug/                         # Intent-driven debugging UI components
│   │   ├── AuthFlowCard.jsx           # Authentication flow & token failure analysis
│   │   ├── CorsInsightCard.jsx        # CORS error detection & browser/Postman mismatch
│   │   ├── EndpointListCard.jsx       # Affected API endpoints with response times
│   │   ├── ErrorInsightCard.jsx       # Root-cause explanations and debugging insights
│   │   ├── JWTDecoderCard.jsx         # JWT token inspection & expiry detection
│   │   ├── LatencyChartCard.jsx       # API latency & performance visualization
│   │   └── RequestResponseCard.jsx    # HTTP request / response debugging
│   │
│   ├── tambo/                         # Tambo UI & SDK components
│   │   ├── base/                      # Internal Tambo rendering primitives
│   │   ├── control-bar.tsx            # Command / interaction UI
│   │   ├── message-input.tsx          # Prompt input for AI threads
│   │   ├── message.tsx                # AI message rendering
│   │   ├── thread-content.tsx         # Conversation thread container
│   │   └── ...                        # Supporting Tambo components
│   │
│   └── ui/                            # Reusable UI primitives
│       ├── Badge.jsx                  # Status & label badges
│       ├── Card.jsx                   # Base card container
│       ├── CodeBlock.jsx              # Syntax-highlighted code blocks
│       └── Divider.jsx                # Visual separators
│
├── data/                              # Mock debugging data
│   ├── mockLogs.js                    # Simulated API logs
│   ├── mockMetrics.js                 # Performance & latency metrics
│   └── mockRequests.js                # Sample HTTP requests
│
├── intents/                           # Intent classification & mapping
│   ├── intentMap.js                   # Intent → component selection logic
│   └── samplePrompts.js               # Example user debugging prompts
│
├── tambo/                             # Generative UI integration layer
│   ├── registry.ts                   # Central registry for all Tambo components
│   ├── thread-hooks.ts               # Hooks for managing AI conversation threads
│   └── utils.ts                      # Shared helpers for Tambo integration
│
├── styles/                            # Styling & theming
│   ├── globals.css                   # Global styles
│   └── theme.css                     # Theme variables (dark developer UI)
│
├── utils/                             # General helper utilities
│   ├── formatters.js                 # Data formatting helpers
│   └── helpers.js                    # Miscellaneous utilities
│
├── App.jsx                            # Root application component
└── main.jsx                           # Application entry point

---

🔌 Tambo Integration

All debugging components are registered centrally in tambo.ts with:

• Name
• Description
• Intent guidance
• Zod propsSchema

This allows the AI to:

• Understand when to render a component
• Avoid rendering irrelevant tools
• Keep the UI clean and focused

---

🎯 Why this matters

IntentTrace demonstrates a new UX pattern:

AI doesn’t answer questions — it assembles interfaces.

This approach:

• Reduces cognitive load
• Speeds up debugging
• Makes complex systems easier to reason about

---

🏁 Status

✅ Core functionality complete
✅ Stable generative UI behavior
✅ Demo-ready for hackathons / showcases

---

📜 License

MIT

---

Built for developers who debug under pressure.