{"_id":"@a2ui-adaptive/react","name":"@a2ui-adaptive/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@a2ui-adaptive/react","version":"0.1.0","description":"A2UI runtime + AppCatalog React components: renderer, streaming client, validation, and the full domain component catalog.","type":"module","license":"MIT","sideEffects":["**/*.css"],"main":"./dist/a2ui-react.umd.cjs","module":"./dist/a2ui-react.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/a2ui-react.js","require":"./dist/a2ui-react.umd.cjs"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"vite build","test":"vitest run","typecheck":"tsc --noEmit"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","zustand":"^5.0.0"},"devDependencies":{"@radix-ui/react-accordion":"^1.2.11","@radix-ui/react-dialog":"^1.1.14","@radix-ui/react-label":"^2.1.7","@radix-ui/react-select":"^2.2.5","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-tabs":"^1.1.12","@radix-ui/react-toast":"^1.2.14","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.3.0","@types/node":"^22.15.0","@types/react":"^19.1.4","@types/react-dom":"^19.1.5","@vitejs/plugin-react":"^4.4.1","autoprefixer":"^10.4.21","class-variance-authority":"^0.7.1","clsx":"^2.1.1","jsdom":"^26.1.0","lucide-react":"^0.511.0","postcss":"^8.5.3","react":"^19.1.0","react-dom":"^19.1.0","tailwind-merge":"^2.6.0","tailwindcss":"^3.4.17","tailwindcss-animate":"^1.0.7","typescript":"^5.8.3","vite":"^6.3.5","vite-plugin-dts":"^4.5.4","vitest":"^3.1.3","zustand":"^5.0.5"},"_id":"@a2ui-adaptive/react@0.1.0","gitHead":"b6f6e09a4a4a020948ac76d00cb9c2d86c65767e","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-f6qBcm8AnpCxTVtDqzAz5H0Y7Vpb+RVoBsWTHDGTtNXda9nbQFcawI3mpkgAkE3Er7sGtlY89gq8D7FfL237wA==","shasum":"c354cb1b793f88aef02a8e001aa22be86489b51b","tarball":"https://registry.npmjs.org/@a2ui-adaptive/react/-/react-0.1.0.tgz","fileCount":6,"unpackedSize":547187,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDqlIcqdvZKtcwUgasN79u3yxy6oXhA+AFb7Uwmvp68GwIhANzYaHyhKZxlNC+3ymPbjmzgma8Dsn303AUWr7kPw10y"}]},"_npmUser":{"name":"bhanutejasangars","email":"bhanutejasangars@gmail.com"},"directories":{},"maintainers":[{"name":"bhanutejasangars","email":"bhanutejasangars@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1787219445659_0.18577648378161293"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-20T09:50:45.437Z","0.1.0":"2026-08-20T09:50:45.812Z","modified":"2026-08-20T09:50:46.062Z"},"maintainers":[{"name":"bhanutejasangars","email":"bhanutejasangars@gmail.com"}],"description":"A2UI runtime + AppCatalog React components: renderer, streaming client, validation, and the full domain component catalog.","license":"MIT","readme":"# @a2ui-adaptive/react\n\nA2UI runtime for React: a streaming client, message validator, JSON-pointer data binding, and the full `AppCatalog` domain components (weather, news, shopping, movies, travel, finance, invoices and more), wrapped in a ready-to-use canvas.\n\nThe backend is a separate service. Point this package at it with `setBackendBaseUrl` and stream intents over SSE.\n\n## Install\n\n```bash\nnpm install @a2ui-adaptive/react react react-dom zustand\n```\n\n`react >= 18`, `react-dom >= 18`, and `zustand ^5` are peer dependencies. Everything else is bundled.\n\n## Quick start\n\n```tsx\nimport { A2uiCanvas, streamIntent, setBackendBaseUrl } from \"@a2ui-adaptive/react\";\nimport \"@a2ui-adaptive/react/styles.css\"; // required once\n\nsetBackendBaseUrl(\"http://localhost:8000\"); // default; points at the A2UI backend\n\nfunction App() {\n return ;\n}\n\n// On submit:\nconst result = await streamIntent(\"Show popular movies\", { /* userContext */ });\nif (result.error) console.error(result.error);\n```\n\n`streamIntent` POSTs to `{backendUrl}/api/stream`, streams the A2UI messages into the store via `applyMessage`, and the canvas re-renders automatically.\n\n## API\n\n### Canvas\n\n- `A2uiCanvas({ surfaceId?, className? })` — renders the most recent surface (or a specific one by id) using `A2UIRenderer` plus `AppCatalog`.\n- `A2UIRenderer` — lower-level renderer component; used internally by `A2uiCanvas`.\n\n### Streaming\n\n- `streamIntent(text, userContext, history?)` → `{ domain, surfaceId, error, routing }` — streams an intent to the backend. `history` is `{ role, content, state? }[]` for multi-turn conversations.\n- `setBackendBaseUrl(url)` / `getBackendBaseUrl()` / `backendUrl(path)` — configure the backend origin.\n\n### Actions & validation\n\n- `dispatchAction(comp, surfaceId, data, index?)` — runs a component's `action`: local `functionCall`s (`changeTab`, `toggleCompare`, `clearCompare`) are executed in-app; `event`s are POSTed to `{backendUrl}/api/handle-action`.\n- `validateMessage(msg)` / `CatalogError` — validate an A2UI message against `COMPONENT_NAMES`/`LOCAL_FUNCTIONS` before applying.\n\n### Data binding\n\n- `getPointer(data, path)` / `setPointer(data, path, value)` / `parsePointer(path)` — JSON-pointer helpers used for component bindings.\n- `JsonPointerError` — thrown on malformed pointers.\n\n### State & catalog\n\n- `useA2UIStore` — zustand store. `useA2UIStore.getState().applyMessage(msg)` applies raw A2UI messages; `beginTurn()`, `patchData(surfaceId, path, value)` are also available.\n- `AppCatalog` — `Record`; extend or replace it to add custom components.\n- `CATALOG_ID`, `COMPONENT_NAMES`, `LOCAL_FUNCTIONS` — catalog metadata used by validation.\n\n### Types\n\n- `A2UIMessage`, `CreateSurface`, `UpdateComponents`, `UpdateDataModel`, `SurfaceState`, `Bound`, `StreamResult`, `RoutingState`.\n\n## Custom components\n\n`AppCatalog` maps A2UI component names to React components. It is a plain exported object, so register your own components directly:\n\n```tsx\nimport { AppCatalog } from \"@a2ui-adaptive/react\";\n\nfunction MyWidget(props: Record) {\n return
MyWidget
;\n}\n\nAppCatalog.MyWidget = { component: MyWidget };\n```\n\nUpdate the backend's catalog (e.g. `backend/app/a2ui/catalogs/AppCatalog.json`) and `COMPONENT_NAMES` so the agent knows the component exists and validation accepts it.\n\n## Styles\n\nThe package ships compiled Tailwind CSS as `dist/styles.css`. Import `@a2ui-adaptive/react/styles.css` once in your app entry. If you use a different styling system, the components still work; only the Tailwind utility classes are missing.\n\n## Development\n\n```bash\nnpm run build # vite lib build → dist/{a2ui-react.js, a2ui-react.umd.cjs, styles.css, index.d.ts}\nnpm run typecheck # tsc --noEmit\n```","readmeFilename":"README.md","_rev":"1-a75dbf41cdeecdef3f2faaa692d3165a"}