Authors: Uzair Jawaid, Ting Cheng
Abstract: Product goals, design principles, and the vision behind the assistant. Set the foundation for the series by explaining what the assistant is, why it was built, and how the frontend design supports its mission.
Welcome to the Decision Assistant Frontend Blog Series!
This series explores the design, development, and integration of our AI-powered assistant, with a focus on frontend engineering and user experience. Over the coming months, we’ll dive into the ’s architecture, UI strategies, engineering practices, and lessons learned. In this first post, we’ll introduce the assistant itself: its goals, the problem it addresses, and the design principles that shaped its frontend experience.
What is the Decision Assistant?
IBM provides clients with products that enable them to create their own automations that they can integrate into their business. One of the products we serve is Decision Intelligence (DI) – a low-code, AI tool to build automated decisions. Developers and Business Analysts can use this tool to automate a process where inputs are given to the model and an output is automatically generated based on defined business policy rules.
Figure 1 – Workspace Decision Model Interface
This used to be the new “modern” method of automation, but now, with the introduction of AI Agents and LLMs, we wanted to take our user experience to the next level. The Decision Assistant (DA) is an AI-powered application integrated into Decision Intelligence that uses a Large Language Model (LLM) to generate decision automation services. The client will only require a business policy document to get started and simply review/suggest changes for the generated output by the AI agent.
By leveraging generative AI, we can create a seamless experience for our clients by offloading the work of data model extraction and decision function composition to the AI agent. Most companies have policy texts to define their business rules, so we created the product with this in mind. All a user needs to get started is a policy document which they can provide as input t. This reduces the learning barrier for Business Analysts to create automation decisions for their clients/company and frees up their time as well. This translates to faster product delivery and improves worker productivity.
Design Principles That Guided the Frontend
The Decision Assistants UI was carefully designed with frontend development principles in mind.
1. Separation of Concerns
Modularizing an application helps to isolate logic and accelerate debugging. We kept all business logic in the backend in their respective services. The frontend only consumes the data received from REST API endpoints to avoid mixing logic and presentation.
2. Component Reusability
Committing to a design system improves development speed and creates a consistent design across all platforms. The frontend is developed using the React framework and we integrated IBM’s , specifically Carbon Chat AI, for design consistency and reusability throughout the chat experience.
3. Performance Optimization
A lot of modern frameworks tend to bloat software. The old way to create an app with React was using Create React App (CRA) which would bundle the entire app before serving. Vite offers instant serving with no bundling at the start. There are several performance achieved by using Vite which we will cover in a later blog post about architectural decisions in this series.
4. Maintainability and Scalability
A truly robust app is built with the intention to grow seamlessly and add on features by developers as effortlessly as possible. Throughout the development process, our team followed clean code principles and applied linters/formatters. Through the use of git pre-commit hooks, we prevented messy code from even being committed and pushed to the git repository. We maintained an organized repository with consistent naming conventions and services, making it easy to add on new features and scale.
5. Security
Although the backend of an application does a lot of the heavy lifting for security, the frontend is just as responsible. To ensure security in our application, we avoided having any sensitive information exposed in the frontend. All REST API endpoints are handled using HTTPS. We also have Mend (formerly WhiteSource) bots integrated into our GitHub sitory to perform routine checks on any security vulnerabilities in dependencies. This helps us audit packages and maintain a safe dependency tree.
6. State Management
Global state management for our application allows data to be centralized to a single point of truth. This enables easier tracking, debugging, and updating of the state across all components. We used the React Context API to manage the state across all the components, giving us control over the theme, canvas view mode, and the progress bar.
7. Testing and Quality Assurance
To ensure reliability and maintain high code quality, we implemented unit testing using React Testing Library and Vitest, covering components and logic. For end-to-end testing, we used Selenium to simulate real user interactions and validate complete workflows. This layered approach helps catch issues early and ensures a stable, user-friendly experience.
Implementing these core frontend development principles empowered us to build a robust and scalable UI for the Decision Assistant.
User-Centric Goals and Experience Vision
The Decision Assistant was designed with a clear goal: to make decision automation intuitive, conversational, and transparent for users. At its core, the assistant transforms a traditionally complex modeling process into a guided dialogue via LangGraph, allowing users to interact naturally while watching their automation service take shape in real time.
Let’s take a look at how users can interact with the assistant from start to finish:
Figure 2 – Decision Assistant Welcome message
This open-ended prompt invites users to initiate the automation process with minimal friction. Whether they want to create a new decision model or automate a specific business task, the assistant adapts to their input and guides them forward.
Once a decision topic is provided, the assistant asks whether the user has a business policy document. If available, the user can paste the policy text directly into the chat. These documents (often rich with domain-specific rules and technical details) serve as the foundation for the automation. For example, a user might provide a policy like:
California Vehicle Air Pollution Compliance Policy Version 1.1 – With Technical Specifications...
Behind the scenes, the assistant leverages a Large Language Model (LLM) to interpret the policy and generate a structured decision service. As the model processes the input, the UI dynamically expands to reveal a visual canvas. This canvas displays both the data model and decision model, giving users a clear view of the automation being built.
Figure 3 – Decision Assistant processing
To enhance transparency and user control, the assistant introduces a progress bar that outlines four key stages:
At each stage, the assistant provides feedback and asks for confirmation.
Figure 4 – Decision Assistant Rundown
Users can respond with “Yes,” “Edit,” or “Regenerate.” Choosing “Edit” allows them to refine the model with additional prompts, while “Regenerate” triggers a fresh attempt based on the original input. Only when the user confirms the model is correct does the assistant proceed to the next step.
This iterative, conversational flow continues until all four steps are completed. At the end, the assistant presents a final message and offers a button to navigate directly to the decision workspace, where users can view and manage the newly created decision service.
Figure 5 – Navigation to Decision Service feature
By combining conversational AI with visual feedback and structured guidance, the Decision Assistant empowers users to co-create automation services with confidence and clarity—no deep technical expertise required.
How the Frontend Supports the Assistant’s Mission
The frontend of the Decision Assistant plays a critical role in delivering a seamless, intelligent, and responsive user experience. It’s not just a visual layer - it’s the bridge between the user and the AI agent, designed to make complex decision automation feel simple and conversational.
To support the assistant’s mission, the frontend was architected to enable real-time interaction, dynamic feedback, and visual transparency. The chatbot interface is the center-piece of this experience. It guides users through the automation process step-by-step, while the UI adapts fluidly to reflect progress and context.
Conversational Flow Integration
The assistant’s frontend is built to support a natural dialogue. As users input their goals, such as “Approve a loan” or “Evaluate vehicle compliance,” the UI captures and forwards this data to the backend LLM service. Once processed, the frontend dynamically updates to reflect the assistant’s understanding, presenting a generated decision model and asking for user feedback.
This conversational loop is tightly integrated with the visual canvas. When the assistant completes a step, the canvas expands to show the corresponding data and decision models. This immediate visual feedback helps users understand what’s being built and why, reinforcing trust and clarity.
Progress Tracking and Step-by-Step Guidance
To make the automation journey transparent, the frontend includes a progress bar that tracks four key stages corresponding to the stages in LangGraph. Each stage is marked with a clear status update in the chat. This structured flow ensures users always know where they are in the process and what’s coming next. The frontend handles branching logic based on user responses (whether they choose to edit, regenerate, or confirm) without breaking the conversational rhythm.
Dynamic Canvas and Model Visualization
The canvas component is a key innovation in the frontend. It visually renders the evolving decision service, including the data model and decision logic. As the assistant progresses through each step, the canvas updates to reflect the latest state, giving users a tangible view of their automation.
This visual feedback is essential for users who may not be familiar with decision modeling. It allows them to validate the assistant’s output, make adjustments, and feel confident in the final result.
Seamless Transition to the Decision Service
Once the automation is finalized, the frontend presents a final message and a call-to-action button that navigates users directly to the decision designer workspace. This transition is smooth and contextual, allowing users to continue refining or deploying their decision service without losing momentum.
By combining conversational design, real-time feedback, and visual transparency, the frontend of the Decision Assistant transforms decision automation into an engaging and accessible experience. It’s not just about building models—it’s about empowering users to co-create with AI.
Setting the Stage for What’s Next
The Decision Assistant is a thoughtfully designed product built to enhance the development of business automation through intuitive, AI-powered interactions. In this post, we introduced its purpose, the design principles behind its frontend, and the vision that drives its development.
We’d love to hear your thoughts or experience with decision automation. Feel free to share your thoughts in the comments section!
In the next post, we’ll take a closer look at the key UI features and how they’re designed to support real user workflows. Stay tuned as we continue to unpack the engineering and design journey behind the Decision Assistant.