scaffold-react-vite-a2ui

Adds an A2UI rendering host with zustand store and mock message source to scaffolded Vite/React projects.

Updated Feb 16, 2026
One-click install
npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill scaffold-react-vite-a2ui-gqadonis
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: scaffold-react-vite-a2ui
Source: https://github.com/GQAdonis/artifact-refiner-skill/tree/main/skills/scaffold-react-vite-a2ui
Command: npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill scaffold-react-vite-a2ui-gqadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @a2ui/react, @a2ui/web_core, zustand, and includes scripts (resource) and references (resource) components.

What problem does it solve? Rendering agent-described UI in a React app requires wiring a message stream into component state, and hand-written renderers often fail to match the A2UI schema. This Skill layers a working A2UI host onto an existing scaffold-react-vite project so agent-generated interfaces render under pnpm dev without a second process. ## Core Features & Use Cases - A2UI Host Layering: Emits a zustand surface store, a useSurface hook, and an a2ui-surface component that renders via the upstream @a2ui/react renderer. - Pinned Dependencies: Installs exact versions of @a2ui/[email protected] and @a2ui/[email protected], both required for the MessageProcessor import under pnpm isolation. - Development Mock Source: Ships a canned message sequence so the app runs without an agent; any AsyncIterable transport (WebSocket, SSE, fetch) substitutes directly for production. - Use Case: After scaffolding a Vite/React app, run the script with --target pointing at the project to get a feature folder that renders A2UI v1.0 messages (createSurface, updateComponents, updateDataModel) immediately in dev mode. ## Quick Start Run the scaffold-react-vite-a2ui script with --target pointing at my existing scaffold-react-vite project to add an A2UI rendering host.

Frequently Asked Questions about scaffold-react-vite-a2ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render A2UI messages in a React app?

Run the scaffold script with --target pointing at an existing scaffold-react-vite project. It emits a zustand store that reduces the A2UI message stream, a useSurface hook, and a component that renders through the upstream @a2ui/react renderer.

What is the difference between A2UI and AG-UI protocol hosts?

Both are sibling scaffolders in the same repository shape. This Skill wraps a project with an A2UI rendering host using @a2ui/react, while scaffold-react-vite-agui targets the AG-UI protocol instead.

Why do I need both @a2ui/react and @a2ui/web_core installed?

The a2ui-surface component imports MessageProcessor from @a2ui/web_core/v0_9, and @a2ui/react does not re-export it. Under pnpm's strict isolation, installing only @a2ui/react leaves that import unresolvable.

Can I use a real WebSocket transport instead of the mock source?

Yes. The useSurface hook accepts any AsyncIterable of messages, so WebSocket, SSE, or fetch transports substitute directly. The mock source is development-only and replays a canned sequence.

Which A2UI message types are supported by the renderer?

The pinned renderer implements v0.9 and supports createSurface, updateComponents, and updateDataModel. deleteSurface, callFunction, and actionResponse are reduced into store state but reported rather than rendered.