.claude/skills/webui-connection-info/SKILL.md
Find WebUI dev server address and Backend.AI API endpoint/credentials for testing. Trigger on: "which server", "connection info", "login credentials", "dev server URL", "API endpoint", "where to connect", "how to login", "test server", or when needing to interact with the running WebUI (screenshots, live checks, E2E).
npx skillsauth add lablup/backend.ai-webui webui-connection-infoInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
The WebUI dev server runs at http://localhost:9081 by default.
Port can be offset via BAI_WEBUI_DEV_PORT_OFFSET in .env.development.local. Actual port = 9081 + offset.
To check if the dev server is running:
curl -s -o /dev/null -w "%{http_code}" http://localhost:9081 2>/dev/null
If not running, tell the user to start it with pnpm run dev.
Read e2e/envs/.env.playwright to get the current server endpoint and login credentials.
Key variables:
E2E_WEBSERVER_ENDPOINT — Backend.AI API server URLE2E_ADMIN_EMAIL / E2E_ADMIN_PASSWORD — admin accountE2E_USER_EMAIL / E2E_USER_PASSWORD — regular user accountE2E_USER2_*, E2E_MONITOR_*, E2E_DOMAIN_ADMIN_*Always read the file fresh — credentials and endpoints change. Do not hardcode or cache them.
The WebUI login page requires:
The app uses config.toml with connectionMode = "SESSION". If apiEndpoint is empty, the user must enter the endpoint manually on the login page.
.env.playwright file may have multiple endpoints commented out (e.g., LTS vs main). Use the uncommented E2E_WEBSERVER_ENDPOINT.document.getElementById('webpack-dev-server-client-overlay')?.remove()tools
GraphQL/Relay integration patterns for Backend.AI WebUI React components. Covers useLazyLoadQuery, useFragment, useRefetchableFragment, fragment architecture (query orchestrator + fragment component), naming conventions, modern directives (@required, @alias), client directives (@since, @deprecatedSince, @skipOnClient), and query optimization.
data-ai
Create Relay-based infinite scroll select components extending BAISelect. Supports name-based values (usePaginationFragment) and id-based values (useLazyLoadQuery + useLazyPaginatedQuery) with search, optimistic updates, and multiple selection modes.
development
# record-e2e-gif Skill Record Playwright e2e tests as GIF animations, one GIF per test case. ## Prerequisites - `ffmpeg` must be installed (`/opt/homebrew/bin/ffmpeg` on macOS) - Playwright dev server must be running. The endpoint is read from `e2e/envs/.env.playwright` (`E2E_WEBUI_ENDPOINT`). Do NOT hardcode the port — it varies per environment. ## How It Works 1. Run specified Playwright tests with `--video=on` (Playwright saves `.webm` per test in `test-results/`) 2. For each `.webm` fil
tools
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.