Most modern web applications are powerful—but also hard to understand for first-time users.
Dashboards, admin panels, and feature-rich apps often overwhelm users with too many options and no clear guidance.
That’s the problem I wanted to solve.
💡 The Idea
Instead of making users read documentation or guess how things work, I thought:
What if the application itself could guide the user?
That’s how GuideAgent was built.
🚀 What is GuideAgent?
GuideAgent is a lightweight SDK that helps developers:
- Highlight UI elements
- Explain features step-by-step
- Guide users directly inside the application
It works across:
- React
- Vue
- Angular
- Plain HTML
🔴 Live Example
I integrated GuideAgent into my own portfolio:
👉 https://raghulportfolio.hub29.online
You can try the guide and see how it explains each section.
✨ Key Features
- 🧭 Step-by-step guided tours
- 🌐 Multi-language support (English, Tamil, Hindi)
- ⚡ Lightweight and fast
- 🎯 Flexible selector targeting
- 🔄 Auto-start for first-time users
🧩 How It Works
GuideAgent uses a simple JSON configuration:
{
"steps": [
{
"selector": "[data-guide-id='hero']",
"translations": {
"en": {
"title": "Welcome!",
"description": "Let me walk you through this app."
}
}
}
]
}
Just map UI elements → GuideAgent handles the rest.
⚙️ Usage
import GuideAgent from "guideagent";
GuideAgent.initFromUrl("/guide.json");
That’s it.
📦 npm Package
👉 https://www.npmjs.com/package/guideagent
🧠 Why I Built This
While working on real applications, I noticed:
- Users miss important features
- Onboarding is often ignored
- Documentation is rarely read
GuideAgent tries to solve this by making onboarding interactive and contextual.
🚧 What’s Next?
I’m planning to improve GuideAgent with:
- Resume guide feature
- Better UI/UX
- Analytics (track user interaction)
- Mobile support (Flutter)
🙌 Feedback Welcome
This is an early version, and I’d love feedback from developers.
Would you use something like this in your app?
Top comments (1)
Working on next version:
Would love suggestions from developers 👇