DEV Community: Akshay Ghadge

Making AI Transparent: Understanding AG UI and How It Improves AI User Experience

Akshay Ghadge — Tue, 17 Mar 2026 08:56:13 +0000

Artificial Intelligence is increasingly being integrated into modern applications. From generating content to analyzing data, AI systems are capable of performing complex tasks in the background.

However, many applications face a common problem when integrating AI features.

Users often cannot see what the AI system is doing while it works

This lack of visibility can make even a well-functioning system feel confusing or unreliable.

To address this, a concept called AG UI (Agent UI) is gaining importance.

What is AG UI?

AG UI (Agent UI) is an interaction layer designed to connect AI processes with the user interface in a transparent way.

Instead of hiding the AI workflow behind a loading spinner or blank screen, AG UI allows the system to show users what the AI is doing in real time.

For example, an AI task might involve several steps:

Fetching data
Processing the information
Running analysis
Generating the final output

AG UI makes these steps visible to the user through the interface.

This helps users understand that the system is actively working and progressing toward a result

Problems Without AG UI

In many AI-powered applications today, the interaction flow looks something like this:

A user clicks a button to start an AI task.
The screen shows a loading indicator.
The user waits without any visibility into the process.

During this time, users often wonder:

Is the AI still working?
Did something fail?
Should I refresh the page?

Even if the AI is functioning correctly, the experience can feel broken because the user cannot see the progress.

This leads to several issues:

Reduced user trust
Multiple repeated requests
Poor user experience

The problem is not always performance.
Often, it is simply a lack of transparency.

Challenges Teams Face While Solving This

Many development teams try to solve this problem by adding small UI improvements such as:

Loading spinners
Static progress bars
“Processing…” messages

While these elements indicate that something is happening, they do not reflect the actual progress of the AI task.

Another challenge is that teams often build custom progress tracking systems for each project. This can lead to:

Repeated development effort
Inconsistent user experiences
Additional maintenance overhead

There is also no standardized way to communicate AI progress from the backend to the frontend.

This is where the concept of AG UI becomes useful.

Our Approach

To address these challenges, we explored how AI systems naturally execute tasks.

Most AI workflows consist of multiple internal steps such as retrieving data, processing it, and generating responses.

Instead of hiding these steps, we asked a simple question:

What if the application could show these steps to the user while the AI is running?

By exposing these stages as progress updates, the AI interaction becomes clearer and easier to understand.

This approach allows users to follow the process rather than waiting in uncertainty.

Our Solution: elastikteams_ag_ui

Based on this approach, we developed a lightweight package called elastikteams_ag_ui.

The goal of this package is to help developers easily implement the AG UI concept in their applications.

Just like the AG UI concept itself, our package is also framework-agnostic.

This means it is not tied to any specific technology stack and can be integrated into:

Frontend frameworks like React, Angular, Vue, or plain JavaScript
Backend systems like Node.js, Python, or any AI service

The goal of this package is to help developers implement AG UI without worrying about framework limitations.

Instead of building custom progress-tracking logic for every project, developers can use this package to send structured updates from the backend to the frontend.

These updates can include information such as:

Current AI execution step
Progress updates
Generated content
Completion or failure status

This enables applications to display real-time AI activity in a consistent and transparent way.

How It Works

The idea behind the package is straightforward.

When an AI process starts, the backend sends small progress updates during different stages of execution.

For example:

Step 1 – Fetching required data
Step 2 – Processing information
Step 3 – Running AI analysis
Step 4 – Generating response

Each of these steps can be communicated to the frontend.

The user interface can then display this information in a structured way, allowing users to see the progress of the AI task as it happens.

From the user's perspective, the experience becomes much clearer:

Instead of waiting without context, users can follow the workflow as it progresses.

Why This Matters

AI systems are powerful, but they often feel like a black box to users.

AG UI helps solve this problem by making AI workflows visible and understandable.

By exposing AI progress in real time:

Users gain confidence in the system
Applications feel more responsive
Developers can create better user experiences

The AI itself may not change, but the way users interact with it becomes significantly better.

Choosing Between Claude and GPT: A Comparative Guide for Developers

Akshay Ghadge — Tue, 31 Dec 2024 17:56:06 +0000

In the world of AI-powered tools, choosing/selecting the right language model is playing key role in the projects. We need to evaluate tools not just for their capabilities but also for their cost-efficiency, simplicity, and suitability based on the different requirements. In this blog, will compare two prominent AI models: Claude(from Anthropic) and GPT (from OpenAI).

Overview of Claude and GPT

Claude
Claude is a language model developed by Anthropic, designed for safe and helpful AI interaction. Like other large language models, Claude can generate text based on input prompts. It performs well in scenarios requiring logical reasoning, summarization, and generating creative content.

Strengths: Focuses on being safe to use, handles conversations smoothly on its own, and aligns well with values and principles.
Best For: Great for tasks that need clear results, safe interactions, and careful handling, like helping customers, summarizing legal documents, or managing sensitive chats.

GPT
GPT is a more generalized model with powerful natural language understanding and generation capabilities. Its API provides robust flexibility, enabling use across diverse domains, from coding assistance to content creation.

Strengths: High versatility, advanced language understanding, and broad domain knowledge
Best For: Use cases requiring adaptability and cutting-edge performance, like real-time data analysis, creative writing, and technical development.

Performance Comparison: Claude vs. GPT

Which Model Shines Where?

When to Use Claude

Customer Support Chatbots: Claude’s friendly conversational approach and focus on safe design make it great for helping users in important or delicate situations.
Document Summarization: Excels at extracting key points from legal, financial, or research documents.
Ethical AI Applications: Great at pulling out the most important details from legal, financial, or research papers.

When to Use GPT

Code Generation and Debugging: GPT is great at writing, improving, and fixing code in different programming languages.
Data Analysis and Visualization: Great for working with live data to create trends, suggestions, or charts instantly.

Cost Implications

Claude

Pricing: Usually costs less than GPT for most common tasks, making it a budget-friendly option for simpler use cases.
Recommendation: For startups or projects with limited budgets and moderate performance needs, using Claude is a good choice because it is cost-effective and can handle moderate tasks well.

GPT

Pricing: GPT-4 API comes with premium pricing, meaning it can be expensive, especially for startups or projects with limited budgets. You might want to consider using it for specific tasks where higher performance is needed, while opting for lower-cost alternatives for other tasks.
Recommendation: Suitable for businesses needing state-of-the-art performance, flexibility, or a competitive edge in innovation.

Simplicity and Developer Experience

Claude
Claude’s interface is beginner-friendly, making it a great choice for newcomers to AI. With minimal tuning, you can achieve decent results for common tasks.

GPT
GPT provides extensive documentation and customization options but requires a deeper understanding of AI to unlock its full potential. For experienced developers, this means unparalleled flexibility.

Final Recommendations

Go with Claude if:
1. You prioritize safety and ethical considerations.
2. You need a cost-effective solution for conversational tasks.
3. Your use case revolves around summarization, reasoning, or basic customer interactions.
Choose GPT if:
1. You need high versatility and cutting-edge performance.
2. Your project demands complex tasks like programming assistance or real-time analysis.
3. Budget is less of a concern compared to results.

Optimizing Telemetry Tracking with Azure Application Insights: A Case Study

Akshay Ghadge — Mon, 18 Nov 2024 11:51:00 +0000

In today's fast-paced digital world, having the right insights into application performance and user behavior is crucial for businesses. For this purpose, telemetry tracking is vital to understand user interactions, server load, and overall app performance. In this blog, I'll discuss a solution for a client’s requirement to track requests from both mobile and web platforms and how we implemented telemetry tracking using Azure Application Insights.

Client's Need

Our client, a large-scale enterprise, needed to track how many requests were coming from mobile and web platforms over the past month. The goal was to get insights into user interactions, especially for different platforms, while ensuring minimal impact on system performance.

The client’s core needs were:

Real-time telemetry to track requests from different platforms (mobile and web).
Ensuring that tracking data was efficient without overwhelming the system.
Simplifying the way telemetry data was processed and viewed in Azure Application Insights.

Approaches and Different Solutions

When we were tasked with implementing telemetry tracking for the client, we explored several different approaches. Below, I’ll Walk through the most notable solutions we considered:

1. Tracking Telemetry Using trackEvent
We decided to use Azure Application Insights to track events related to requests. Using the trackEvent API, we could easily log telemetry data without creating excessive records for every individual request, which was a major challenge in our case.

Why we chose trackEvent :

Single Event Per Request: Unlike other telemetry methods, such as trackRequest, which would create a record for every request and could result in a flood of data, trackEvent allowed us to log a single entry per request. This helped avoid data clutter.
Efficient Use of Azure Resources: By logging only meaningful events rather than tracking every HTTP request or dependency, we kept the telemetry data efficient and minimized overhead on our Application Insights.
Custom Properties: We could attach custom properties like requestOrigin (mobile or web) and other request metadata (method, URL, body parameters) to better understand the nature of the traffic. Here's a simplified version of how we implemented the trackEvent:

let clientAppInsights: any = null;
try {

    if (config.appInsightsKey) {
      const appInsights = require('applicationinsights');
        appInsights.setup(config.appInsightsKey)
        .setAutoCollectRequests(true)
        .setAutoCollectPerformance(true)
        .setAutoCollectExceptions(true)
        .setAutoCollectDependencies(true)
        .start();

    clientAppInsights = appInsights.defaultClient;
    }
} catch (error) {
    console.error('Application Insights not configured:', error);
}

clientAppInsights.trackEvent({
  name: 'Track Caller Platform',
  properties: {
    originRequest: requestOrigin,
    method: req.method,
    url: req.originalUrl,
    bodyPara: req.body
  }
});

2. Other Telemetry Solutions Explored

trackRequest: Initially, I considered using trackRequest, which automatically logs every HTTP request. However, this resulted in multiple entries for each request, which was problematic when trying to track high-traffic periods. The overhead created by too many individual entries was inefficient for our client’s use case.
trackDependency: This method is generally used to track external dependencies (like database queries or service calls). While it would have captured performance metrics, it wasn’t the best fit for tracking user requests based on platform, as the metadata we needed wasn’t specific to dependencies.
trackException: While useful for tracking errors, this method wasn’t relevant in this case since we were more interested in tracking request volume, not failures.

Why trackEvent is the Best Fit

After evaluating the alternatives, we found that trackEvent offered the best balance between simplicity, efficiency, and scalability. By using _trackEvent _, we avoided the pitfalls of redundant data entries while ensuring that we could track key request data with custom properties such as request origin (mobile vs. web). Additionally, it helped us minimize resource consumption by logging only essential events and avoiding overuse of telemetry APIs.

Running Queries in Application Insights: Filtering Telemetry Data

To gain insights from the telemetry data logged in Azure Application Insights, we often use Kusto Query Language (KQL) in the Logs section. One common scenario is filtering data based on a custom property, such as identifying requests originating from the web platform.

Here’s how you can execute the following query to filter telemetry events:

customEvents
| where customDimensions.origineRequest == "Web"

customEvents
| where customDimensions.origineRequest == "Mobile"

Key Benefits of trackEvent for This Use Case:

Custom Event Data: The ability to attach custom properties like originRequest, method, and bodyPara allowed us to track the data that was most important to the client.
Performance Efficiency: Using a single event log per request meant fewer records in Application Insights, avoiding unnecessary noise and data overload.

Challenges Faced

While the solution worked well, we did encounter some challenges:

Token Management: Verifying JWT tokens for each request to ensure that telemetry data was linked to the correct user and platform required careful token handling.
Handling Unauthenticated Requests: Requests without proper tokens had to be rejected to avoid incomplete or inaccurate data being sent to Application Insights.

Conclusion

Implementing telemetry tracking with Azure Application Insights enabled the client to gain a clear understanding of their platform's usage over time, specifically distinguishing between mobile and web requests. After evaluating various methods, we chose trackEvent as the most efficient and scalable solution. This approach allowed us to capture detailed insights without overwhelming the system with excessive data, and it provided the client with an accurate view of request volume and platform usage.

If you are also considering implementing telemetry tracking for your application, consider using trackEvent for scenarios like this, where you need to log specific events without flooding your telemetry system with every single HTTP request.

Exploring Anthropic Claude: A Safe and Ethical AI Assistant

Akshay Ghadge — Thu, 22 Aug 2024 10:59:28 +0000

What is Anthropic?

Anthropic is an artificial intelligence research company based in the San Francisco Area. They are known for developing large language models and AI systems, and Claude AI assistant. Anthropic was founded in 2021 and focuses on developing safe and ethical AI that can be beneficial to humanity. They are particularly interested in creating AI systems that are aligned with human values and can be reliably used to assist humans in various tasks.

What is Claude?

Claude is a language model developed by Anthropic, designed for safe and helpful AI interaction. Like other large language models, Claude can generate text based on input prompts, making it a powerful tool for various natural language processing (NLP) tasks. However, what sets Claude apart is Anthropic’s emphasis on developing AI that is both aligned with human values and transparent in its operation.

Anthropic API vs. Claude.ai

We Can leverage Anthropic API or Claude.ai depending on our needs.
• Anthropic API is mostly used for integrating Claude models into applications, allowing developers to build conversational AI systems, generate text, summarize content, and perform various NLP tasks programmatically. It is ideal for backend services, automating processes, and enhancing existing workflows with AI capabilities.
• Claude.ai is mostly used for providing direct, interactive access to Claude models through a user-friendly interface. It's great for users who want to explore AI capabilities without needing to code, offering features like chat-based interactions, content generation, brainstorming assistance, and quick access to AI-driven insights.

Pricing and Plans

Claude API follows pay-per-use approach. Every time you send a request to Anthropic's servers, you'll pay based on the number of tokens in the prompt (input) and the response (output).
• Credits must be purchased prior to using the API, and your credits will be applied to your usage according to the current pricing.
• If we run out of credits, we will no longer be able to call the API or use Workbench.
• We can choose to set up an auto-reload that purchases additional credits when our balance falls below a set limit.

Based on the requirements for our individual or an organization, we can decide which Build Tier we need to select from below

*Each usage tier has a limit on how much you can use the API each calendar. Once you reach the usage limit of your tier, until you qualify for the next tier, you will have to wait until the next month to be able to use the API again. To qualify for the next tier, you must meet a deposit requirement and a mandatory wait period. You cannot deposit more than your monthly usage limit.

Claude 3 Haiku (fast and light):
• Input: $0.25 per million tokens
• Output: $1.25 per million tokens
Claude 3.5 Sonnet (best available at time of writing)
• Input: $3 per million tokens
• Output: $15 per million tokens
Claude 3.5 Opus (powerful):
• Input: $15 per million tokens
• Output: $75 per million tokens

How to Sign up the Anthropic Claude?

When signing up for the account, you're placed in the Evaluation plan by default. We need to change that: click the Select Plan button.

There are two plans. The best one for building and testing out the API is the Build plan: click Continue to select it.
The Scale plan is a better match for bigger businesses that need plenty of requests per minute.

Anthropic will ask for more information about you and how you plan to use the API. After you fill the form, you'll be prompted to add your billing details.

We can either make this a single-time payment or activate
auto-reload: this will automatically fund the account once it drops below a certain level.

Last note: taxes are paid separately and will be added at the end of the payment flow.
New accounts can only use up to $100 worth of credits every month, but that limit will increase the more you use the API.

Conclusion

Anthropic’s Claude offers a powerful, safe, and ethical AI solution that can be tailored to various needs, whether through the API for developers or Claude.ai for non-technical users.

As AI continues to grow in importance, Claude represents a significant step forward in creating systems that align with human values and offer tangible benefits to society.

React UI - Best Practices for iOS Devices

Akshay Ghadge — Tue, 11 Jun 2024 13:01:42 +0000

Introduction

This topic is crucial for anyone working with client-based web applications based on React. Testing your web application on iOS devices, similar to how you test on different browsers on a desktop, is essential for ensuring a seamless user experience.

Below are the 2 main parts in terms of UI - web app

Responsive Design
Cross Browser Compatibility

Responsive Design

Responsive design ensures that your web application looks and functions well on all devices, especially mobile devices like iPhones and iPads. Here's a detailed breakdown of how to implement responsive design in your React applications:

Viewport Settings
The first step in responsive design is to include the correct viewport settings in your HTML documents:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width: Sets the width of the viewport to the width of the device, ensuring the webpage adapts to the screen size.
initial-scale=1: Sets the initial zoom level to 1, displaying the webpage at its natural size without any zoom.

These settings ensure that your webpage is responsive, adjusting its layout to fit the device's screen size and providing a better user experience on mobile devices.

Grid System
Utilize Material-UI’s (MUI) responsive grid system to create layouts that adapt to different screen sizes. The grid system is based on a 12-column layout:

Grid: A component used to create a responsive layout grid.
Item: A prop that defines the Grid component as a grid item. Grid items are children of a Grid container and define how the space within the grid container is divided among the items.

Layout Behavior
MUI’s grid system supports different layout behaviors based on screen sizes using breakpoints like xs, sm, md, lg, and xl.

Breakpoints
Breakpoints are defined using createTheme to customize the theme for MUI components. Here’s how you can define custom breakpoints:

import { createTheme, useMediaQuery } from '@mui/material';
const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 768,
      md: 900,
      lg: 1200,
      xl: 1920,
    },
  },
});

const matches = useMediaQuery(theme.breakpoints.between('xs', 'md'));

xs(extra small): 0px and above.
sm(small): 768px and above.
md(medium): 900px and above.
lg(large): 1200px and above.
xl(extra large): 1920px and above.

These breakpoints allow you to apply different styles or layouts based on the screen size.

For example, to make an 8-column grid on desktop responsive on smaller devices like an iPhone, use media queries to adjust the layout:

@media (max-width: 600px) {
  .grid-item {
    flex-basis: 100%;
  }
}

Make sure your media queries cover necessary ranges for devices like iPads, as Safari on iPad may have different screen dimensions.

Cross Browser Compatibility

Ensuring your web application functions smoothly and consistently across different web browsers is crucial for a broad user base.

Understanding Browser Differences
Different browsers use different rendering engines:

WebKit: Used by Safari.
Blink: Used by Chrome.
Gecko: Used by Firefox.

These differences can affect how your application is rendered and behaves on iOS devices.

Testing and Debugging
To ensure cross-browser compatibility:

Test on Real Devices: Use real iOS devices to test your application. Emulators and simulators may not always replicate the exact behavior.
Browser Developer Tools: Use the developer tools available in browsers like Safari, Chrome, and Firefox to debug and fix issues.

CSS and JavaScript Compatibility
Ensure that the CSS and JavaScript used in your application are compatible with all target browsers. Use tools like Autoprefixer to automatically add vendor prefixes to your CSS.

/* Write standard CSS */
.example {
  display: flex;
}

/* Let Autoprefixer handle vendor prefixes */
.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Sometimes, specific CSS rules are necessary for different browsers. Use browser-specific CSS hacks or feature queries:

/* Safari-specific styles */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
  .safari-specific {
    color: blue;
  }
}

Polyfills and Transpilers

For older browsers, consider using polyfills and transpilers:

Polyfills: JavaScript files that replicate modern browser features in older browsers.

Transpilers: Tools like Babel convert ES6+ JavaScript code into ES5, ensuring compatibility with older browsers.

// Your modern JavaScript code
const greet = () => {
  console.log('Hello, world!');
};

// Transpiled code for older browsers
"use strict";

var greet = function greet() {
  console.log('Hello, world!');
};

Conclusion
Implementing these best practices will help ensure that your React applications provide a consistent and high-quality user experience on iOS devices. Responsive design and cross-browser compatibility are key components in achieving this goal. By understanding and applying these principles, you can create web applications that perform well across a variety of devices and browsers. Regular testing and leveraging modern web development tools and techniques are essential in maintaining a smooth user experience.