{"_id":"@a2ui-bridge/react","name":"@a2ui-bridge/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@a2ui-bridge/react","version":"0.1.0","description":"React adapter for A2UI protocol - hooks and components for React applications","author":{"name":"tpitre"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"dependencies":{"@a2ui-bridge/core":"0.1.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^18.3.0","react":"^18.3.0","typescript":"^5.7.2"},"repository":{"type":"git","url":"git+https://github.com/southleft/a2ui-bridge.git","directory":"packages/react"},"keywords":["a2ui","react","adaptive-ui","llm","ai-ui"],"scripts":{"build":"tsc","dev":"tsc --watch","clean":"rm -rf dist *.tsbuildinfo","lint":"eslint src"},"_id":"@a2ui-bridge/react@0.1.0","bugs":{"url":"https://github.com/southleft/a2ui-bridge/issues"},"homepage":"https://github.com/southleft/a2ui-bridge#readme","_integrity":"sha512-mGNaxtTNg5UQ/TC9TFgudKwsx1tPiZpNbOOl2CZQDaqZ67aFR5uyLRgCL+xND1p4wqPSsPB5JnLRyUVCI7nqdQ==","_resolved":"/private/var/folders/dx/kt5qryjx605f2md58m5cg3n80000gn/T/3406a5b84bd3e2b17f50057f962053bb/a2ui-bridge-react-0.1.0.tgz","_from":"file:a2ui-bridge-react-0.1.0.tgz","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-mGNaxtTNg5UQ/TC9TFgudKwsx1tPiZpNbOOl2CZQDaqZ67aFR5uyLRgCL+xND1p4wqPSsPB5JnLRyUVCI7nqdQ==","shasum":"66b4be658741575b5797eaf9bd0a3d385d1a0fec","tarball":"https://registry.npmjs.org/@a2ui-bridge/react/-/react-0.1.0.tgz","fileCount":35,"unpackedSize":52624,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD86YOyLR9HHhVhBwpmiLO/v6/rmBE0NBX13UlSBs8XxgIgcBPiF1Uefjtn4zlRx8uBaFDKcoeXF1WYcSSDRD9OKmM="}]},"_npmUser":{"name":"tpitre","email":"tpitre@southleft.com"},"directories":{},"maintainers":[{"name":"tpitre","email":"tpitre@southleft.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1769112008775_0.020500893896365113"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-22T20:00:08.706Z","0.1.0":"2026-01-22T20:00:08.924Z","modified":"2026-01-22T20:00:09.120Z"},"maintainers":[{"name":"tpitre","email":"tpitre@southleft.com"}],"description":"React adapter for A2UI protocol - hooks and components for React applications","homepage":"https://github.com/southleft/a2ui-bridge#readme","keywords":["a2ui","react","adaptive-ui","llm","ai-ui"],"repository":{"type":"git","url":"git+https://github.com/southleft/a2ui-bridge.git","directory":"packages/react"},"author":{"name":"tpitre"},"bugs":{"url":"https://github.com/southleft/a2ui-bridge/issues"},"license":"MIT","readme":"# @a2ui-bridge/react\n\nReact adapter for A2UI Bridge. Provides hooks and components for rendering A2UI protocol messages.\n\n## Installation\n\n```bash\nnpm install @a2ui-bridge/core @a2ui-bridge/react\n```\n\n## Usage\n\n```tsx\nimport { Surface, useA2uiProcessor } from '@a2ui-bridge/react';\nimport type { ComponentMapping, UserAction } from '@a2ui-bridge/react';\n\n// Define your component mapping\nconst components: ComponentMapping = {\n  Text: ({ node }) => <span>{node.properties.text?.literalString}</span>,\n  Button: ({ node, onAction }) => (\n    <button onClick={() => onAction?.(node.properties.action?.name ?? 'click')}>\n      {/* render child */}\n    </button>\n  ),\n  // ... more components\n};\n\nfunction App() {\n  const processor = useA2uiProcessor();\n\n  const handleAction = (action: UserAction) => {\n    console.log('Action:', action.actionName);\n    console.log('From:', action.sourceComponentId);\n    console.log('Context:', action.context);\n  };\n\n  // Process messages (typically from LLM stream)\n  useEffect(() => {\n    processor.processMessages(messages);\n  }, [messages, processor]);\n\n  return (\n    <Surface\n      processor={processor}\n      components={components}\n      surfaceId=\"@default\"\n      onAction={handleAction}\n    />\n  );\n}\n```\n\n## API\n\n### `useA2uiProcessor()`\n\nCreates a stable A2UIProcessor instance that persists across re-renders.\n\n```tsx\nconst processor = useA2uiProcessor();\n\n// Process messages\nprocessor.processMessages(messages);\n\n// Get current surfaces\nconst surfaces = processor.getSurfaces();\n```\n\n### `<Surface />`\n\nMain rendering component that displays A2UI surfaces.\n\n#### Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `processor` | `MessageProcessor` | The A2UI processor instance |\n| `components` | `ComponentMapping` | Map of component types to React components |\n| `surfaceId` | `string` | Surface ID to render (default: `@default`) |\n| `onAction` | `(action: UserAction) => void` | Callback when user triggers an action |\n\n### Types\n\n#### ComponentMapping\n```typescript\ntype ComponentMapping = Record<string, React.ComponentType<A2UIComponentProps>>;\n```\n\n#### A2UIComponentProps\n```typescript\ninterface A2UIComponentProps<T = AnyComponentNode> {\n  node: T;\n  children?: React.ReactNode;\n  onAction?: (actionName: string, context?: Record<string, unknown>) => void;\n}\n```\n\n#### UserAction\n```typescript\ninterface UserAction {\n  actionName: string;\n  sourceComponentId: string;\n  timestamp: number;\n  context?: Record<string, unknown>;\n}\n```\n\n## Using with Component Libraries\n\nThis package is designed to work with component implementations like `@a2ui-bridge/react-shadcn`:\n\n```tsx\nimport { Surface, useA2uiProcessor } from '@a2ui-bridge/react';\nimport { shadcnComponents } from '@a2ui-bridge/react-shadcn';\n\nfunction App() {\n  const processor = useA2uiProcessor();\n\n  return (\n    <Surface\n      processor={processor}\n      components={shadcnComponents}\n      onAction={handleAction}\n    />\n  );\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-137601d5a7db490a326b3d8acaadbb6b"}