[{"data":1,"prerenderedAt":159},["ShallowReactive",2],{"featured-work-Web App":3},[4,42],{"id":5,"title":6,"body":7,"client":18,"date":19,"description":20,"extension":21,"featured":22,"features":23,"image":30,"image_transparency":31,"links":32,"meta":33,"navigation":22,"path":34,"seo":35,"stem":36,"types":37,"url":32,"__hash__":41},"portfolio\u002Fportfolio\u002Fb2b-ai-agent-frontend.md","B2B AI Agent Frontend",{"type":8,"value":9,"toc":14},"minimark",[10],[11,12,13],"p",{},"TIQ.solutions asked me if I could create a frontend-concept, design and the implementation of their new emerging B2B AI agents chat platform.\nTIQ creates their own network of specific LLM implementations that analyze the customers data and generate outputs via other specialized LLMs depending what the user wants to achieve as an output. There could be a combination of statistics, analytics, a blog post article writing agent or a simple company agent that can help other employees summarizing company specific data at a glance. The client provides the necessary APIs (for calendars, documents, other shares or static documents) and TIQ implements them into a regularly trained model. The tokens a company uses get logged so it's possible to charge them by usage.\nThe backend for the frontend is done in Python, pydantic and FastAPI. The chats, user data and everything app specific is saved in a PostgreSQL database.\nThe frontend is created in NuxtJS \u002F Vue, TypeScript and SCSS. Every UI item is a proper reactive component and the whole app is responsively optimized for all screen sizes.\nLike we know it from other web apps we have a sidebar on the left with all the chats, user settings, favourites and the history of previous chats.\nThe chat view itself has an additional top bar that contains the main information about the current conversation (current files within the context, agent information and additional functionality).\nWe have proper user management, with registration, login and refresh tokens. Companies can manage their employees (and tokens) on their own and also chose who can access a specific model via a company admin panel.\nThe latest changes we implemented is streaming. Like we know it from other AI frontends the different LLMs within a pipeline give proper feedback while they all work together on their tasks and when one output gets passed to the next LLM.\nSadly I cannot give you a direct link to the deployment but I would be happy to give a live demo via screen sharing.",{"title":15,"searchDepth":16,"depth":16,"links":17},"",2,[],"TIQ.solutions","2025","A B2B AI agents chat platform.","md",true,[24,25,26,27,28,29],"Vue","Nuxt","TypeScript","SCSS","PostgreSQL","FastAPI","\u002Fportfolio\u002Fb2b-ai-agent-frontend\u002Fmain-visual-glass.png",false,null,{},"\u002Fportfolio\u002Fb2b-ai-agent-frontend",{"title":6,"description":20},"portfolio\u002Fb2b-ai-agent-frontend",[38,39,40],"Web App","Design","UI\u002FUX","WHCqQDX3C-tG63qVYn6nH_GVcJOz_HujrscgLT7NslM",{"id":43,"title":44,"body":45,"client":18,"date":148,"description":149,"extension":21,"featured":22,"features":150,"image":152,"image_transparency":31,"links":32,"meta":153,"navigation":22,"path":154,"seo":155,"stem":156,"types":157,"url":32,"__hash__":158},"portfolio\u002Fportfolio\u002Flaw-firm-document-automation.md","Law Firm Document Automation",{"type":8,"value":46,"toc":141},[47,52,55,60,63,66,69,73,80,87,90,96,99,105,108,114,120,126,132,135],[48,49,51],"h2",{"id":50},"description","Description",[11,53,54],{},"I received a contract to help bring a project to a new level. The initial implementation was a specialized app for a single firm and was in a poor state. I was tasked with transforming it into a generalized product that could be offered to other law firms. Due to the sensitive nature of the project, I cannot display screenshots of the first iteration.",[56,57,59],"h3",{"id":58},"about-the-projects-requirements","About the projects requirements",[11,61,62],{},"The client specializes in traffic accident cases, which follow a consistent workflow. The firm receives various documents related to a case and needs to generate an initial claim letter, which is largely standardized. The system must then support the creation of subsequent letters based on the information gathered.",[11,64,65],{},"The core pipeline processes all incoming documents (currently via email) using LLMs and OCRs to extract relevant values and identifiers. This extracted data is stored in a database, and the system flags any errors or inconsistencies that require human review.",[11,67,68],{},"The frontend presents these extracted values to the user in a clear interface, allowing them to verify and correct the data against the original documents. Visual indicators highlight any issues that need attention.\nThe user can now see all the extracted values in the frontend, checks them against the documents (visually presented) and can correct them if needed.",[56,70,72],{"id":71},"about-the-new-implementation","About the new implementation",[11,74,75,76,79],{},"The first steps of mine included to conceptualize and re-design the frontend from scratch based on the (also partially new) requirements. A lot of the features you can see in the figma document are also already implemented.",[77,78],"br",{},"\nThe user can see all the cases in a table that is sortable and searchable. The table indicates if the pipeline stumbled upon some errors or inconsistencies.",[11,81,82],{},[83,84],"img",{"alt":85,"src":86},"The inbox — a sortable, searchable document table with status indicators for pipeline errors and inconsistencies.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F01_inbox.png",[11,88,89],{},"The user can see all the corresponding documents and where they came from (uploaded via the app or if it came in via E-Mail).",[11,91,92],{},[83,93],{"alt":94,"src":95},"Document preview with file metadata, email origin info, and processing status in the sidebar.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F02_preview.png",[11,97,98],{},"The user can view all the identifiers and extracted values while also being able to overwrite them if needed. It will be possible to click on those bounding boxes so the sidebar directly jumps to the corresponding extracted values (and vice versa).",[11,100,101],{},[83,102],{"alt":103,"src":104},"Side-by-side view of the original document and the LLM-extracted values, with bounding boxes highlighting matched fields and warnings for inconsistencies.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F03_extractions.png",[11,106,107],{},"When a new document goes through the pipeline the so called \"Schadentabelle\" gets generated as well. This always contains the current financial positions, what is claimed, what is already payed and what is still open. This is kept up to date automatically while the user also can manipulate those values within the frontend.",[11,109,110],{},[83,111],{"alt":112,"src":113},"Case detail view showing the full email history, linked documents, and the automatically maintained Schadentabelle.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F04_email_history.png",[11,115,116,117,119],{},"The next step for the employee of the law firm would be to create the first claim letter. For this they can create templates that are based on blocks. Blocks end editors can contain placeholders for the previously extracted identifiers and values so they get filled in automatically when the document is generated for a specific case.",[77,118],{},"\nThe editor is implemented via the Quill Editor library.",[11,121,122],{},[83,123],{"alt":124,"src":125},"The letter editing view — extracted case values are available in the right-hand panel and are automatically injected into the rendered document.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F05_document_editing.png",[11,127,128],{},[83,129],{"alt":130,"src":131},"Template builder with a block-based editor. Each block can include placeholder tokens that are resolved against the case's extracted data at generation time.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F06_blocks.png",[11,133,134],{},"The system is built as a multi-tenant product from the ground up. Each law firm operates in its own isolated tenant environment, configurable via the admin panel — including database connections, email intake settings, and access restrictions.",[11,136,137],{},[83,138],{"alt":139,"src":140},"Administration panel for managing tenants, including database, email, and case-access configuration per firm.","\u002Fportfolio\u002Flaw-firm-document-automation\u002F07_settings.png",{"title":15,"searchDepth":16,"depth":16,"links":142},[143],{"id":50,"depth":16,"text":51,"children":144},[145,147],{"id":58,"depth":146,"text":59},3,{"id":71,"depth":146,"text":72},"2024","Automating document creation for law firms.",[24,25,26,27,151,29],"Python","\u002Fportfolio\u002Flaw-firm-document-automation\u002Fmain-visual-glass.png",{},"\u002Fportfolio\u002Flaw-firm-document-automation",{"title":44,"description":149},"portfolio\u002Flaw-firm-document-automation",[38,39],"5rjHPOSVthB09D4fbQg4Rc-dSjFXZTZnepJUsBDVcjU",1779460354552]