[{"data":1,"prerenderedAt":306},["ShallowReactive",2],{"page-agentic-analysis-report":3},{"doc":4,"isFallback":305},{"id":5,"title":6,"body":7,"description":266,"extension":267,"featureImage":268,"featured":21,"links":269,"meta":270,"navigation":21,"order":271,"path":272,"seo":273,"stem":274,"tags":275,"tools":279,"__hash__":304},"work_en\u002Fwork\u002Fagentic-analysis-report.md","Agentic Analysis Report",{"type":8,"value":9,"toc":254},"minimark",[10,14,24,29,32,36,43,49,55,59,62,65,76,80,83,86,91,94,97,100,104,107,110,113,121,125,128,131,134,137,144,151,155,158,161,164,171,175,181,187,193,199,206,210,213,247,251],[11,12,6],"h1",{"id":13},"agentic-analysis-report",[15,16,17],"p",{},[18,19],"video",{"src":20,"controls":21,"preload":22,"muted":21,"poster":23},"\u002Fimages\u002Fagentic-analysis-report\u002Fanalysis-report.webm",true,"none","\u002Fimages\u002Fagentic-analysis-report\u002Fanalysis-report-feature.png",[25,26,28],"h2",{"id":27},"tldr","TL;DR",[15,30,31],{},"Designed and led frontend development of the Agentic Analysis Report, the most technically ambitious feature shipped during my time at Keatext. The report takes a CSV through the NLP pipeline and an LLM to generate a detailed written analysis: an overall summary, breakdown of key topics, recommendations, and a short implementation roadmap. It also included a filtering workflow, in-browser PDF export, multi-language generation, and an agentic chat interface for querying the dataset. A marquee demo feature that generated strong excitement with prospective customers.",[25,33,35],{"id":34},"context","Context",[15,37,38,42],{},[39,40,41],"strong",{},"My role:"," Designer and primary frontend developer; approximately 50% of active implementation, with involvement reviewing every PR that shipped",[15,44,45,48],{},[39,46,47],{},"Stack:"," React, TypeScript, RTK Query, server-sent events, react-pdf",[15,50,51,54],{},[39,52,53],{},"Timeline:"," Design and development from Q3 2025; first release Q4 2025; filtering, PDF, agent panel, and additional features shipping through Q1-Q2 2026; multi-language support in QA",[25,56,58],{"id":57},"background","Background",[15,60,61],{},"The Agentic Analysis Report was the centrepiece of a longer-running initiative to turn Keatext into an automonous analyst, reducing the interpretive work a CX professional has to do by having the product do more of it. Earlier steps in that initiative included Focus Recommendations and its Actionable Insights module. The Agentic Analysis Report represented a step change: a full written report, generated by an LLM, grounded in the platform NLP pipeline output.",[15,63,64],{},"The project started from scratch, built around the upload of a single CSV containing any number of text and metadata fields. Unlike previous implementations that required users to manually configure the satisfaction field, the Agentic Analysis Report detected it automatically in the backend. Users could correct a mis-identified field, but in most cases the setup required nothing from them. The question driving the project was how much of the analytical workflow we could hand off to the model.",[15,66,67],{},[68,69,70,71],"em",{},"Focus Recommendations, which the Agentic Analysis Report largely superseded, is covered in a ",[72,73,75],"a",{"href":74},"\u002Fwork\u002Ffocus-recommendations","separate case study ->",[25,77,79],{"id":78},"what-i-did","What I did",[15,81,82],{},"I designed the feature end-to-end and led frontend development, handling the report display, API integration, intermediate and error states, chart implementation, filtering workflow, PDF generation, and the agent interface. I also proposed the architecture for multi-language support and collaborated with the NLP team to translate elasticity into something understandable for non-technical users.",[15,84,85],{},"Four problems shaped the most important decisions and customer interviews during the prototype phase shaped what the feature became.",[87,88,90],"h3",{"id":89},"research-and-refinement","Research and refinement",[15,92,93],{},"We involved customers through interviews using an early prototype, testing assumptions before committing to the full build. The findings changed the feature in concrete ways.",[15,95,96],{},"There were initially sections for \"topics\" and \"drivers\". Interviews showed users did not meaningfully distinguish between them; the separation added structure without adding clarity. We merged them. A segmentation analysis that had performed well in prototyping did not meet expectations with real customers and was cut entirely.",[15,98,99],{},"Impact was the most significant shift. The prototype presented it primarily as a number, which required explanation and created friction. We moved it to the meter visualisation, keeping the underlying figures accessible for users who wanted to go deeper but leading with the visual. This became the general principle: move from numbers to labels and visualisations where possible, preserving depth without surfacing it by default. The interviews also clarified which sections of the report needed descriptive text to orient users, and which could stand on their own, directly informing how the LLM output was structured between prose and data.",[87,101,103],{"id":102},"designing-for-constrained-space","Designing for constrained space",[15,105,106],{},"The application was built around vertical panels (navigation, filters, data) that had accumulated over time. Adding a chat interface for the agent introduced significant pressure on horizontal space, particularly at 1366x768, the smallest viewport we needed to support according to our user data.",[15,108,109],{},"The core constraint was that the agent panel needed to be resizable but not collapsible. Navigation was already collapsible, and reasonable to assume users would collapse it during report workflows where it is not a core part of the task. The filter panel was also collapsible. The problem was primarily the report configuration screen, which included a data table, and where the agent would ultimately be implemented as well.",[15,111,112],{},"I landed on a horizontal layout for the filters, positioned above the table rather than in a side panel. This freed up the horizontal space the table needed, reduced the total number of competing panels, and established a reusable pattern for additional configuration options in future screens.",[15,114,115],{},[116,117],"img",{"alt":118,"src":119,"title":120},"Layers are now laid out above the table, saving critical horizontal space","\u002Fimages\u002Fagentic-analysis-report\u002Freport-creation-filters.png","Report configuration screen with horizontal filters",[87,122,124],{"id":123},"communicating-impact","Communicating impact",[15,126,127],{},"Similar to Focus Recommendations, the Agentic Analysis Report surfaces a four-quadrant chart plotting topics by two axes. The methodology here uses elasticity rather than correlation, a more rigorous measure of how strongly changes in a topic relate to changes in satisfaction. The challenge was the same: making this meaningful to CX professionals who are unlikely to be familiar with elasticity as a concept.",[15,129,130],{},"I called it \"impact\", avoiding the term entirely in the user interface.",[15,132,133],{},"The net elasticity value (positive minus negative) was visualised as a meter. The meter could be expanded to reveal the positive and negative components separately, giving users who wanted more detail a path to it without surfacing complexity by default.",[15,135,136],{},"Sorting introduced a subtler problem. Sorting topics by net elasticity alone would misrepresent volatile topics; a subject with strong positive and negative elasticity would produce a small net value and drop toward the bottom of the list, despite being highly significant. I used total magnitude (the absolute sum of positive and negative elasticity) as the sort value instead, surfacing the most impactful topics, rather than the most polarized. Total magnitude was not exposed directly to users; it informed the order without requiring explanation.",[15,138,139],{},[116,140],{"alt":141,"src":142,"title":143},"The impact meter could be expanded to access raw stats","\u002Fimages\u002Fagentic-analysis-report\u002Fimpact-meter-states.png","Impact meter, collapsed and expanded",[15,145,146],{},[116,147],{"alt":148,"src":149,"title":150},"The impact chart classifies topics as strengths, weaknesses, or nice to have","\u002Fimages\u002Fagentic-analysis-report\u002Fimpact-chart.png","Impact vs. Satisfaction chart",[87,152,154],{"id":153},"the-agent-interface","The agent interface",[15,156,157],{},"The agent panel provides a chat interface for querying the dataset and asking questions about the report following generation. The longer-term vision is to bring the agent into the full application, not just the report.",[15,159,160],{},"The design focus for the agent was microinteractions. In a data-heavy application where most interactions are immediate, a conversational interface introduces a new kind of waiting, and how that wait feels matters. Chat elements appearing without transition are jarring; they break the conversational flow the interface is trying to establish.",[15,162,163],{},"I implemented subtle animations and transitions throughout: elements easing in rather than snapping, and a bouncing dot animation while waiting for agent responses, the same pattern chat applications use to show a contact is typing. The effect is small but meaningful: it signals that work is being done, maintains the sense of a live exchange, and gives the interface a quality of responsiveness that the underlying latency would otherwise undermine.",[15,165,166],{},[18,167],{"src":168,"style":169,"controls":21,"preload":22,"muted":21,"poster":170},"\u002Fimages\u002Fagentic-analysis-report\u002Fchat-interaction.webm","width: 380px;","\u002Fimages\u002Fagentic-analysis-report\u002Fchat-interaction.png",[25,172,174],{"id":173},"additional-technical-work","Additional technical work",[15,176,177,180],{},[39,178,179],{},"Multi-language reports:"," The application supported English and French localisation via react-i18n, but the LLM could generate reports in many languages. This created a mismatch: fixed UI strings from the application and variable content from the model needed to coexist in the same document. I proposed a model for storing the entire report content (including fixed strings) in the backend, translating and caching them on demand, and assembling the final output server-side. This avoided the application needing to handle arbitrary language rendering and kept the translation logic in one place. It also brought consistency to an inherently non-deterministic process: fixed strings were translated once and cached rather than regenerated each time, and the LLM was never asked to produce them, only to translate. Key descriptions stay consistent from one report run to the next, regardless of language.",[15,182,183,186],{},[39,184,185],{},"Chart improvements:"," The report chart shared its approach with Focus Recommendations but with a more dynamic implementation of quadrant boundaries. I added label collision detection to prevent topic labels from overlapping, a meaningful improvement on the FR chart, which had no mechanism for this.",[15,188,189,192],{},[39,190,191],{},"In-browser PDF generation:"," The report was designed as a final deliverable; something clients could hand directly to stakeholders rather than a screen to work from. The PDF was generated in-browser using react-pdf, producing a document with properly selectable rich text rather than a rasterised image. For a report intended to be shared, annotated, and quoted from, text quality is not a cosmetic concern.",[15,194,195,198],{},[39,196,197],{},"AI-assisted development:"," I used AI tooling throughout the project for early iteration, prototyping, and implementation. On a feature of this scope, the time saved was huge.",[15,200,201],{},[116,202],{"alt":203,"src":204,"title":205},"The quality of the in-browser PDF generation allowed it to be easily shared with stakeholder","\u002Fimages\u002Fagentic-analysis-report\u002Fpdf-report-example.png","Page preview from the PDF export",[25,207,209],{"id":208},"shipping-incrementally","Shipping incrementally",[15,211,212],{},"The feature shipped in stages:",[214,215,216,223,229,235,241],"ul",{},[217,218,219,222],"li",{},[39,220,221],{},"Q4 2025:"," First version of the report: generation, display, chart, markdown rendering, intermediate and error states",[217,224,225,228],{},[39,226,227],{},"Late Q1 2026:"," In-browser PDF export",[217,230,231,234],{},[39,232,233],{},"Q1-Q2 2026:"," Filtering workflow; composable filter component refactor",[217,236,237,240],{},[39,238,239],{},"Q2 2026:"," Agent panel; roadmap to retire Focus Recommendations",[217,242,243,246],{},[39,244,245],{},"Q2-Q3 2026:"," Multi-language support (in QA at time of writing)",[25,248,250],{"id":249},"outcome","Outcome",[15,252,253],{},"The Agentic Analysis Report became a marquee feature for demos and industry events, generating strong excitement from prospective customers. The sales cycle was too long to attribute closed deals at the time I left, but the reception during the beta phase was the strongest of any feature launched during my time at the company.",{"title":255,"searchDepth":256,"depth":257,"links":258},"",2,1,[259,260,261,262,263,264,265],{"id":27,"depth":256,"text":28},{"id":34,"depth":256,"text":35},{"id":57,"depth":256,"text":58},{"id":78,"depth":256,"text":79},{"id":173,"depth":256,"text":174},{"id":208,"depth":256,"text":209},{"id":249,"depth":256,"text":250},"AI-generated CX report including an agentic chat interface","md","\u002Fimages\u002Fagentic-analysis-report\u002Fagentic-report-thumbnail.png",null,{},0,"\u002Fwork\u002Fagentic-analysis-report",{"title":6,"description":266},"work\u002Fagentic-analysis-report",[276,277,278],"Design","Development","AI",[280,284,288,292,296,300],{"name":281,"img":282,"href":283},"Figma","\u002Fimages\u002Ftools\u002Ffigma.svg","https:\u002F\u002Fwww.figma.com",{"name":285,"img":286,"href":287},"React","\u002Fimages\u002Ftools\u002Freact.svg","https:\u002F\u002Freact.dev",{"name":289,"img":290,"href":291},"TypeScript","\u002Fimages\u002Ftools\u002Ftypescript.svg","https:\u002F\u002Fwww.typescriptlang.org",{"name":293,"img":294,"href":295},"MUI","\u002Fimages\u002Ftools\u002Fmui.svg","https:\u002F\u002Fmui.com",{"name":297,"img":298,"href":299},"RTK Query","\u002Fimages\u002Ftools\u002Fredux.svg","https:\u002F\u002Fredux-toolkit.js.org",{"name":301,"img":302,"href":303},"react-pdf","\u002Fimages\u002Ftools\u002Freact-pdf.png","https:\u002F\u002Freact-pdf.org","naxtIdYO7aVBMN4rM4tQf88Ct2tcxZseZ2JlBzzllpo",false,1782790337851]