DEV Community: Aharna Haque

Build your first AI agent

Aharna Haque — Thu, 27 Nov 2025 08:05:27 +0000

Over the past year, the conversation around AI inside enterprises has shifted. Teams are no longer asking whether AI can help with individual tasks—they're asking how AI can act on their behalf, move work forward, and make decisions without constant supervision. This is where agentic AI comes in.

Agentic AI refers to systems that can observe what's happening, reason about the situation, take action, and learn from the outcome. Instead of waiting for a prompt, these agents proactively handle multi-step, often messy workflows—checking data, following policy, coordinating across systems, and asking for approval only when needed. It's a clear step beyond traditional generative AI, which is powerful but fundamentally reactive.

Why you should care?

For developers, this is your moment.

While enterprises care about reducing delays and improving consistency, you have an opportunity to be at the forefront of this shift. Agentic AI lets you automate the tedious work that's been eating away at your time—data validation, cross-system orchestration, repetitive API calls, status updates—all the glue code that keeps you from building what actually matters.

But here's the bigger picture: in the current AI agent hype cycle, you can build something genuinely impressive. This isn't just another chatbot or autocomplete feature. You can create systems that autonomously handle complex workflows, make intelligent decisions, and deliver real business impact. The kind of work that makes stakeholders stop and take notice.

This is your chance to rise to the pressure, deliver that "wow factor" at work, and position yourself as someone who doesn't just follow trends—but implements solutions that transform how your organization operates.

Build and ship your first AI agent

We've created a hands-on workshop on AI agents designed for the enterprise, and you can register to join us.

The focus is practical: how to apply agentic AI to your day-to-day systems in a way that's controlled, reliable, and immediately useful.

You'll walk away knowing how agentic AI works, where it creates value, and how to deploy it responsibly inside your organization.

See you there!

Build an app with Veda AI + DronaHQ

Aharna Haque — Thu, 14 Aug 2025 04:55:29 +0000

Hey folks! 👋

Last week, I ran a live workshop showing how you can build a fully functional HRMS onboarding app—backed by MySQL—using Veda AI inside DronaHQ. And no, we didn’t spend hours manually designing screens or writing SQL queries. We used screenshots and plain English prompts to build 80% of the app in minutes. 🙌

Here’s a step-by-step guide if you want to build along!

P.S.- I have attached the video of the live workshop (in case you want to check that out)

What you’ll learn

How to connect your own database
Generate UI from a screenshot (yep, seriously)
Bind data with a single prompt
Autogenerate forms from existing DB tables
Add actionflows using plain English
Master server-side pagination
🎁 Bonus: Apply a theme with one sentence

Before you start

Make sure you’ve got:

✅ Signed up on DronaHQ
✅ Access to DronaHQ Studio
✅ Drive link for images
✅ Create a MySQL Database with an employees table. You can use the SETUP doc for data queries, or watch the workshop video for a step-by-step walkthrough on how to add a Connector.

Goal: build an employee onboarding CRUD app

Let’s jump in!

Step 1: Create a new app

Head to DronaHQ App Builder
Create a new App in the builder.
Find Veda AI in the left sidebar
Click to open it. A chat section will open on the left side.

Step 2: Generate UI from screenshot

For this apllication we are going to let Veda AI do the heavy lifting for us. You can upload screenshots, Figma exports, or even hand-drawn wireframes to generate upto 80% of the UI in seconds.

📂 Use this sample image from the provided drive link.

Design files to UI with Veda AI

Your layout is ready. No drag and drop. No hustle.

Step 3: Bind data to a table

Goal here is to display the employee data in the table. To do that hover over your Table control, click on Veda AI Assist, and say:

"Bind employee data from @<DBname> <tablename>"

You can either use the query it suggests (dont forget to select the right database and the table) or navigate to Data query section → New → Connect Library → Select Database and paste this query:

SELECT * FROM <tablename>;

Pro tip: Veda AI understands your schema. You can chat with it about your DB!

Step 4: Autogenerate form

Next, we would like to insert new employee information to our existing database table. DronaHQ provides options to autogenerate forms for your table in just a few clicks.

Autogenerate Form

Navigate to Screens → Click on "+" → Select "Tray". A new tray would be created. We will not be using the templates here, instead we will select Autogenerate Forms option on the tray.
Choose your connector → table → Add Insert on click of submit → Generate Form

And bam! You get a fully wired CRUD form—ready to insert new employees into your DB.

Step 5: Add server-side pagination (for big data)

We want smooth performance when your data grows. Server-side pagination in DronaHQ lets you filter and load data directly from the backend.

Go to:
Data Queries → New → Connect Library

Pick your MySQL DB and run this query:

SELECT employee_id, name, email, phone, department, designation  
FROM <tablename>  
WHERE {{tablegrid.PROPERTIES.FILTERQUERY}}  
LIMIT {{tablegrid.PROPERTIES.LIMIT}}  
OFFSET {{tablegrid.PROPERTIES.OFFSET}};

✅ Important:
Turn ON “Server-side pagination” from the Table’s Properties Toolbar.

Step 6: Show total employees count

To display a count on top of your dashboard and add data query:

SELECT COUNT(*) as total FROM <tablename>;

Bind this to a Stats Card or Text Label control, and you’ve got live metrics.

Bonus: Apply custom UI theme in seconds

DronaHQ offers quick theme configuration across your app, easily managed through the console.
Just navigate to top-right to Setting icon → Themes → Choose your themes

Incase, you want to edit the themes configuration, head over to your Admin console → Account Settings → Themes Configuration

Set your themes configuration
Fonts, spacing, and colors—done. No manual tweaking needed.

Congratulations! Your application is ready

Your application should now look like this. You can continue building by adding other live metrics and more features.

Your application is ready!

Why Veda AI + DronaHQ is a game changer

80% of your app is ready in minutes
No code lock-in — generated UI maps to editable controls
Conversational UI & logic building — you prompt, it builds
Enterprise-ready — RBAC, SOC2, audit logs, theming guardrails

Final thoughts

It was awesome watching attendees go from a single screenshot to a production-grade UI—no SQL wrangling, no painful UI design.

Just prompts, fast feedback, and real results.

Try Veda AI today!

UX Web Components: 101 for Frontend Developers & Designers

Aharna Haque — Thu, 03 Jul 2025 17:52:48 +0000

🚩Thinking about diving into frontend dev or design? You didn’t land here by mistake — this is your SIGN.

Here's what you'll be learning:

Spending hours over making your website responsive and achieve uniformity?

You are not alone :)

To achieve web uniformity and responsiveness across different devices, browsers, accessibility, performance, and async states- complexities in the frontend have only risen leading to building 10s and 100s of UI. Relatable?

This problem everyone can relate to while building anything from a simple portfolio website → enterprise level website.

Amidst all that, think what inconsistent styling, poor accessibility, fragile API, unpredictable performance, A shadow-DOM button that ignores theme fonts, a component lacking keyboard focus—bulk UI debt can do to your impact.

As frontends scale, even with component-driven tools like React, Vue, or Angular, you often end up with hundreds of components and thousands of variations—adding complexity rather than eliminating it.

Web Components: Your Solution🧪

"Web Components" is an umbrella term that refers to a collection of web standards focused on enabling the creation of custom HTML elements. ~ Microsoft

Web Components can be a savior in these scenarios which also roots for your long-term consistency and performance.

Web Components in UX are Custom Elements + Shadow DOM that provide encapsulation, reusability, and a clean API. Three main elements in web components-

Custom Elements: JavaScript APIs that let you define your own HTML tags and behaviors for use in your UI.
Shadow DOM: A JavaScript API that attaches a private, encapsulated DOM subtree to an element, allowing isolated scripting and styling without affecting the rest of the document.
HTML Templates: The and elements provide reusable chunks of markup that remain hidden until they’re instantiated, often inside custom elements.

Heard of these Companies? Yes, they use web components too😉

You can check out this video by Cassondra Roberts, Staff Design Engineer, Adobe for Shadow DOM

Major Web Components Gains:📈

Highly customizable with custom elements and HTML templates.
Deploy them across mobile, desktop, web devices.
High Framework-agonistic: use Web Components with any of these frameworks like React, Angular, Vue.

Web Components also has some Trade‑Offs:📉

Web Components' reliance on browser-specific APIs and Shadow DOM complicates their server-side rendering, making cross-framework SSR integration challenging.
Encapsulation via Shadow DOM can hinder proper ARIA attribute application and focus management, necessitating meticulous planning for accessibility.
Web Components may introduce lock-in issues with meta-frameworks, bundlers, and testing tools, and may not seamlessly integrate with existing frameworks like React or Vue

Design System == Your Blueprint 🌐

Think of it as a blueprint that helps to keep the product look and feel uniform and consistent.
It is a central library of components, style guides, accessibility guidelines—serving as a single source of truth. It streamlines workflow and accelerates development process with design tokens.

Quick FAQ: Design tokens are small, reusable design decisions that make up a design system's visual style.

Here is a guide by Figma on building Design Systems

Your mantra if you're starting out

Wireframe Components → build template + Shadow DOM prototype → test

Enter Storybook: Design System Catalyst

Recently I came across Storybook is an open-source UI component workshop—a development environment where you build, test, showcase, and document your web components in isolation, away from the complexity of your full application

Each component in Storybook is accompanied by "stories"—interactive examples that showcase different states and configurations. These stories serve as both documentation and test cases.

In essence, Storybook transforms your UI components into self-contained units that are easier to develop, test, and maintain, all while fostering better collaboration and communication within your team.
Read more about Storybook and how to get started

UX Maturity Journey for Different Stage Enterprises:

Immature Stage:

Team Setup: No UX, solo dev/design

What it's like:

UX isn’t planned—features jump straight to code.
You're coding blind—no wireframes, A/B tests, or user research.
No user feedback or research; decisions are based on guesses
You patch UI issues reactively when bugs or complaints emerge.

Tip: If you’re here, you could practice these to bring in clarity

Easy first steps:

Start by asking: Who is this for? What’s the problem?
Do quick guerrilla tests—grab 3–5 users to watch them try a flow
Install a basic analytics tool (Hotjar/Clarity) to see click patterns.

Emergent Stage:

Team Setup: UX advocate + dev + product (less sync)

What it's like:

UX flows feel baked into sprint planning.
There's a basic design system and shared components
Build wireframes → prototypes → test & iterate.
Use storybook/design tokens for consistency.
Use simple UX metrics: onboarding completion, task time.

Matured Stage:

Team Setup: UX cross teams + dev + product in sync

What it's like:

UX drives strategy—not just features
Design system is robust; UX team involved early.
You’re shipping experiences users love, efficiently and iteratively.
Metrics like NPS, task success are part of your dashboards.
Code is maintainable, with reusable components and animations that reinforce UX.
Continuous discovery—user feedback feeds product roadmap.

Best Practices CheckList: ✔️

☑️ Define target audience. Ask: Who’s using this component? What problem does it solve?
☑️ Start small by designing mockups for your custom elements or basic usability tests(3-5 folks clicking through)
☑️ Normalize UX in your sprint. Add UX checklist before dev.
☑️ Use shared UI code.This is where you start building your web components.
☑️ Measure impact. Track signup flow time, onboarding drop-offs, NPS scores, onboarding completion rate, satisfaction scores. This will help you to zero in on the areas where users drop-off.
☑️ Share wins. Show how fixing one UX bug improved conversions—turn dev effort into product impact.

Other Resources You Can Check Out:

Shoelace is a gold standard of web component libraries. You can also check out best practices at Shoelace
Spectrum Web ComponentsAdobe’s Design System, web component flavored.
Another great general list of best practices.

Special thanks to @debajit13 for feedback on a draft of this blog post.

[Boost]

Aharna Haque — Tue, 17 Jun 2025 12:39:51 +0000

Ultimate Guide to Admin Roles & Access 2025

Aharna Haque ・ Jun 17

#webdev #frontend #tooling #community

Ultimate Guide to Admin Roles & Access 2025

Aharna Haque — Tue, 17 Jun 2025 09:24:00 +0000

Why Admin Access Needs to Be a Fortress?

At a rapidly growing startup, an eager intern was granted "Admin" access to the admin panel for training purposes. In an attempt to make a difference, they unintentionally erased important user data, which resulted in a brief system outage.

This incident shows the importance granting least permission as per requirement of the user role.

In the digital age, where admin panels act as command centers for businesses, scalability and security must be guaranteed.

Real-world risks of poor access controls:

Data breaches by accounts with deep access.
Internal sabotage by a discontent employee.
Unintentional or accidental errors
Compliance failures with various regulations like GDPR, HIPAA, or SOC 2

The 3 Pillars of Role-Based Access Control(RBAC):

To keep the system secure and agile, RBAC (Role-Based Access Control) is the go-to framework. Here's how to build it right:

1. Define the roles first:👩‍💻

Admin: Has full access to all setting and data.
Editor: Can create/modify but not change system settings.
Viewer: Has Read-only access to data

2. Implement the Principle of Least Privilege

This principle is about granting users minimum level of access necessary to perform their intended task minimises potential risks.

Less Privilege = Smaller Attack Surface

3. Make it Modular and Scalable:

As businesses grow, roles evolve. Regularly reviewing and adjusting permissions as roles evolve by granting granular permissions (like building blocks)

Here's Your Checklist: ✅

☑️ Implement Role-Based Access Control (RBAC)
☑️ Enable Multi-Factor Authentication (MFA)- add a critical layer of protection.
☑️ Secure Session Management: Enforce auto-logout on inactivity and limit session lifetimes.
☑️ Use Fine-Grained and Granular Permissions
☑️ Conduct Regular Access Reviews

We understood the "what", "why" and "how" of the security-- Time to narrow down on the platforms we can trust!

🔧Low-Code & Internal Tool Builders:

DronaHQ- Low-code platform with granular role-based access, UI-level permissions and enterprise-grade security and drag-drop features.
Retool- Internal tool build with RBAC, query level controls with SSO/MFA support.
Appsmith- Open-source tool for build admin panels with role management and authentication options.

👜Developer-Focused Admin frameworks:

Forest Admin- Plug-in and play admin panel with built-in access control, logs and permissions protocols options.
Hasura – Real-time GraphQL engine providing API-level role-based and row-level permissions support.
Supabase – Firebase alternative with built-in authentication and secure row-level access control.

🔐 Authentication & Identity Management

Auth0 (by Okta) – Adaptable authentication and authorisation platform with SSO/MFA support.
AWS Cognito – Scalable AWS-native user auth for web and mobile application with Authentication, Identity management, Access control and Compliance check.