Dev.to WebDev πŸ›  Dev πŸ‘ 0 πŸ“– 4 min read

I Built Aven App Agent to Help Users Find Their Next Click

I Built Aven App Agent to Help Users Find Their Next Click Suggested DEV tags: ai, webdev, ux, showdev Paste the title into DEV's title field and the article below into the body. The YouTube embed uses DEV's supported

I Built Aven App Agent to Help Users Find Their Next Click

Suggested DEV tags: ai, webdev, ux, showdev

Paste the title into DEV's title field and the article below into the body. The YouTube embed uses DEV's supported embed syntax.

A user opens your app with a simple goal.

β€œInvite someone to my workspace.”

They look at the dashboard. Open a menu. Try a different tab. Somewhere in your product, the right button exists. Finding it is the problem.

I'm the founder of Aven App Agent, and I'm building an AI assistant that connects questions like this to guidance inside the product.

Users can ask for help, read an answer, and choose a walkthrough that points them toward the controls they need.

Start with the task the user wants to finish

Take an invitation flow that crosses several parts of a website.

  1. Open Settings.
  2. Switch to Team.
  3. Select Invite members.
  4. Enter the details and send the invitation.

Each individual screen can be straightforward while the complete path still takes effort to discover. The user thinks about inviting a person. The application organizes that task into pages, tabs, and fields.

That gap is where Aven fits.

The user asks, β€œHow do I invite a teammate?” Aven can offer a guide that highlights the next relevant control. The user follows the steps in the application where the task happens.

Here's an overview of the product.

The engineering detail that shapes the experience

A useful guide needs to know which page the user is on, which element a step refers to, and when that element is ready.

Aven uses context the product team registers, including pages, elements, and workflows. The host application handles navigation and UI behavior. That gives developers explicit places to connect guidance to the routes and controls they own. How Aven's guided workflows work

For a developer trying this in a product, I'd start with one complete task. Register its context, test the question that should lead to it, and walk through every step as a user would.

Pay particular attention to route changes, loading states, permissions, and responsive layouts. A button that exists in one state may be absent in another. Those conditions deserve the same care as the instruction shown beside it.

The Web SDK is available through npm.

npm install @avenappagent/web

The setup flow is to initialize the SDK, register the relevant pages, elements, and workflows, then test the question and guide against your application's current state. The Web SDK documentation covers the configuration and registration methods. Aven Web SDK

Knowledge Chat handles the questions that need an explanation

Some questions are about understanding the product.

β€œWhat is a workspace?” needs an explanation. β€œHow do I invite someone?” may benefit from a guide.

Aven's Knowledge Chat uses connected documentation, pages, and files to answer questions and show supporting sources. The aim is to keep relevant help close to the user's task, with a source they can consult for more detail.

Give product teams several ways to build guides

Writing a guide means choosing a target, explaining the action, and checking how the step appears in the product. Aven offers several authoring paths for that work.

  • Chrome Visual Builder. Select an element on the live website and edit the guide through a left sidebar with templates and settings. Preview the tooltip against the actual page before publishing.
  • GitHub import. Connect a selected repository with read-only access to generate draft guides. Review their content and targets on the site before publishing them.
  • Mobile editor. Connect a test device, capture an app screen, and select a target in the editor. Build the guide step and preview it on the connected device.

Each path brings the author back to the experience the user will see. Checking the target and the instruction together is part of building the guide.

Watch the demos in different applications

We've recorded Aven integration demos using three open-source projects with different interfaces.

These demos give developers concrete examples to compare with the workflows in their own products.

Which task would you guide first?

I'm looking for feedback from developers and product teams building apps where users regularly ask, β€œWhere do I find this?”

You can explore the product and its demos on the Aven website. Explore Aven App Agent

What's one task in your app that users keep asking you to explain? Share the task in the comments, especially if it spans several screens. I'd like to understand where guidance would help and what would make it practical for your team to maintain.

πŸ“° Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.