{"id":51158484,"url":"https://github.com/ably/ably-vercel-ai-chattransport","last_synced_at":"2026-06-26T12:01:24.114Z","repository":{"id":363781073,"uuid":"1264095145","full_name":"ably/ably-vercel-ai-chattransport","owner":"ably","description":"A Next.js AI chat app that plugs Ably AI Transport into the Vercel AI SDK's `useChat` hook. The model's response streams over an Ably session instead of a single HTTP response, so it survives reconnects, follows the user across devices and tabs, and can be stopped from any of them.","archived":false,"fork":false,"pushed_at":"2026-06-10T11:11:00.000Z","size":3963,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T11:11:23.660Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ably.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-09T14:55:19.000Z","updated_at":"2026-06-10T09:29:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ably/ably-vercel-ai-chattransport","commit_stats":null,"previous_names":["ably/ably-vercel-ai-chattransport"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ably/ably-vercel-ai-chattransport","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably%2Fably-vercel-ai-chattransport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably%2Fably-vercel-ai-chattransport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably%2Fably-vercel-ai-chattransport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably%2Fably-vercel-ai-chattransport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ably","download_url":"https://codeload.github.com/ably/ably-vercel-ai-chattransport/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ably%2Fably-vercel-ai-chattransport/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34815669,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-26T02:00:06.560Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-26T12:01:23.428Z","updated_at":"2026-06-26T12:01:24.108Z","avatar_url":"https://github.com/ably.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\nname: Ably Chat Transport for the Vercel AI SDK\nslug: ably-vercel-ai-chattransport\npublisher: Ably\ndescription: An AI chat app that routes Vercel AI SDK useChat traffic over Ably AI Transport for resumable, multi-device realtime streaming.\nframework:\n  - Next.js\ntype:\n  - AI\n  - Realtime Apps\n  - Starter\ncss:\n  - Tailwind\ngithubUrl: https://github.com/ably/ably-vercel-ai-chattransport\ndemoUrl: https://ably-vercel-ai-chattransport.vercel.app\nrelatedTemplates:\n  - nextjs-ai-chatbot\n  - ably-nextjs-starter-kit\ndeployUrl: https://vercel.com/new/clone?repository-url=https://github.com/ably/ably-vercel-ai-chattransport\u0026project-name=ably-vercel-ai-chattransport\u0026repository-name=ably-vercel-ai-chattransport\u0026env=ABLY_API_KEY,ANTHROPIC_API_KEY\u0026envDescription=An%20Ably%20API%20key%20for%20realtime%20transport%20and%20an%20AI%20provider%20key\u0026envLink=https://github.com/ably/ably-vercel-ai-chattransport/blob/main/.env.example\n---\n\n# Ably Chat Transport for the Vercel AI SDK\n\n![Ably Chat Transport for the Vercel AI SDK](media/hero.png)\n\nA Next.js AI chat app that plugs [Ably AI Transport](https://ably.com/docs/ai-transport) into the [Vercel AI SDK](https://ai-sdk.dev)'s [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook. The model's response streams over an Ably session instead of a single HTTP response, so it survives reconnects, follows the user across devices and tabs, and can be stopped from any of them.\n\nIt demonstrates server-side tools, client-side tools (browser geolocation), approval-gated tools, multi-client and multi-user sync, edit/regenerate branching, mid-stream cancellation, and a live debug pane showing the raw Ably messages.\n\n![Demo screenshot showing screen layout](media/demo-screenshot.png)\n\n## How it works\n\nAbly AI Transport is a [durable session layer](https://ably.com/docs/ai-transport/why) for AI apps. Model tokens stream over an Ably session rather than one HTTP request, so a conversation outlives the connection that started it. This enables:\n\n- **Resumable streaming.** Tokens publish to an Ably channel, so a client that reconnects rejoins the live stream and recovers anything it missed.\n- **Cross-device and multi-tab continuity.** The session is open to every client on the channel, so the same conversation stays in sync across every surface at once.\n- **Shared control.** Any participant can publish to the session, so a Stop button on one device cancels a turn that began on another.\n- **Tools and human-in-the-loop.** Server tools, browser tools, and approval-gated tools run through the same session, alongside edit and regenerate branching.\n\nIn this app the user sends a chat prompt from the browser, the `/api/chat` route runs the model with the AI SDK's `streamText`, and transport pipes the response back over Ably. The client receives it through the AI Transport SDK's `useChat` transport.\n\nEach fresh browser visit opens a new channel; append `?channel=\u003cname\u003e` to pin a specific one, or click **open in new tab** in the header to join the same channel as a second client.\n\n![Screenshot showing location of \"open in new tab\" button in top right of chat UI](media/open-in-new-tab-highlight.png)\n\nThe right-hand window shows the messages being sent over the Ably channel. This is additional information to help you understand how the transport is working. You can find full details of the protocol in the [Ably AI Transport docs](https://ably.com/docs/ai-transport).\n\n## How to use\n\n### Requirements\n\n- A free [Ably API key](https://ably.com/accounts)\n- The _Message annotations, updates, deletes, and appends_ channel rule enabled on your namespace (see [the Ably docs](https://ably.com/docs/ai-transport/getting-started/channel-rules))\n- One AI provider key: Anthropic, OpenAI, or a Vercel AI Gateway key\n\n### One-click deploy\n\nDeploy with [Vercel](https://vercel.com). You'll be prompted for `ABLY_API_KEY` and `ANTHROPIC_API_KEY`:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/ably/ably-vercel-ai-chattransport\u0026project-name=ably-vercel-ai-chattransport\u0026repository-name=ably-vercel-ai-chattransport\u0026env=ABLY_API_KEY,ANTHROPIC_API_KEY)\n\n### Run locally\n\n#### Prerequisites\n\n- Node.js \u003e= 20\n\n#### Setup\n\n```bash\n# Install dependencies\nnpm install\n\n# Configure environment\ncp .env.example .env.local\n# then set ABLY_API_KEY + one AI provider key\n\n# Run the dev server\nnpm run dev\n```\n\nOpen \u003chttp://localhost:3000\u003e. \n\n## Authentication\n\nThe server signs a short-lived JWT for the client from the `ABLY_API_KEY`. The token is scoped to the connecting client's `clientId` and to the channel namespace (`\u003cnamespace\u003e*`, default `ai:*`). \n\nThe key reaches the server only through the `ABLY_API_KEY` environment variable. Set it in `.env.local` locally, or through the Vercel deploy prompt (`\u0026env=ABLY_API_KEY` on the deploy URL). \n\n## Environment variables\n\n| Variable           | Required | Description                                                                 |\n| ------------------ | -------- | --------------------------------------------------------------------------- |\n| `ABLY_API_KEY`     | Yes      | [Ably API key](https://ably.com/accounts). Used server-side to sign client JWTs and publish messages. |\n| `ANTHROPIC_API_KEY`| One of   | Anthropic key. Provider priority: Anthropic \u003e AI Gateway \u003e OpenAI.          |\n| `AI_GATEWAY_API_KEY` | One of | Vercel AI Gateway key.                                                      |\n| `OPENAI_API_KEY`   | One of   | OpenAI (or OpenAI-compatible) key.                                          |\n| `NEXT_PUBLIC_ABLY_CHANNEL_NAMESPACE` | No | Channel namespace for AI Transport sessions (default `ai:`). The namespace must have a [channel rule](https://ably.com/docs/ai-transport/getting-started/channel-rules) with \"Message annotations, updates, deletes, and appends\" enabled. |\n\nModel name and endpoint overrides (`ANTHROPIC_MODEL`, `AI_GATEWAY_MODEL`, `OPENAI_MODEL`, `OPENAI_BASE_URL`) are optional. See [`.env.example`](./.env.example) for the full list and defaults.\n\n## Contributing\n\nWant to help contributing to this project? Have a look at our [contributing guide](CONTRIBUTING.md)!\n\n## Learn more\n\n- [Ably AI Transport docs](https://ably.com/docs/ai-transport)\n- [Ably AI Transport SDK](https://github.com/ably/ably-ai-transport-js)\n- [Vercel AI SDK docs](https://ai-sdk.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably%2Fably-vercel-ai-chattransport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fably%2Fably-vercel-ai-chattransport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fably%2Fably-vercel-ai-chattransport/lists"}