NaviNate

Inspiration

The internet was designed to simplify our lives, yet everyday users aimlessly scroll through overly complicated websites. They often know exactly what they want to accomplish—configure a service, compare products, complete a form, or find support—but do not know where to click.

Traditional chatbots explain steps in long, boring texts, leaving users puzzled as they try to perform them. We wanted to create a more interactive form of support: an assistant that can understand a user’s goal, operate the website with them, and visibly explain every action it takes.

This idea, that completely transcends the game, became NaviNate.

What it does

NaviNate is an embeddable AI support agent that saves countless hours for businesses and users, completing tasks directly on a company’s website.

Users describe an outcome in natural language, and NaviNate can:

Understand the current page
Find relevant controls and content
Navigate between pages
Click buttons and filters
Fill or clear form fields
Select dropdown options
Compare products and prices
Add products to a cart
Highlight important information
Undo supported commands
Complete website unique tasks
And more!

An animated cursor shows where NaviNate is working, while a small caption explains each action. The cursor disappears when inactive so it does not distract the user.

Companies manage NaviNate through a Base44 dashboard, where they can configure branding, assistant instructions, suggested prompts, autonomy settings, usage limits, website crawling, and analytics.

How we built it

NaviNate combines four main systems: an embeddable JavaScript widget, a Node.js backend, a Base44 control plane, and an optional ElevenLabs voice agent.

The widget scans the website’s live DOM and creates a structured representation of the page. It identifies interactive elements, visible labels, current values, dropdown options, links, selected states, and nearby context. This gives the agent enough information to understand both what is on the page and what actions are available.

The widget sends this page representation, the user’s current goal, and recent conversation history to our Express backend. The backend uses OpenAI to select one structured browser action at a time, including clicking, typing, selecting, scrolling, navigating, or highlighting.

After performing an action, NaviNate rescans the page before deciding what to do next. This one-action-at-a-time approach allows it to adapt to page changes instead of blindly following a potentially outdated sequence.

We built the widget in vanilla JavaScript so companies can embed it without adopting a specific frontend framework. A basic installation only requires a script tag containing the company’s client ID.

Base44 acts as NaviNate’s business-facing control plane. Companies can configure their branding, assistant behavior, welcome message, suggested prompts, autonomy level, voice settings, usage limits, and enabled status. NaviNate also reports engagement, completed goals, errors, feedback, voice usage, and estimated time saved to the Base44 dashboard.

We used Puppeteer and Cheerio to build a website crawler. It renders JavaScript-powered pages, follows internal links, and creates a tenant-specific sitemap. The agent uses this sitemap to navigate directly to relevant pages instead of searching through menus.

For voice interaction, we integrated ElevenLabs. ElevenLabs manages real-time speech, turn-taking, interruption, and narration, while NaviNate handles website control. The voice agent can read the current page, pass spoken goals to the browser-control system, and trigger Undo. API credentials remain on the backend and never reach the browser.

Our primary technologies include:

JavaScript, HTML, and CSS
Node.js and Express
OpenAI
Base44
ElevenLabs
Puppeteer
Cheerio
Browser session and local storage

Challenges we ran into

One of our greatest challenges was maintaining a continuous task across page navigation. Whenever NaviNate opens a new page, the existing document and JavaScript environment are destroyed. We used session storage to preserve the conversation, exact active goal, action history, undo information, and navigation state. NaviNate then rebuilds the widget and resumes the task on the destination page.

Voice made this even more difficult because navigation also closes the active WebSocket connection. NaviNate reconnects to ElevenLabs on the new page and restores the conversation so the visitor experiences one continuous interaction.

Another challenge was preventing previous commands from affecting new requests. A generic continuation instruction could cause the model to resume an older goal. We solved this by persisting the exact current goal and explicitly telling the agent to ignore previous tasks when continuing after navigation.

Interacting with website controls was also challenging. Native inputs, dropdowns, and framework-controlled components do not always respond correctly to simple JavaScript value assignments. We used native value setters and standard input and change events so websites built with different frameworks can recognize NaviNate’s changes.

Undo required more than simply reversing clicks. Form values and dropdown selections can be restored directly, but application state—such as cart contents—belongs to the host website. We created an undo-adapter contract that lets companies define how their application-specific state should be captured and restored.

We also had to prevent the agent from repeating actions. NaviNate uses stable element identifiers, action signatures, active-state detection, repetition limits, and maximum step counts to recognize when an action has already been completed.

Finally, voice interaction required careful latency and interruption handling. When a user speaks over the agent, queued audio must stop immediately. Microphone processing also has to remain stable while NaviNate changes the DOM and navigates the website.

Accomplishments that we’re proud of

We are proud that NaviNate moves beyond answering questions and can visibly help users complete real website workflows.

Some of our proudest accomplishments include:

Creating a framework-independent embeddable widget
Supporting both typed and spoken goals
Building an animated cursor that explains every action
Completing multi-step tasks across multiple pages
Preserving text and voice conversations during navigation
Allowing users to interrupt the voice agent naturally
Supporting clicks, typing, clearing, selections, scrolling, highlighting, and navigation
Implementing per-command Undo
Supporting host-defined undo for application state
Preventing older commands from leaking into new goals
Adding loop detection and action limits
Building tenant-specific website crawling
Allowing companies to trigger rescans through their dashboard
Connecting branding, configuration, and analytics through Base44
Keeping OpenAI and ElevenLabs credentials out of the browser
Creating a complete multi-page website to demonstrate NaviNate’s capabilities

Our favorite demonstration is giving NaviNate a complicated request by voice, watching it navigate and operate the website, interrupting it mid-sentence, and then asking it to undo the result.

What we learned

We learned that building an AI agent that acts is fundamentally different from building a chatbot that only responds.

A language model can understand the user’s intent, but reliable execution requires significant engineering around it. NaviNate needs to manage page state, identify controls, preserve goals, detect repeated actions, recover across navigation, and know when to stop.

We learned that user trust depends on visibility and control. The animated cursor, action captions, voice narration, interruption support, and Undo button help users understand what is happening and remain involved in the process.

We also learned that voice interaction is much more than speech-to-text and text-to-speech. A useful voice agent needs low latency, immediate interruption, current page context, and tools that connect conversation to real actions.

Base44 taught us the importance of separating the customer-facing control plane from the embedded runtime. Companies should be able to customize, monitor, disable, and improve their assistant without editing the website integration.

Most importantly, we learned that the strongest AI products combine probabilistic intelligence with deterministic safeguards. OpenAI helps interpret goals, but NaviNate’s state management, action limits, undo system, and navigation logic make those goals actionable.

What’s next for NaviNate

Our next priority is deterministic post-action verification. NaviNate should confirm observable results—such as a changed field, updated cart, active filter, or loaded destination—before reporting that an action succeeded.

We also plan to add:

A visible action plan with progress indicators
A prominent button to stop an active task
Confirmation before purchases, submissions, or destructive actions
Multi-level undo history
Company-defined success conditions
Developer annotations for important website controls
A visual integration debugger
Workflow recording and replay
Human support handoff
React and Vue packages
A published NaviNate web SDK
Production authentication and tenant isolation
Expanded website-friction and time-saved analytics
Smarter recovery when a website changes

Our long-term goal is to let any company add NaviNate with only a few lines of JavaScript. Instead of forcing users to learn every website, NaviNate will help them accomplish their goal directly—through text or voice, with the user watching and remaining in control.