Skip to content

Add Guided UI demo #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
beaufortfrancois wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add Guided UI demo #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions demos/guided-ui/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Guided UI | WebMCP Demo

This demo illustrates a "Guided UI" using Vanilla JavaScript and the WebMCP protocol. The page features a dynamic, state-aware dashboard. Instead of a static tutorial, an AI Agent uses WebMCP tools to visually guide the user through a multi-step workflow based on their specific goal.

## Features

- **Dynamic Discovery Dashboard**: A mock "cluttered" UI with 10 different action buttons. Crucially, most buttons start hidden or locked. Completing prerequisite actions reveals new paths in the UI.
- **Goal Input**: A text area where users can specify their ultimate goal (e.g., "I want to clean the data and generate a report").
- **State-Aware Guidance**: The AI Agent dynamically analyzes the user's goal and the *currently available* dashboard state using the `get_available_actions` tool. It must reason through the chain of commands to unlock the required features.
- **Synchronous WebMCP Tools**: The `highlight_ui_element` tool uses Promises to wait for the user to click the highlighted button before returning to the Agent. This enables a seamless loop where the Agent guides the user step-by-step, re-evaluating the newly revealed actions after each interaction until the ultimate goal is achieved.
- **Vanilla JS Foundations**: The entire experience is driven by Vanilla JS and CSS transitions, showing how robust WebMCP implementations can be without heavy frameworks.

## How it works

1. The user types their goal into the input field.
2. The user asks the WebMCP agent (e.g. via the WebMCP inspector extension) to guide them.
3. The Agent calls the `get_available_actions` tool to understand what buttons are currently visible in the DOM and what the user's goal is.
4. The Agent reasons out the next required step (even if the final button is hidden, it must know to trigger the visible prerequisite).
5. The Agent calls the `highlight_ui_element` tool with the corresponding element ID and an instruction.
6. The webpage darkens the background and highlights the targeted button, fading it into focus and showing a tooltip with the Agent's instruction.
7. Execution of the tool is paused until the user clicks the highlighted button.
8. Upon clicking, the underlying JS toggles the button state and dynamically fades in any newly unlocked dependent buttons.
9. The `highlight_ui_element` tool resolves, explicitly telling the Agent to call `get_available_actions` again.
10. The loop continues until the user's ultimate goal is fulfilled.
136 changes: 136 additions & 0 deletions demos/guided-ui/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!doctype html>
<!--
Copyright 2026 Google LLC
SPDX-License-Identifier: Apache-2.0
-->

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guided UI | WebMCP Demo</title>
<link href="style.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header class="app-header">
<h1>Data Processing Dashboard</h1>
<p>Complex Data Workflow Management</p>
</header>

<main class="dashboard">
<div id="webmcp-warning" class="warning-banner">
⚠️ WebMCP is not detected. Please run this demo in a compatible browser or extension to use the AI Agent guidance.
</div>

<!-- Chat Interface / Goal Input -->
<section class="goal-section">
<h2>What is your Ultimate Goal?</h2>
<textarea id="goal-input" rows="3" placeholder="e.g., 'I want to generate and export a PDF report of our recent sales trends.'"></textarea>

<div class="suggestions-container">
<span class="suggestions-label">Quick Suggestions:</span>
<button type="button" class="suggestion-chip">I need to connect to our live server, clean up the data, and email the report.</button>
<button type="button" class="suggestion-chip">I want to start a brand new project, initialize the database, and export a PDF.</button>
<button type="button" class="suggestion-chip">I'm in a hurry. I just want to use a template to generate a PDF report quickly.</button>
<button type="button" class="suggestion-chip">I just need to fetch the schema from a new project. Stop after that.</button>
</div>

<div id="agent-status" class="agent-status hidden">
<span class="spinner">⏳</span>
<span class="status-text">WebMCP Agent is thinking...</span>
</div>

<p class="instruction-text">Enter or select your goal above, then ask your WebMCP agent to guide you!</p>
</section>

<!-- Cluttered Dashboard with at least 10 buttons -->
<section class="actions-section">
<div class="actions-header">
<h2>Workflow Actions</h2>
<button id="btn-reset" class="secondary-btn">🔄 Reset Dashboard</button>
</div>
<div class="button-grid">
<!-- Entry Points -->
<button id="btn-new-project" class="action-btn">
<span class="icon">✨</span> New Project
<span class="status-indicator"></span>
</button>
<button id="btn-connect-server" class="action-btn">
<span class="icon">🌍</span> Connect to Server
<span class="status-indicator"></span>
</button>
<button id="btn-import-template" class="action-btn">
<span class="icon">📥</span> Import Template
<span class="status-indicator"></span>
</button>

<!-- Branch A: New Project -->
<button id="btn-init-db" class="action-btn hidden-action">
<span class="icon">🗄️</span> Initialize Database
<span class="status-indicator"></span>
</button>

<!-- Branch B: Connect -->
<button id="btn-enter-credentials" class="action-btn hidden-action">
<span class="icon">🔑</span> Enter Credentials
<span class="status-indicator"></span>
</button>

<!-- Branch C: Import -->
<button id="btn-select-template" class="action-btn hidden-action">
<span class="icon">📑</span> Select Template
<span class="status-indicator"></span>
</button>
<button id="btn-customize-template" class="action-btn hidden-action">
<span class="icon">🎨</span> Customize Template
<span class="status-indicator"></span>
</button>

<!-- Shared Downstream -->
<button id="btn-fetch-schema" class="action-btn hidden-action">
<span class="icon">📄</span> Fetch Schema
<span class="status-indicator"></span>
</button>
<button id="btn-clean-data" class="action-btn hidden-action">
<span class="icon">🧹</span> Clean Data
<span class="status-indicator"></span>
</button>
<button id="btn-join-tables" class="action-btn hidden-action">
<span class="icon">🔗</span> Join Tables
<span class="status-indicator"></span>
</button>
<button id="btn-apply-filter" class="action-btn hidden-action">
<span class="icon">🔍</span> Apply Filter
<span class="status-indicator"></span>
</button>
<button id="btn-analyze-trends" class="action-btn hidden-action">
<span class="icon">📈</span> Analyze Trends
<span class="status-indicator"></span>
</button>
<button id="btn-generate-report" class="action-btn hidden-action">
<span class="icon">📊</span> Generate Report
<span class="status-indicator"></span>
</button>
<button id="btn-export-pdf" class="action-btn hidden-action">
<span class="icon">💾</span> Export PDF
<span class="status-indicator"></span>
</button>
<button id="btn-send-email" class="action-btn hidden-action">
<span class="icon">✉️</span> Send Email
<span class="status-indicator"></span>
</button>
</div>
</section>
</main>

<!-- Overlay and Tooltip for Guidance -->
<div id="backdrop" class="hidden"></div>
<div id="tooltip" class="hidden"></div>

<script type="module" src="script.js"></script>
</body>
</html>
Loading
Loading