{"_id":"@databridgeai/react","name":"@databridgeai/react","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@databridgeai/react","version":"1.0.0","description":"DataBridge AI React — Drop-in React chat widget for natural language database queries","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","dev":"tsc -p tsconfig.json --watch"},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"chart.js":"^4.4.7"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","typescript":"^5.3.3"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/rishabhAgg/DataBridgeAI.git","directory":"packages/react"},"homepage":"https://github.com/rishabhAgg/DataBridgeAI#readme","keywords":["databridgeai","ai","chat","react","widget","database","natural-language"],"license":"MIT","_id":"@databridgeai/react@1.0.0","gitHead":"24eb976b5556503fb73f9af1e781ce2f83bbe899","bugs":{"url":"https://github.com/rishabhAgg/DataBridgeAI/issues"},"_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-/UYPy8cPhUwU0PB+MN9J3GCj3rmZ+zG7i3oZ/BLp3kuJGrugyLqWW0IK0pgZaO2pOMlfgfCJGVfzMZuBbum3kg==","shasum":"5513e50e0c9cc64603568e7a5683a3d6d762cce4","tarball":"https://registry.npmjs.org/@databridgeai/react/-/react-1.0.0.tgz","fileCount":14,"unpackedSize":27773,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA4QTUI+tJmj9EVgArCLnBli9T8Kg/eqlGSFt6NB9qNjAiEAmln562hWoVb0PGe6dB4Gz8JXfXV+UtIxsO5CF5cswhY="}]},"_npmUser":{"name":"rishabh105","email":"aggarwalrishabh105@gmail.com"},"directories":{},"maintainers":[{"name":"rishabh105","email":"aggarwalrishabh105@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_1.0.0_1771573179756_0.8798040016566371"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-20T07:39:39.676Z","1.0.0":"2026-02-20T07:39:39.916Z","modified":"2026-02-20T07:39:40.105Z"},"maintainers":[{"name":"rishabh105","email":"aggarwalrishabh105@gmail.com"}],"description":"DataBridge AI React — Drop-in React chat widget for natural language database queries","homepage":"https://github.com/rishabhAgg/DataBridgeAI#readme","keywords":["databridgeai","ai","chat","react","widget","database","natural-language"],"repository":{"type":"git","url":"git+https://github.com/rishabhAgg/DataBridgeAI.git","directory":"packages/react"},"bugs":{"url":"https://github.com/rishabhAgg/DataBridgeAI/issues"},"license":"MIT","readme":"# @databridgeai/react\n\n**Drop-in React chat widget for natural language database queries.**\n\nAdd a ChatGPT-like interface to your React app that lets users query your database in plain English. Renders tables, images, and charts automatically.\n\n## Quick Start\n\n```bash\nnpm install @databridgeai/react\n```\n\n```tsx\nimport { ChatWidget } from '@databridgeai/react';\n\nfunction App() {\n  return (\n    <ChatWidget\n      endpoint=\"/api/ai/chat\"\n      userContext={{\n        userId: currentUser.id,\n        orgId: currentUser.organizationId,\n        role: currentUser.role,\n      }}\n      title=\"Data Assistant\"\n    />\n  );\n}\n```\n\nThat's it. Your users can now ask questions like:\n- \"Show me this month's revenue\"\n- \"Who are our top 10 customers?\"\n- \"Compare sales by region as a bar chart\"\n\n## Features\n\n- **Table rendering**: Query results displayed in clean, sortable tables\n- **Chart visualization**: Automatic Chart.js rendering (bar, pie, line, doughnut)\n- **Image detection**: URLs to images render as inline thumbnails\n- **Responsive design**: Works on desktop and mobile\n- **Customizable**: Adjust colors, title, placeholder text\n- **TypeScript**: Full type safety included\n\n## Props\n\n```typescript\ninterface ChatWidgetProps {\n  /** Your backend chat endpoint (e.g., \"/api/ai/chat\") */\n  endpoint: string;\n\n  /** User context for tenant isolation */\n  userContext: {\n    userId: string;\n    orgId: string;\n    role: string;\n  };\n\n  /** Widget title (default: \"AI Assistant\") */\n  title?: string;\n\n  /** Input placeholder text */\n  placeholder?: string;\n\n  /** Custom CSS class for the container */\n  className?: string;\n\n  /** Custom headers for API requests */\n  headers?: Record<string, string>;\n}\n```\n\n## Backend Requirement\n\nThis widget requires a backend endpoint powered by `@databridgeai/connector`:\n\n```typescript\n// Your Express backend\nimport { initExecutorAgent } from '@databridgeai/connector';\n\nconst agent = await initExecutorAgent({\n  apiKey: process.env.DATABRIDGE_API_KEY!,\n  db: pool,\n  exposeTables: ['users', 'orders', 'products'],\n  tenantField: 'organization_id',\n});\n\napp.post('/api/ai/chat', agent.middleware());\n```\n\n## Response Format\n\nThe widget expects this JSON response structure:\n\n```json\n{\n  \"message\": \"Here are the top 5 customers by revenue:\",\n  \"data\": {\n    \"rows\": [...],\n    \"columns\": [\"name\", \"revenue\", \"avatar_url\"]\n  },\n  \"visualization\": {\n    \"type\": \"bar\",\n    \"title\": \"Revenue by Customer\",\n    \"labels\": [\"Acme\", \"Globex\", \"Initech\"],\n    \"datasets\": [{ \"label\": \"Revenue\", \"data\": [50000, 42000, 38000] }]\n  }\n}\n```\n\n## Peer Dependencies\n\n- `react` >= 18\n- `react-dom` >= 18\n\n## Related Packages\n\n| Package | Purpose |\n|---------|---------|\n| `@databridgeai/connector` | Backend connector (required) |\n| `@databridgeai/toolkit` | Schema introspection & utilities |\n| `@databridgeai/core` | Shared types & validators |\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-75daa2d0439a31017a52837f01f2a883"}