AgentSkillsCN

demo-site-automation

将 Voyager 屏幕转换为导航 3

SKILL.md
--- frontmatter
name: demo-site-automation
description: Automates browser-based interactions with Umbraco.AI demo site using Playwright. Handles login, navigation, and editing of AI entities (connections, profiles, prompts, agents). Use when testing UI workflows, creating or editing AI entities through the backoffice, or demonstrating Umbraco.AI features.
argument-hint: [login|navigate-to-<section>|edit-<entity>|create-<entity>|status]
allowed-tools: mcp__playwright__*, Bash, Read, Skill

Demo Site Browser Interactions

Automate browser-based interactions with the Umbraco.AI demo site using Playwright MCP.

Command: $ARGUMENTS

Execute the requested browser interaction with the demo site.

Available Commands

Authentication

  • •login: Login to Umbraco backoffice with demo credentials

Navigation

  • •navigate-to-connections: Navigate to AI Connections section
  • •navigate-to-profiles: Navigate to AI Profiles section
  • •navigate-to-prompts: Navigate to AI Prompts section (Umbraco.AI.Prompt)
  • •navigate-to-agents: Navigate to AI Agents section (Umbraco.AI.Agent)
  • •navigate-to-copilot: Open Copilot chat UI (Umbraco.AI.Agent.Copilot)

Entity Operations

  • •create-connection [provider]: Create new AI connection (e.g., OpenAI, Anthropic)
  • •edit-connection [name]: Edit existing connection by name
  • •create-profile [capability]: Create new AI profile (e.g., chat, embedding)
  • •edit-profile [name]: Edit existing profile by name
  • •create-prompt: Create new prompt template
  • •edit-prompt [name]: Edit existing prompt by name
  • •create-agent: Create new AI agent
  • •edit-agent [name]: Edit existing agent by name

Utilities

  • •status: Check browser connection and demo site availability
  • •snapshot: Take accessibility snapshot of current page

Demo Site Credentials

Implementation Guide

Step 1: Discover Demo Site URL

Before any browser interaction, discover the demo site URL:

bash
# Use demo-site-management skill to check status and get URL
/demo-site-management status

If demo site is not running, start it first:

bash
/demo-site-management start

Extract the URL from the status output (format: https://127.0.0.1:<port> or https://localhost:44355).

Step 2: Initialize Browser (if needed)

Check if browser page is already open:

code
mcp__playwright__browser_snapshot

If error indicates no page, navigate to the demo site:

code
mcp__playwright__browser_navigate: url = <discovered-url>/umbraco

Step 3: Execute Command

For "login"

  1. •Navigate to /umbraco if not already there
  2. •Take snapshot to see current state
  3. •If already logged in (dashboard visible), report and exit
  4. •If login form visible:
    • •Fill email field: admin@example.com
    • •Fill password field: password1234
    • •Click login button
  5. •Wait for dashboard to load (2-3 seconds)
  6. •Take snapshot to confirm login success
  7. •Report: "Logged in successfully as admin@example.com"

Playwright sequence:

code
browser_snapshot (check state)
browser_fill_form (email + password fields)
browser_click (login button ref)
browser_wait_for (dashboard content)
browser_snapshot (confirm)

For "navigate-to-connections"

  1. •Ensure logged in (check snapshot for dashboard)
  2. •Navigate to /umbraco#/ai/connections
  3. •Wait 2 seconds for section to load
  4. •Take snapshot to show connections list
  5. •Report: "Navigated to AI Connections. Found X connections."

Section URLs: See UMBRACO-UI.md for all section URLs.

For "create-connection [provider]"

  1. •Navigate to connections section
  2. •Take snapshot to find "Create" or "Add" button
  3. •Click create button
  4. •Wait for create dialog/form
  5. •Take snapshot to see form fields
  6. •Fill in fields based on provider:
    • •Name: Auto-generate or use argument
    • •Provider: Select from dropdown (OpenAI, Anthropic, etc.)
    • •API Key: Use placeholder or prompt user
  7. •Click save button
  8. •Wait for success notification
  9. •Report: "Connection '[name]' created successfully"

Playwright pattern:

code
browser_navigate (to connections)
browser_snapshot (find create button)
browser_click (create button ref)
browser_snapshot (see form)
browser_fill_form (name + provider + api key)
browser_click (save button ref)
browser_wait_for (success message)

For "edit-connection [name]"

  1. •Navigate to connections section
  2. •Take snapshot to find connection by name
  3. •Click edit button/icon for the connection
  4. •Wait for edit dialog/form
  5. •Take snapshot to show editable fields
  6. •Inform user: "Edit form loaded. What would you like to change?"
  7. •Wait for user instructions on what to edit
  8. •Apply changes using browser_fill_form or browser_type
  9. •Click save
  10. •Report: "Connection '[name]' updated successfully"

For "create-profile [capability]"

Similar pattern to create-connection, but navigate to /umbraco#/ai/profiles and use capability (chat/embedding) in form.

For "create-prompt"

Navigate to /umbraco#/ai-prompt/prompts (requires Umbraco.AI.Prompt package). Follow create pattern with prompt-specific fields (name, template, variables).

For "create-agent"

Navigate to /umbraco#/ai-agent/agents (requires Umbraco.AI.Agent package). Follow create pattern with agent-specific fields (name, profile, tools, system prompt).

For "navigate-to-copilot"

  1. •Navigate to /umbraco#/ai-agent/copilot
  2. •Wait for Copilot UI to load
  3. •Take snapshot showing chat interface
  4. •Report: "Copilot chat UI loaded. Ready for interactions."

For "status"

  1. •Check if demo-site is running: /demo-site-management status
  2. •Try to connect browser to demo site URL
  3. •Take snapshot if connected
  4. •Report:
    • •Demo site status: running/not running
    • •Browser status: connected/not connected
    • •Current page: URL and title
    • •Suggestion: How to proceed

Step 4: Error Handling

Common errors and solutions:

ErrorSolution
Browser not installedRun mcp__playwright__browser_install
Demo site not runningRun /demo-site-management start first
Login failedCheck credentials, take snapshot for debugging
Element not foundTake snapshot, update selectors based on actual HTML
Navigation timeoutIncrease wait time, check for loading indicators

Reference Documentation

Umbraco UI patterns: See UMBRACO-UI.md for element patterns, section URLs, and snapshot tips.

Playwright tools: See PLAYWRIGHT-REFERENCE.md for tool details and common patterns.

Integration with demo-site Skill

This skill depends on the demo-site-management skill for infrastructure:

bash
# Typical workflow
/demo-site-management start                     # Start the demo site
/demo-site-automation login           # Login via browser
/demo-site-automation navigate-to-connections  # Navigate to section
/demo-site-automation create-connection OpenAI # Create entity

Success Criteria

After login: User sees Umbraco dashboard After navigation: Correct section visible with list of entities After create: New entity appears in list with success notification After edit: Changes saved and reflected in list After status: Clear report of demo site and browser state

Example Usage

bash
# Start demo site and login
/demo-site-management start
/demo-site-automation login

# Create a connection
/demo-site-automation create-connection OpenAI

# Navigate and edit
/demo-site-automation navigate-to-profiles
/demo-site-automation edit-profile "Default Chat"

# Work with add-on packages
/demo-site-automation navigate-to-prompts
/demo-site-automation create-prompt

# Check status anytime
/demo-site-automation status

Tips

  • •Always check if demo site is running before browser interactions
  • •Take snapshots frequently to understand page state
  • •Use browser_snapshot instead of browser_take_screenshot for actions (faster, more accurate)
  • •Wait 2-3 seconds after navigation for Lit components to render
  • •If elements not found, take snapshot and adjust selectors
  • •Use browser_evaluate for complex queries (e.g., counting entities)
  • •Test with different providers (OpenAI, Anthropic, Amazon, Google)