{
  "markdown": "# Handset UI\n\n**Texting inside your product, in an afternoon.**\n\nOpen-source React components for embedded messaging, built on the\n[Handset API](https://handset.dev). Distributed the shadcn way: the CLI copies\nthe source into your repo, styled with your Tailwind tokens, yours to change.\n\n```bash\n# 1. Point the shadcn CLI at the Handset registry\nnpx shadcn@latest registry add @handset=https://ui.handset.dev/r/{name}.json\n\n# 2. Install a complete texting surface + the server proxy route\nnpx shadcn@latest add @handset/messaging @handset/next-routes\n```\n\nSet `HANDSET_API_KEY` in your env, wire `resolveTenantId()` in the generated\nroute to your session, and render it:\n\n```tsx\nimport { HandsetProvider } from \"@handset/react\";\nimport { Messaging } from \"@/components/handset/messaging\";\n\nexport default function MessagesPage() {\n  return (\n    <HandsetProvider>\n      <div className=\"h-[600px]\">\n        <Messaging />\n      </div>\n    </HandsetProvider>\n  );\n}\n```\n\n## What's in the registry\n\n| Item | What it is |\n| --- | --- |\n| `@handset/messaging` | Two-pane texting surface — inbox + thread, responsive to mobile |\n| `@handset/inbox` | Conversation list: previews, relative times, STOP badges, infinite scroll |\n| `@handset/thread` | Message history: delivery states, opt-out handling, wired composer |\n| `@handset/composer` | Draft box with live SMS segment counting and unicode detection |\n| `@handset/next-routes` | Next.js proxy route — your API key never reaches the browser |\n\n## Architecture\n\nTwo layers, like shadcn-on-Radix:\n\n- **[`@handset/react`](packages/react)** (npm, versioned) — headless hooks:\n  `useConversations`, `useThread`, `useComposer`, plus segment math and a tiny\n  client. Logic we maintain; bring your own UI if you prefer.\n- **The registry** ([`apps/www/registry`](apps/www/registry)) — the visual\n  components, copied into your project as source.\n\nComponents never hold API keys. They call proxy routes in **your** backend\n(added by `@handset/next-routes`); your server holds the Handset key and your\nexisting session auth decides which tenant each signed-in user sees. The\nHandset API handles the rest — numbers, delivery, threading, 10DLC compliance,\nSTOP/HELP.\n\n## Development\n\n```bash\npnpm install\npnpm --filter @handset/react build   # hooks package\npnpm dev                             # docs site + live demo at localhost:3000\npnpm registry:build                  # compile registry.json → public/r/*.json\n```\n\nThe docs site serves a mock Handset API (`apps/www/app/api/handset`) so the\ndemo works with zero setup.\n\n## Requirements\n\n- React 18+ (components target React 19 / Tailwind v4 / shadcn CLI ≥ 3)\n- A [Handset](https://handset.dev) account for real traffic — the demo runs on\n  mock data without one\n\n## Roadmap\n\nSee [ROADMAP.md](ROADMAP.md) — shipped components, what's next (call\nsummaries, MMS attachments, more framework proxies), and non-goals. Issues\nwith real use cases move items up the list.\n\n## License\n\n[MIT](LICENSE) © Handset HQ, Inc.\n",
  "bytes": 3001,
  "sha": "d9f4940deb9e9d6598ae7442fc9b545c7fa02555aeddabf6763dcd4923374d8a",
  "repo_slug": "handset-hq/handset-ui",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_handset_hq_handset_65a97c7f/readme"
}