<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Ably: Serious, serverless realtime infrastructure - Medium]]></title>
        <description><![CDATA[Ably is a realtime data stream platform that makes it easy for developers to add reliable realtime experiences to their applications - Medium]]></description>
        <link>https://medium.com/ably-realtime?source=rss----63d285882655---4</link>
        <image>
            <url>https://cdn-images-1.medium.com/proxy/1*TGH72Nnw24QL3iV9IOm4VA.png</url>
            <title>Ably: Serious, serverless realtime infrastructure - Medium</title>
            <link>https://medium.com/ably-realtime?source=rss----63d285882655---4</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Tue, 10 Nov 2026 05:22:49 GMT</lastBuildDate>
        <atom:link href="https://medium.com/feed/ably-realtime" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com" rel="hub"/>
        <item>
            <title><![CDATA[Live chat: Should you build or buy?]]></title>
            <link>https://medium.com/ably-realtime/live-chat-should-you-build-or-buy-847452e1d63e?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/847452e1d63e</guid>
            <category><![CDATA[messaging]]></category>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[live-chat]]></category>
            <category><![CDATA[build-vs-buy]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Wed, 25 Feb 2026 11:21:01 GMT</pubDate>
            <atom:updated>2026-02-25T11:21:01.008Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*kiOxOQu1AhnVnNh_" /></figure><p>Deciding between building or buying a live chat solution? This post helps you evaluate whether to build in-house, adopt a Chat-as-a-Service (CaaS), or use a realtime platform with a chat SDK like <a href="https://ably.com/chat">Ably Chat</a>. It covers pros and cons of each approach across speed, control, cost, and scalability.</p><p>Live chat has evolved from a nice-to-have feature to an essential component for customer service, user engagement, and community interaction across gaming, SaaS, social networks, and live-streaming apps. As realtime communication becomes increasingly integral, it touches nearly every layer of your stack, from low-latency message delivery and message ordering to presence indicators, moderation, and scaling at global levels.</p><p>In fact, the importance of live chat cannot be overstated, with <a href="https://kayako.com/live-chat-software/statistics/">studies showing</a>:</p><ul><li><strong>41%</strong> of customers prefer live chat over phone support.</li><li><strong>52%</strong> of customers would buy again from a company that offers live chat.</li><li><strong>79%</strong> of businesses report increased customer loyalty and sales after implementing live chat.</li></ul><p>But with these opportunities comes complexity. Building chat isn’t “just another feature” — it’s a strategic decision that affects your app’s infrastructure, user experience, and long-term scalability. That’s why choosing the right architecture upfront is critical.</p><h3>The Three Ways to Implement Chat</h3><p>When choosing the right approach to chat, there are three common routes, each with its advantages and trade-offs:</p><ol><li>Build your own chat backend from scratch</li><li>Use a chat SDK or Chat-as-a-Service (CaaS) provider</li><li>Leverage a realtime platform with a purpose-built chat SDK (like Ably Chat)</li></ol><blockquote>Want a deeper look at the technical architecture behind realtime chat? Read our guide on <a href="https://ably.com/blog/chat-architecture-reliable-message-ordering#:~:text=Choosing%20the%20right%20protocol,realistic%20options%3A%20MQTT%20and%20WebSocket.">designing chat architecture for reliable message ordering</a>.</blockquote><h3>Building your own chat backend from scratch</h3><p>Building a live chat system from scratch gives you full control over every layer of the architecture. If your team has strong expertise in realtime and distributed systems, this might seem appealing. You get to tailor protocols, storage, and even the user experience (UX) to your exact needs.</p><p>However, this approach comes with significant challenges. The reality is that building and maintaining a custom solution is a complex and resource-intensive task. First their are the technology choices. Do you rely on a messaging protocol, such as <a href="https://ably.com/topic/websockets">WebSockets</a>, <a href="https://ably.com/blog/what-is-webrtc">WebRTC</a>, and <a href="https://ably.com/periodic-table-of-realtime/xmpp">XMPP</a> or, instead, pull in a realtime library such as <a href="https://ably.com/topic/socketio">Socket.IO</a>? Beyond the initial build, you’ll need to account for scaling globally, low latency delivery, message ordering, and uptime. Also, the deeper you go into realtime chat infrastructure, the more specialized the requirements become.</p><h3>The pros of building a live chat system from scratch</h3><p>The upsides of building your live chat system in-house mostly center on control and flexibility:</p><p><em>Already deep in the weeds of infrastructure? Our </em><a href="https://ably.com/blog/chat-app-architecture"><em>scalable chat app architecture guide</em></a><em> covers what to plan for from day one.</em></p><h3>The cons of building a live chat system from scratch</h3><p>While the advantages of building a live chat system from scratch are evident, there are some challenges to consider:</p><p><strong>Best for: Teams with dedicated infra/ops expertise, high custom requirements, and deep pockets.</strong></p><h3>Use a Chat-as-a-Service (CaaS)</h3><p>If speed is your priority, a chat SDK or CaaS (Chat-as-a-Service) platform can help you get up and running quickly. These platforms — like <a href="https://ably.com/compare/ably-vs-stream">Stream</a>, <a href="https://ably.com/compare/ably-vs-sendbird">Sendbird</a>, or <a href="https://ably.com/compare/ably-vs-twilio">Twilio</a><strong> — </strong>offer prebuilt components like messaging, presence, and reactions. They handle all the infrastructure, scaling, and operations.</p><p>However, the trade-off comes with a lack of flexibility. You’ll be limited by the platform’s constraints on custom chat logic, UI design, and integration options. This could be fine for basic needs but may fall short when you need more control over user experience or the ability to extend beyond chat.</p><h3>The pros of using a CaaS</h3><p>The advantages of using a CaaS are pretty straightforward:</p><ul><li><strong>Low maintenance and roadmap investment: </strong>The CaaS provider takes care of keeping the service online as well as delivering new functionality.</li><li><strong>Low maintenance and roadmap investment: </strong>The CaaS provider takes care of keeping the service online as well as delivering new functionality.</li></ul><h3>The cons of using a CaaS</h3><p>On the other hand, chat-as-a-service can be quite limiting.</p><p><strong>Best for: Teams needing chat-only functionality, with limited customization needs.</strong></p><h3>Use a Realtime Platform with a chat SDK (e.g., Ably Chat)</h3><p>There is a third option that strikes a balance between control and speed. By leveraging a realtime platform with a purpose-built chat SDK, you can tap into a provider’s realtime expertise and infrastructure, while still customizing the chat solution to fit your exact requirements.</p><p>A realtime platform like Ably, with its <a href="https://ably.com/docs/chat">Chat SDK</a>, offers the best of both worlds: it’s quick to implement while giving you ample flexibility to tailor the user experience.</p><h3>The pros of using a realtime platform</h3><p>This approach offers a balance of quick implementation and customization, making it ideal for teams that need both flexibility and efficiency.</p><ul><li><strong>Quick to implement with customization options: </strong>A realtime platform with a chat SDK lets you get your chat solution up and running quickly, while still allowing for extensive customization to meet your specific needs. You don’t have to sacrifice speed for flexibility.</li><li><strong>Global infrastructure for low latency and scalability: </strong>Backed by a global pub/sub infrastructure, this platform ensures low-latency messaging, seamless scalability, and reliable performance even as your app grows, allowing you to deliver a smooth real-time experience at any scale.</li><li><strong>Comprehensive chat features, including presence, reactions, and message history: </strong>The platform comes with essential chat features such as presence management, message history, typing indicators, and reactions, all pre-built for ease of use and enhanced user interaction.</li><li><strong>Supports a wide range of chat types: </strong>Whether you need 1:1 messaging, group chats, or even livestream-style communication, the platform’s flexible architecture supports various chat configurations, making it easy to tailor the experience for different use cases.</li><li><strong>Easy integration and built-in moderation tools: </strong>The platform integrates seamlessly with your existing tech stack and provides built-in tools for moderation and UI customizations, helping you enforce policies and design a chat interface that aligns with your brand and compliance requirements.</li><li><strong>Predictable pricing models to grow with your app: </strong>With usage-based or MAU pricing, the platform offers predictable costs that scale with your app, ensuring you can plan for growth without surprises.</li></ul><h3>Cons:</h3><p>While this solution offers flexibility, there are a few considerations to keep in mind.</p><ul><li><strong>Requires front-end UI development: </strong>Unlike some solutions with pre-built UIs, this platform requires you to design and develop the front-end chat interface, offering flexibility but requiring more time and resources to build and integrate.</li><li><strong>More setup compared to CaaS, but less infrastructure burden than self-building: </strong>Setting up the platform requires more effort than using a CaaS solution, but it’s far less complex than building everything from scratch. The platform takes care of the infrastructure, so you can focus on your app’s features instead of managing backend systems.</li></ul><p><strong>Best for: Teams looking for reliable realtime infrastructure with chat primitives, but without the burden of maintaining backend systems.</strong></p><h3>Requirements for a successful live chat</h3><p>Regardless of whether you build your own live chat app in house or you rely on a CaaS or realtime platform, there are certain foundational elements that you’ll need to deliver in order to create a successful experience.</p><p>WhatsApp and Facebook Messenger, amongst others, have set the bar for what end users expect from live chat. When building your live chat you’ll need to meet those expectations by delivering on these foundational features.</p><ul><li><strong>Low latency: </strong>Realtime chat sets a baseline of interactivity that can only be realized when there is minimal delay between a message being sent and then received by other participants. That depends on using low latency protocols, such as <a href="https://ably.com/topic/websockets">WebSockets</a>, and having a global network of servers that are geographically close to end users.</li><li><strong>Guaranteed delivery: </strong>Each message must get to its destination in the correct order and on time. Even at smaller scales, that requires significant engineering effort to deliver reliably and without the possibility of confusion caused by missed, duplicated, or unexpected messages.</li><li><strong>Scalability: </strong>Increased uptake of your live chat should be reason to celebrate, rather than causing concern over how to serve the expanded user base. A <a href="https://ably.com/topic/pub-sub">Pub/Sub messaging architecture</a> separates communication and business logic, providing the basis you need to scale on demand.</li><li><strong>Elasticity:</strong> High performing, resource efficient, chat applications maintain a consistent user experience regardless of usage patterns and traffic spikes. They automatically react to changes in demand, elastically scaling to handle unpredictable and fluctuating numbers of concurrent users.</li><li><strong>Key features: </strong>To meet user expectations for live chat, you’ll need basic features like authentication, allowing users to log in and assume roles (e.g., seller, buyer). Users will also expect easy access to contacts and message history for ongoing conversations. Beyond that, enabling message editing, deletion, and user tagging is essential. Integrating native notifications ensures participants stay informed, even when not actively engaged in the chat. For more on the features needed for live chat, see our <a href="https://ably.com/blog/live-chat-features">ultimate list</a> (complete with examples).</li><li><strong>Integrations: </strong>Your live chat solution should seamlessly integrate with the other tools in your tech-stack, otherwise you risk substantial engineering requirements in order to integrate new services into your infrastructure.</li><li><strong>Data governance: </strong>How data is gathered, stored, processed, and disposed of. Data policies also set out who can access what kinds of data and what kinds of data are under governance.</li><li><strong>Chat moderation: </strong>The process of monitoring and controlling user-generated messages and content. To meet trust and safety commitments around chat, integrated moderation is essential to ensure all user-generated content is in compliance with your terms of use.</li><li><strong>Frontend UI: </strong>Ready-made UI design theme components, such as colors and fonts, which can be customized to suit your brand. This enables an easy and fast integration of standard chat features into new or existing client apps.</li></ul><h3>Chat Architecture Options Compared</h3><p>To help you make an informed decision, here’s a visual comparison of the trade-offs across the three approaches — self-build, chat SDK/CaaS, and realtime platforms with chat SDKs — covering factors like speed to market, feature flexibility, scalability, and cost.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*0pKFqRip75JoFMhA.png" /></figure><h3>Making the Decision: Which chat option best fits your team?</h3><p>Based on the comparison in the tables, here’s how to decide which option is best suited to your needs:</p><ul><li><strong>Self-Build</strong>: Best for teams with strong infrastructure expertise that require complete control over every aspect of their chat solution. This option is ideal for highly customized use cases, but it requires substantial resources, including dedicated engineering teams and significant ongoing maintenance.</li><li><strong>Chat SDK / CaaS</strong>: Ideal for teams with limited engineering resources that need to deploy a chat solution quickly. While this option offers great speed to market, you might sacrifice flexibility, and scalability can become an issue as your app grows. It’s best for companies looking for chat-only functionality without the need for advanced features like scalability or custom integrations.</li><li><strong>Realtime Platform with Chat SDK (e.g., Ably Chat):</strong> A great middle ground for teams that want fast setup, customization, and scalability without the burden of managing infrastructure. Ably’s Chat SDK allows you to quickly implement real-time messaging with rich features while having the flexibility to integrate with other real-time use cases. It’s ideal for teams that want a flexible, scalable, and reliable solution without the need for in-house infrastructure management.</li></ul><h3>FAQs</h3><ul><li><strong>What is the best way to build a chat app?</strong> It depends on your goals. Self-build offers control, Chat platforms offer speed, and realtime platforms like Ably and our Chat product offer both flexibility and reliability.</li><li><strong>When should I use a chat SDK?</strong> Use a Chat SDK when speed to market is more important than full customization.</li><li><strong>What’s the difference between a chat platform and a realtime platform?</strong> A chat platform offers prebuilt messaging features and is limited to chat use cases. A realtime platform like Ably provides the underlying infrastructure and chat primitives, giving more control and scalability — applicable to a wide range of realtime use cases.</li><li><strong>Is building a chat backend worth it?</strong> Only if you have the time, budget, and need for total control. Building a decent chat architecture from scratch is relatively easy, but building a rock-solid one is an ongoing investment. For most teams, it’s faster and cheaper to build on top of a platform that handles the hard parts of realtime delivery.</li></ul><h3>Get started with live chat from Ably</h3><p>Ably’s Chat SDK provides a flexible, feature-rich system for building 1:1, group chat, and even livestream-style interactions. It comes with built-in tools like presence management, message history, reactions, and typing indicators, all supported by Ably’s global pub/sub infrastructure. You also benefit from integrated moderation workflows (with tools like Hive), automatic scaling, and predictable pricing (either MAU or usage-based pricing), ensuring that costs remain manageable as your app grows. Start with a free developer account and begin building today.</p><p><em>Originally published at </em><a href="https://ably.com/blog/live-chat-should-you-build-or-buy"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=847452e1d63e" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/live-chat-should-you-build-or-buy-847452e1d63e">Live chat: Should you build or buy?</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Scalable chat app architecture: How to get it right the first time]]></title>
            <link>https://medium.com/ably-realtime/scalable-chat-app-architecture-how-to-get-it-right-the-first-time-11afceccdde2?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/11afceccdde2</guid>
            <category><![CDATA[chat]]></category>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[messaging]]></category>
            <category><![CDATA[realtime]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Tue, 24 Feb 2026 11:21:01 GMT</pubDate>
            <atom:updated>2026-02-24T11:21:00.903Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*aTs9gvtpo9pBsyFf" /></figure><blockquote><em>Designing a scalable chat app architecture? Learn why low latency, fault tolerance, message integrity, and global reach are non-negotiable. We explain the core components (e.g. event manager, presence, transport), the trade-offs of protocols, and how to choose between building your own infrastructure or leveraging a realtime platform like </em><a href="https://ably.com/chat"><em>Ably Chat</em></a><em>.</em></blockquote><p>Live chat is everywhere — from customer support to in-game banter to collaborative workspaces.</p><p>Since launching <a href="https://ably.com/chat">Ably Chat</a><em> — </em>our fully managed backend for large-scale messaging — we’ve had a front-row seat to the architectural mistakes teams most regret when traffic jumps from thousands to millions of messages. One-off errors, delayed messages, and infrastructure meltdowns are far too common, especially when chat moves from a nice-to-have feature to mission-critical functionality. And, when there’s an outage, it <a href="https://www.independent.co.uk/tech/slack-down-not-working-outage-b2340444.html">becomes headline news</a>.</p><p>It’s not just hypothetical. Slack alone processes more than <a href="https://talkingpointz.com/what-stewart-said/">8.5 billion messages each week</a>, and every single one needs to be routed correctly, arrive in the right order, and show up instantly.</p><p>Getting this right requires more than just a realtime messaging API or a couple of WebSocket endpoints. It takes an architecture designed from the ground up to handle scale, preserve message integrity, and deliver a seamless user experience under pressure.</p><p>In this post, we’ll walk through the key architectural components that enable scalable, feature-rich chat — from transport protocols and state management to ordering guarantees and elasticity.</p><h3>What is chat app architecture and why is it important?</h3><p>To people using chat, the entire experience seems to be contained in the app itself. But the chat client that lives on the user’s laptop or mobile device is just the tip of a much larger network of components. For example, the presence service monitors which users are currently connected and how. Another service will look after logging the chat history to a database, while yet another handles searching that chat history.</p><p>What job each component does and how those components work together is the chat app architecture. The design of that architecture affects just about everything that the user experiences. Perhaps most importantly, though, it dictates how reliable and how scalable the chat application is.</p><h3>Key considerations for chat app architecture</h3><p>As the choices you make will have a long lasting and wide ranging impact, it’s important to look at the specific challenges you’ll face when designing your chat app’s architecture. While this isn’t an exhaustive list, it does focus on the considerations most important for a chat application.</p><h3>Ability to scale</h3><p>Unlike email or even SMS, chat is an almost exclusively realtime medium. That sets a high bar for user expectations. Demand ebbs and flows depending on events, such as the launch of a new product, and also according to the routines of your user base.</p><p>Combined, that means your chat app architecture must be able to respond quickly to changes in demand. Delayed or missing messages, for example, are a consequence of an overloaded architecture and they are a sure way to dent user confidence. But it would be wasteful and costly to run your application on huge servers just in case demand spikes. Instead, you need to build your architecture so that it can scale up and down as needed and that requires two related architectural choices:</p><ul><li><strong>Microservices architecture: </strong>Break your application into multiple small components that each does one thing well and that can operate independently of the others.</li><li><strong>Horizontal scaling: </strong>Rather than scaling up with ever larger machines, build your application in such a way that multiple instances of each service can run in parallel. That allows you to add more instances when demand is high and close unneeded instances when demand is low.</li></ul><h3>Fault tolerance</h3><p>Lack of capacity is just one reason for application failure. To your end users, though, whether message delivery is failing because your chat backend is over capacity or because it has gone offline altogether, it looks just the same. Further to scale, there are other situations to consider. What if a DDOS attack severely degrades connectivity to the data center, for example? Inevitably, some form of outage will degrade your app’s performance or take it offline entirely. And <a href="https://www.statista.com/statistics/753938/worldwide-enterprise-server-hourly-downtime-cost/">downtime is costly</a>.</p><p>Creating a horizontally scalable microservices architecture can feed into improving your application’s ability to withstand faults. At the heart of enabling that horizontal scalability is the idea that a single service can exist across multiple servers or virtual machines (VM). It’s not a huge leap to use that as a way to overcome many causes of downtime. If a single VM suffers a failure and goes offline, others running that same service can pick up the workload. But what if there’s a wider issue that means multiple other instances of that service are also unavailable?</p><p>According to <a href="https://uptimeinstitute.com/about-ui/press-releases/2022-outage-analysis-finds-downtime-costs-and-consequences-worsening">research by the Uptime Institute</a>, 43% of significant outages are caused by power outages. Perhaps ironically, with a majority of those due to uninterruptible power supply (UPS) faults. That could mean that an entire data center or cloud region is unavailable at the same time. In such cases, having those services also running in separate cloud regions or datacenters enables you to route around infrastructure outages.</p><h3>Latency and global reach</h3><p>Delivering a realtime experience becomes harder as your user base becomes more geographically dispersed and you look to expand your chat app globally. The further someone is from your servers, the greater the latency they’ll experience.</p><p>Latency levels at 100ms is the point at which a software experience feels instantaneous. Beyond that, users notice the delay. <a href="https://www.verizon.com/business/terms/latency/">According to Verizon</a>, the latency between the UK and Sydney, Australia is around 243 ms. And that’s before any further delay caused by processing on your servers or imperfect network conditions.</p><p>The good news is that some of the architectural work necessary to enable fault tolerance and horizontal scalability can also set you up for improving latency. In particular, the ability to run multiple copies of the same service lets them be deployed in different geographical locations. However, the bad news is that the work to actively manage a global network of services and routing traffic between them appropriately is substantially more complex than just having one or two failover regions.</p><p>That’s where a platform like Ably comes in. With our own global edge network, our realtime platform maintains reliable data synchronization, at scale, between globally distributed chat clients and your chat backend.</p><h3>Message synchronization and queuing</h3><p>Today, it’s a basic expectation that messages sent while participants are offline are waiting for them when they log on.</p><p>To solve this challenge — queuing messages for later delivery and also ensuring all of a user’s messages are available wherever they log-in — requires solutions, such as:</p><ul><li>Logging each user’s stream of messages and then replaying them when their device connects.</li><li>Delivering each message to that user’s chat history in the backend and then sending the client the history when it reconnects.</li></ul><p>That makes a database system, one that scales just as well as the rest of your chat app, a core part of your architecture.</p><h3>Transport mode</h3><p>The protocol you choose for transporting data between chat client and server will affect the performance and shape of your backend architecture. Each protocol has its pros and cons. For example, choose WebRTC and, under perfect network conditions, communication could be marginally faster than other choices because it relies on UDP. However, as with all UDP traffic, WebRTC offers no delivery or ordering guarantees. As a result, you’ll need to build your own logic to confirm message delivery and enforce message order, as well as to handle retries where needed.</p><p><a href="https://ably.com/topic/websockets">WebSocket</a>, on the other hand, uses TCP at the transport layer. That increases the chance that your messages will be delivered reliably. However, WebSocket is not a silver bullet because it doesn’t provide its own mechanism to automatically recover when connections are terminated.</p><p>In circumstances where network conditions are likely to be poor, MQTT offers three levels of message delivery guarantee, with each one adding more protocol overhead and, so, latency:</p><h3>Implementing push notifications</h3><p>Just as your chat users will want to catch up on what they’ve missed, there are some messages that they’ll need to see at the moment they arrive. Mobile OS and web browser push notifications draw the user’s focus back to your chat app when, for example, they are tagged in a message or a keyword they follow is mentioned.</p><p>Your application will need a service that tracks which platform is used by each individual and triggers a notification on those services. Many engineering teams choose to work with an intermediary service, such as Ably, to simplify sending <a href="https://ably.com/push-notifications">push notifications</a>.</p><h3>The structure of chat architecture</h3><p>While the fundamentals of chat remain the same from one app to the next, use cases vary enormously. At one extreme was <a href="https://en.wikipedia.org/wiki/Yo_(app)">Yo</a>, a “chat” app that allowed people to do one thing: send the message “Yo” to other users. At the other end is <a href="https://en.wikipedia.org/wiki/WeChat">WeChat</a>, which has grown from instant messaging to now offering payments, social media, video calling, and even games.</p><p>Despite that variety, almost all commercial chat applications share a similar client-service architecture. The variety comes in precisely what happens on both the client and the server sides. For example, while pretty much all modern chat platforms will have a service to store messages, some might use a single relational database, while others use a column store such as Casandra for its ability to model data as a time series, or even something like Apache Kafka. Speaking of which, how messages move around the various services in the backend varies greatly. Message streaming tools, such as Apache Kafka and Ably, distribute messages according to their content, source, and destination. That results in an <a href="https://ably.com/blog/introduction-event-driven-architecture">event driven architecture</a> where the message effectively travels from one service to the next.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7teR86gIAbjnxrlE.png" /></figure><h3>7 core components of chat app architecture</h3><p>Just as the client-server architecture remains a fundamental pattern, the core components in a chat application’s architecture remain largely unchanged even as the app’s audience grows and its functionality becomes more ambitious with features like video calling, file transfers, and integrations with third-party services..</p><p>And, although they might come in different guises and combinations, such as a home built auth server vs Okta or an append-only data store vs a document database, there are seven components that make-up a typical chat application architecture. Of course, in a distributed microservices architecture each of these components would themselves be split into many smaller parts but the basic pattern remains the same.</p><h3>1. Application server</h3><p>This is the heart of your architecture where the logic specific to your application executes. That could be running code directly on the server. For example, parsing and acting on slash commands, such as Slack’s <em>/search</em> command, or triggering other system functionality such as retrieving an image from the media store.</p><h3>2. Load balancer</h3><p>Directing inbound traffic to the right place can quickly become complex. Whether it’s routing to the geographically closest server or distributing load amongst multiple instances in the same data center, your load balancer spreads traffic evenly across your available resources so that you can deliver a consistent service.</p><h3>3. Streaming event manager</h3><p>Arguably the hardest part to get right, the server-side of your chat application needs to make sure that messages flow reliably and quickly from one service to the next and then to the destination clients. For example, after arriving at the back end, a new message might first go to the logging service and then onto the data store. From there, a command parsing service might look for and act on user commands, such as searching message history or setting reminders. In practice, a message will pass through multiple services before the system then pushes it out to the relevant subscribers.</p><p>It’s a substantial job to coordinate each movement so that messages arrive at and depart from services as efficiently as possible. Whether you build it in-house or use a realtime platform-as-a-service provider such as Ably, the event manager is equivalent to your chat app’s blood system. Constantly moving, carrying data to the right place, powered by instructions from its “heart” in the form of the application server.</p><h3>4. User authentication and user manager</h3><p><a href="https://www.verizon.com/business/resources/reports/dbir/">Research by Verizon</a> shows that 82% of data breaches result from people mishandling passwords. <a href="https://uk.newsroom.ibm.com/24-07-2023-IBM-Security-Report-Cost-of-a-Data-Breach-for-UK-Businesses-Averages-3-4m">Data from IBM</a>, meanwhile, shows that the average cost of a data breach is $3.86 million. The increasingly central role that chat plays in customer service, replacing email in work environments, and other commercially sensitive situations, your chat’s user authentication plays a key role in guarding against potentially bad actors.</p><p>The user authentication component of a chat application provides the initial challenge when a user makes their first connection in a particular session and then continues to verify that each subsequent action is authorized. Depending on your particular security needs, that authentication component calls out to a third-party service such as <a href="https://auth0.com/">Auth0</a> or a library that you implement locally, such as <a href="https://www.passportjs.org/">PassportJS</a>. You’ll also need to judge the right trade-off between how certain you want to be of someone’s identity versus reducing user experience friction. For example, multi-factor authentication using a hardware token will give you greater confidence in someone’s identity but will make it harder for users to register with and log in to your chat application.</p><p>Once the authentication component verifies the user’s identity, another architectural choice is between token or session based authentication. With token authentication, the auth component will create a token, often in the form of a <a href="https://jwt.io/">JSON Web Token</a>, that is then stored in the header of each request between client and server. By verifying the token, the server assigns each request to the relevant logged-in user. Session based auth, on the other hand, sets a session ID cookie on the client side and checks that against each request. There are <a href="https://www.authgear.com/post/session-vs-token-authentication">pros and cons</a> to both methods.</p><p>The auth component is also responsible for assigning the permissions each user has, along with other profile information. Typically, the auth component will retrieve those details from the chat applications data store. Permissions include the channels to which they’re subscribed and any special roles they play such as moderator.</p><h3>5. Presence</h3><p>At scale, managing user presence is a non-trivial problem. A dedicated presence service keeps track of whether each user is connected, which might not always be clear where someone is logged-in on multiple devices, and how. For example, showing that someone is connected using a mobile device helps set expectations around their ability to respond in detail, whether they’re likely to make autocorrect errors, and so on. Other status information, such as someone being “away” or “busy”, also helps to replicate some of the context that is lost from real world interactions.</p><p>Whether it’s original video or meme GIFs, rich media is a core part of many chat experiences. However, storing and transporting those media files can be both costly and hard to scale. One way to reduce costs and improve performance is to maintain a central media store within your own back-end architecture and then hand delivery to a content distribution network (CDN).</p><h3>7. Database</h3><p>More than likely, the chat backend will have several data stores to handle different types of data. But there needs to be at least one way of storing and querying data such as the chat messages themselves, user status, status messages, and so on.</p><h3>Options for delivering realtime chat applications</h3><p>Whether you’re integrating chat into an existing product or looking to launch a new dedicated chat service, you’re almost spoilt for choice when it comes to choosing how to build your server-side application architecture. Let’s look at the three main options available:</p><ul><li><strong>Build it all in-house: </strong>Building everything from scratch using your own engineering team can seem like a tempting option. On paper, it looks like you get full control of the experience you deliver to users and there’s less to pay out in software licensing fees. Seen from a different angle, though, that freedom comes with the responsibility to plan, build, and maintain everything in-house.</li><li><strong>Integrate proven third-party tools: </strong>Alternatively, you can retain control without dividing your team’s attention between the competing and varied needs of each specialized part of your chat app’s architecture. Employing a CDN for rich media and a realtime PaaS, such as our own, are two ways you can hand off some of the most challenging aspects of delivering chat.</li><li><strong>Use a white-label chat platform: </strong>If your chat needs are relatively straightforward and you are happy to trust the future direction of your functionality to another company’s product team, you can integrate a white-label chat platform into your existing application. This option reduces your engineering costs at the expense of flexibility and ongoing licensing costs.</li></ul><p>When you come to choose between these options, consider how well each one can help you deliver on the key considerations we looked at earlier, such as low latency delivery, global reach, high uptime, and rapid scaling. <a href="https://ably.com/blog/live-chat-should-you-build-or-buy">Check out our blog for more on how to choose the right solution for your needs.</a></p><h3>Ably’s approach to chat app architecture</h3><p>At Ably, we understand the importance and challenges of delivering scalable, reliable, feature-rich chat applications — and companies like <a href="https://ably.com/case-studies/hubspot">HubSpot</a> use Ably to serve hundreds of thousands of chat sessions every month.</p><p>Whether it’s for customer support, connecting users of a multi-side marketplace, engaging gamers, or delivering on unique requirements such as HIPAA compliant chat, Ably handles the hard infrastructure while giving you the flexibility to tailor the solution you need, including:</p><ul><li><strong>Globally distributed network:</strong> Seven core routing data centers and 385 edge accelerations points of presence provide worldwide low latency reach.</li><li><strong>Pub-sub architecture: </strong>Ideally suited to chat applications, our pub-sub implementation guarantees precisely once message delivery in order.</li><li><strong>Rich integrations:</strong> Work with your existing tools and platforms through webhooks, APIs, and language-specific SDKs.</li></ul><h3>Build scalable chat applications with Ably</h3><p>Building your chat application with Ably means benefiting from global infrastructure, ongoing improvements from a specialist realtime engineering team, and the freedom to build the right functionality for your audience.</p><p>Get started in just a few minutes:</p><ol><li><a href="https://ably.com/sign-up">Sign-up</a> for your free Ably account.</li><li><a href="https://ably.com/resources/ebooks/livestream-chat-at-scale">Follow our tutorial</a> for building a scalable chat app.</li><li>Then go onto learn more with our <a href="https://ably.com/reference-guide-chat#resources">clear tutorials</a> on how to build rich chat functionality.</li></ol><h3>FAQs</h3><p><strong>How do you ensure low latency and global reach in a chat application architecture?</strong><br>You ensure low latency by deploying edge servers or Points of Presence (PoPs) close to your users, selecting efficient transports (e.g. WebSockets or MQTT where appropriate), and using global load balancing. These reduce round-trip times and help preserve performance even when users are spread across regions.</p><p><strong>What are the essential core components of a chat app architecture?</strong><br>Core components include an application server, user authentication and user manager, presence service, media store, streaming event manager, load balancer, and a reliable database. Together, these components enable features like message ordering, fault tolerance, scalability, and secure user identity.</p><p><strong>How do you maintain message integrity and ordering at scale?</strong><br>You use protocols and systems that guarantee delivery guarantees (exactly-once or at least-once), employ sequence identifiers or buffering, and ensure proper queuing and retry logic.</p><p><strong>What trade-offs are there between building your own architecture vs using a realtime PaaS like Ably?</strong><br>Building your own gives you full control over every component and customization, but it requires more engineering effort, longer development time, and larger maintenance burden. Using a realtime PaaS lets you offload much of the complexity (transport protocols, scaling, edge distribution, message ordering etc.), speeding time to market and improving reliability at scale.</p><p><strong>How do you manage faults, outages, and ensure reliability in chat systems?</strong><br>You design for fault tolerance via horizontal scaling, redundancy (multiple instances of each service), regionally distributed infrastructure, and fallback strategies. Also, using services that automatically reroute traffic or provide high availability helps maintain uptime in case of server, network, or data-center failures.</p><p><em>Originally published at </em><a href="https://ably.com/blog/chat-app-architecture"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=11afceccdde2" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/scalable-chat-app-architecture-how-to-get-it-right-the-first-time-11afceccdde2">Scalable chat app architecture: How to get it right the first time</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Building a realtime chat app with Next.js and Vercel]]></title>
            <link>https://medium.com/ably-realtime/building-a-realtime-chat-app-with-next-js-and-vercel-387732b0c368?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/387732b0c368</guid>
            <category><![CDATA[messaging]]></category>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[chat]]></category>
            <category><![CDATA[vercel]]></category>
            <category><![CDATA[ably]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Mon, 23 Feb 2026 11:21:00 GMT</pubDate>
            <atom:updated>2026-02-23T11:21:00.774Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PLF-TyOTLCN8tw1P" /></figure><p>This post will walk through the creation of a realtime chat application using <a href="https://ably.com/chat">Ably Chat</a> with Next.js and deploying it to Vercel.</p><p><strong>You’ll learn how to:</strong></p><ul><li>Create a brand new Next.js application</li><li>Adding realtime functionality with Ably</li><li>Create a Next.js Vercel Serverless API</li><li>Use React Hooks with Ably</li><li>Host your app on Vercel</li></ul><p>Check out a <a href="https://next-js-chat-app.vercel.app/">running version of the app</a> or <a href="https://github.com/ably-labs/NextJS-chat-app">fork the app on GitHub</a>.</p><h3>WebSockets in Vercel with Ably</h3><p>Vercel allows users to deploy <a href="https://vercel.com/docs/serverless-functions/introduction">Serverless Functions</a>, which are essentially just blocks of code that provide a response to an HTTP request. However, these functions have a maximum execution timeout, which means that it is not possible to maintain a WebSocket connection this way.</p><p>This is where Ably comes in. The client can connect to an <a href="https://ably.com/docs/chat/rooms">Ably Chat room</a> and send and receive messages on it to add realtime functionality to your app by managing your WebSocket connections for you.</p><p>We’ll start by going over how to build an app that uses realtime functionality.</p><blockquote><a href="https://ably.com/topic/websockets-javascript"><em>Take a look at some of the challenges of implementing a reliable and highly-performant client-side WebSocket solution for JavaScript apps.</em></a></blockquote><h3>What are we going to build?</h3><p>We’re building a realtime chat app that runs in the browser. It will be built upon the Next.js <a href="https://nextjs.org/docs/api-reference/create-next-app">create-next-app</a> template and contain a React component that uses Ably Chat SDK to send and receive messages. In this tutorial, we’re specifically using @ably/chat/react in Ably Chat SDK instead of the lower-level class API. Hooks let us confine all realtime logic to the browser (so it won&#39;t run in Next.js server components), automatically manage subscribe/cleanup lifecycles, and slot neatly into our React component tree on Vercel. We&#39;ll walk through integrating the SDK to build a UI for sending and receiving messages in realtime. We&#39;ll also write a Next.js serverless function that will be used to connect to the Ably Chat SDK.</p><p><strong>Try the live demo → </strong><a href="https://next-js-chat-app.vercel.app/"><strong>https://next-js-chat-app.vercel.app/</strong></a></p><h3>A bit about Ably Chat</h3><p>At its core, the <a href="https://ably.com/chat">Ably Chat SDK</a> is built on Ably’s globally-distributed, low-latency data stream network. Messages are exchanged through chat “rooms,” which wrap around Ably Channels to offer chat-specific functionality. When a user sends a message, it is published to the room, and all other members subscribed to the room immediately receive it. This pub/sub model ensures reliable, instant delivery between connected clients.</p><p>Traditionally you would publish and subscribe directly on raw channels, but in this tutorial we’re using Ably Chat SDK’s React Hooks to simplify everything. All of these hooks play well in your Client Components, automatically managing lifecycle and cleanup when components mount or unmount.</p><p>Beyond basic message exchange, <a href="https://ably.com/chat">Ably Chat</a> supports a wide range of chat features out of the box, including typing indicators, presence events, read receipts, message history, and even edit/delete support. Check out our <a href="http://ably.com/docs/chat/">docs</a> to learn more.</p><h3>1. Setting up dependencies</h3><p>To build this app, you’ll need:</p><p>Once you have your Ably account you’ll need an API key to authenticate with the Ably Service. To get an API key:</p><ol><li>Visit your <a href="https://ably.com/accounts">app dashboard</a> and click on <strong>Create New App</strong>.</li><li>Give the new app a name.</li><li>Copy the Private API key once the app has been created. Keep it safe! This is how you will authenticate with the Ably service.</li></ol><p>Vercel already provides the Next.js command line tools to help us. They don’t need to be installed on your system, as they’re executed using npx.</p><h3>2. Scaffolding the Next.js chat app</h3><p>Start building the chat application by using create-next-app to scaffold a new Next.js-based application. In your terminal, type:</p><pre>npx create-next-app@latest</pre><p>Answer the prompts as follows:</p><pre>What is your project named? nextjs-chat-app<br>Would you like to use TypeScript? No<br>Would you like to use ESLint? Yes<br>Would you like to use Tailwind CSS? No<br>Would you like to use `src/` directory? No<br>Would you like to use Turbopack for `next dev`? No<br>Would you like to use App Router? (recommended) Yes<br>Would you like to customize the default import alias? No<br>What import alias would you like configured? @/*</pre><p>After the prompts, create-next-app will create a folder with your project name and install the required dependencies. Change directories into your application directory:</p><pre>cd nextjs-chat-app</pre><p>Next, create a file called .env in the root of the directory. This is where we&#39;ll put the project&#39;s environment variables. Add your Ably API key to the .env file:</p><pre>ABLY_API_KEY=your-ably-api-key:goes-here</pre><p>Test that the application runs correctly by running the following command:</p><pre>npm run dev</pre><p>The Next.js dev server will spin up and you’ll see a default Next.js starter app. This is what we’ll build our chat app on top of.</p><h3>The realtime chat app architecture</h3><p>The topology of our Next.js app will look like this:</p><pre>─ .env<br>├─ .gitignore<br>├─ package-lock.json<br>├─ package.json<br>├─ README.md<br>|<br>├─── components<br>│    ├─ Chat.jsx<br>|    ├─ ChatBox.jsx<br>│    ├─ ChatBox.module.css<br>|<br>├─── app<br>│    ├─ globals.css<br>│    ├─ layout.js<br>│    ├─ page.js<br>│    │<br>│    └─── api<br>│         └─ route.js<br>│<br>└─── public</pre><ul><li>/app/page.js is the home page</li><li>/app/api/route.js is our Ably token authentication API</li><li>/components/Chat.jsx is the main chat host component</li><li>/components/ChatBox.jsx the component that contains the actual chat UI</li><li>/components/ChatBox.module.css contains the styles for the chat component</li></ul><p>Let’s walk through how this application is built.</p><h3>3. Authenticating an Ably client</h3><p>There are a number of ways to <a href="https://ably.com/docs/auth">authenticate an Ably client</a>. For our application, we’ll use <a href="https://ably.com/docs/auth/token">token authentication</a>. Token authentication uses a trusted device with an <a href="https://ably.com/docs/auth#api-key">API key</a>, in our case an API route that we’ll build using Next.js, to issue time-limited tokens to untrusted clients.</p><p>In version 15, Next.js introduced the new App Router. Built on <a href="https://nextjs.org/docs/app/building-your-application/rendering/server-components">React Server Components</a> it supports shared layouts, nested routing, loading states, error handling, and more including API routes via its <a href="https://nextjs.org/docs/app/building-your-application/routing/route-handlers">Route Handler</a> feature. Let’s build that API route.</p><p>Start by installing the <a href="https://www.npmjs.com/package/ably/">Ably npm package</a> in the root of your new app:</p><pre>npm install ably<br>npm install @ably/chat</pre><p>Next, create a file called ./app/api/route.js. Add the following code:</p><pre>import Ably from &quot;ably&quot;;<br><br>// ensure Vercel doesn&#39;t cache the result of this route,<br>// as otherwise the token request data will eventually become outdated<br>// and we won&#39;t be able to authenticate on the client side<br>export const revalidate = 0;<br><br>export async function GET(request) {<br>  const client = new Ably.Rest(process.env.ABLY_API_KEY);<br>  const tokenRequestData = await client.auth.createTokenRequest({<br>    clientId: &quot;ably-chat-demo&quot;,<br>  });<br>  return Response.json(tokenRequestData);<br>}</pre><p>This function uses the Ably SDK to create a tokenRequest with your API key. The token will be used later — it allows you to keep your “real” API key safe while using it in the Next.js app. By default, this API is configured to be available on <a href="http://localhost:3000/api/">http://localhost:3000/api/</a>. We’re going to provide this URL to the Ably Chat SDK in our client to authenticate with Ably.</p><h3>Next.js server vs. client components</h3><p>Before we start creating pages in our application, it’s important to understand how Next.js renders content. The framework supports multiple rendering methods including server-side rendering (SSR), static-site generation (SSG), and client-side rendering (CSR). There are many pros and cons to each rendering method (too many to cover in this post), so if these concepts are new to you, Google’s <a href="https://web.dev/">web.dev</a> site has a very good introduction to <a href="https://web.dev/rendering-on-the-web/#server-side-rendering">rendering on the web</a> that can help you understand rendering options.</p><p>Next.js defaults to server-side rendering-meaning the page HTML is generated on the server for each request and sent to the browser. This means that by default when you create a new component in your React app, you are creating a <a href="https://nextjs.org/docs/app/building-your-application/rendering/server-components">Server Component</a>.</p><p>Server Components offer a lot of benefits, but one drawback is that they don’t have access to browser APIs. To allow you to create components that can access those APIs, Next.js also includes the ability to create <a href="https://nextjs.org/docs/app/building-your-application/rendering/client-components">Client Components</a>.</p><p>To indicate that you want a component to be a Client Component, you use React’s ‘use client’ directive at the top of your component. Doing this tells Next.js that it should render the component in the browser, not on the server.</p><p>Our chat UI ( components/Chat.jsx) needs to open a realtime WebSocket connection via the Ably SDK and run React hooks in the browser, so we simply add &#39;use client&#39;; at the top of that file. Next.js will then automatically exclude it from server renders - no lazy loading or dynamic imports required.</p><h3>4. Building the components</h3><p>In the root of your application, create a new components folder and within create a new React component file named Chat.jsx. Scaffold the initial component using the code below:</p><pre>&#39;use client&#39;;<br>import * as Ably from &#39;ably&#39;;<br>import { ChatClient, AllFeaturesEnabled } from &#39;@ably/chat&#39;;<br>import { ChatClientProvider, ChatRoomProvider } from &#39;@ably/chat/react&#39;;<br>import ChatBox from &#39;./ChatBox.jsx&#39;;<br><br>const roomOptions = {<br>  history: { limit: 50 },<br>  reactions: {}<br>};<br><br>export default function Chat() {<br>  const realtimeClient = new Ably.Realtime({ authUrl: &#39;/api&#39; });<br>  const chatClient = new ChatClient(realtimeClient);<br><br>  return (<br>    &lt;ChatClientProvider client={chatClient}&gt;<br>      &lt;ChatRoomProvider id=&quot;chat-demo&quot; options={roomOptions}&gt;<br>        &lt;ChatBox /&gt;<br>      &lt;/ChatRoomProvider&gt;<br>    &lt;/ChatClientProvider&gt;<br>  );<br>}</pre><p>Pages in Next.js are React components, so the app/page.js home page is the React component that contains the page layout.</p><p>Open page.js and replace the default scaffolded content with this markup:</p><pre>import Head from &#39;next/head&#39;;<br>import dynamic from &#39;next/dynamic&#39;;<br><br>const Chat = dynamic(() =&gt; import(&#39;../components/Chat&#39;), {<br>  ssr: false,<br>});<br><br>export default function Home() {<br>  return (<br>    &lt;div className=&quot;container&quot;&gt;<br>      &lt;Head&gt;<br>        &lt;title&gt;Realtime Chat App with Ably Chat, Next.js and Vercel&lt;/title&gt;<br>        &lt;link rel=&quot;icon&quot; href=&quot;https://static.ably.dev/motif-red.svg?nextjs-vercel&quot; type=&quot;image/svg+xml&quot; /&gt;<br>      &lt;/Head&gt;<br>      &lt;main&gt;<br>        &lt;h1 className=&quot;title&quot;&gt;Ably Chat Demo&lt;/h1&gt;<br>        &lt;Chat /&gt;<br>      &lt;/main&gt;<br>      &lt;footer&gt;<br>        Powered by &lt;a href=&quot;https://vercel.com&quot; target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;&gt;Vercel&lt;/a&gt; and &lt;a href=&quot;https://ably.com&quot; rel=&quot;noopener noreferrer&quot;&gt;Ably&lt;/a&gt;<br>        &lt;a href=&quot;https://github.com/ably-labs/NextJS-chat-app&quot; className=&quot;github-corner&quot; aria-label=&quot;View source on GitHub&quot;&gt;<br>          &lt;svg width=&quot;80&quot; height=&quot;80&quot; viewBox=&quot;0 0 250 250&quot; className=&quot;svg&quot; aria-hidden=&quot;true&quot;&gt;<br>            &lt;path d=&quot;M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z&quot;&gt;&lt;/path&gt;<br>            &lt;path d=&quot;M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2&quot; fill=&quot;currentColor&quot; className=&quot;octo-arm&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z&quot; fill=&quot;currentColor&quot; className=&quot;octo-body&quot;&gt;&lt;/path&gt;&lt;/svg&gt;<br>        &lt;/a&gt;<br>      &lt;/footer&gt;<br>    &lt;/div&gt;<br>  )<br>}</pre><p>Next, in the same app directory, locate the globals.css file and replace its contents with the <a href="https://github.com/ably-labs/NextJS-chat-app/blob/main/app/globals.css">basic CSS styles we&#39;ll use in our application</a> which you can find in the project&#39;s GitHub repository.</p><p>Run the app. You should see this:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FvANSGu7LiL9xb3I.png" /></figure><p>Run the app to validate everything is working properly. The Chat component is mounted and joined to a room, though you won’t see any visible UI yet. We’ll add the actual chat interface in the next section.</p><h3>5. Writing the chat component logic</h3><p>The chat app logic is contained inside a new ChatBox component. To build this, start by creating two new files in the components directory: ChatBox.jsx and ChatBox.module.css.</p><p>You can copy the styles for ChatBox.module.css from the<a href="https://github.com/ably-labs/NextJS-chat-app"> project&#39;s GitHub repository</a>. Next, open the ChatBox.jsx file and add the import statements we&#39;ll need at the top of the file:</p><pre>import React, { useEffect, useState, useRef } from &#39;react&#39;;<br>import { useMessages } from &#39;@ably/chat/react&#39;;<br>import styles from &#39;./ChatBox.module.css&#39;;</pre><h3>Initialize ChatBox</h3><p>Define the ChatBox component, and add variables to the function to store references to some of the HTML elements in the code.</p><pre>export default function ChatBox() {<br>  const inputBox = useRef(null);<br>  const messageEndRef = useRef(null);<br>}</pre><p>Set up the state properties used in the component:</p><pre>const [messageText, setMessageText] = useState(&#39;&#39;);<br>const [messages, setMessages] = useState([]);<br>const messageTextIsEmpty = messageText.trim().length === 0;</pre><ul><li>messageText will be bound to a textarea element where messages can be typed</li><li>receiveMessages stores the on-screen chat history</li><li>messageTextIsEmpty is used to disable the send button when the textarea is empty</li></ul><h3>Listen for and render incoming messages</h3><p>We’re using the useMessages hook from @ably/chat/react, which under the hood subscribes to the room&#39;s message stream and calls your callback for each new message. You don&#39;t need to manage subscribe/unsubscribe yourself - just pass a listener function into useMessages, and it will give you a send method plus realtime updates.</p><p>Add the following to ChatBox.jsx:</p><pre>const { send: sendMessage } = useMessages({<br>  listener: (payload) =&gt; {<br>    const newMessage = payload.message;<br>    setMessages((prevMessages) =&gt; {<br>      if (prevMessages.some((existingMessage) =&gt; existingMessage.isSameAs(newMessage))) {<br>        return prevMessages;<br>      }<br>      const index = prevMessages.findIndex((existingMessage) =&gt;<br>        existingMessage.after(newMessage)<br>      );<br>      const newMessages = [...prevMessages];<br>      if (index === -1) {<br>        newMessages.push(newMessage);<br>      } else {<br>        newMessages.splice(index, 0, newMessage);<br>      }<br>      return newMessages;<br>    });<br>  },<br>});</pre><ul><li><strong>Listener callback</strong>: Runs for every incoming message payload, extracting the structured message object.</li><li><strong>Deduplication</strong>: We check isSameAs(newMessage) to avoid showing the same message twice.</li><li><strong>Ordered insertion</strong>: We compute an index using after(), then insert the new message at the correct chronological position - or append it if it&#39;s the newest.</li><li><strong>Automatic cleanup</strong>: The hook manages subscribe/unsubscribe for you when the component mounts or unmounts.</li></ul><h3>Handle sending messages</h3><p>To send a chat message, we’ll define a few helper functions:</p><ul><li>sendChatMessage() publishes the message to the Ably room.</li><li>handleFormSubmission() is tied to the form&#39;s onSubmit event, which prevents a page reload and calls the send function.</li><li>handleKeyPress() checks for the Enter key and sends the message directly if pressed inside the textarea.</li></ul><p>These get added to to ChatBox.jsx:</p><pre>const sendChatMessage = async (text) =&gt; {<br>  if (!sendMessage) {<br>    // hook isn&#39;t ready yet<br>    return;<br>  }<br>  try {<br>    // send via Ably Chat SDK<br>    await sendMessage({ text });<br>    // clear out the textarea and restore focus<br>    setMessageText(&#39;&#39;);<br>    inputBox.current?.focus();<br>  } catch (error) {<br>    console.error(&#39;Error sending message:&#39;, error);<br>  }<br>};<br><br>const handleFormSubmission = (event) =&gt; {<br>  event.preventDefault();<br>  sendChatMessage(messageText);<br>};<br><br>const handleKeyPress = (event) =&gt; {<br>  // only send on plain Enter (not Shift+Enter)<br>  if (event.key !== &#39;Enter&#39; || event.shiftKey) {<br>    return;<br>  }<br>  event.preventDefault();<br>  sendChatMessage(messageText);<br>};</pre><h3>Rendering messages in the chat UI</h3><p>Next, we need to construct the UI elements to display the messages. To do this, we will <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> the received Ably messages into HTML span elements:</p><pre>const messageElements = messages.map((message, index) =&gt; {<br>  const key = message.serial ?? index;<br>  return (<br>    &lt;span key={key} className={styles.message}&gt;<br>      {message.text}<br>    &lt;/span&gt;<br>  );<br>});</pre><ul><li><strong>sendChatMessage(text)</strong> checks that sendMessage is available, then awaits it to publish your payload. On success, it clears the input and focuses it; on failure, it logs the error.</li><li><strong>handleFormSubmission</strong> prevents the default page reload and delegates to sendChatMessage.</li><li><strong>handleKeyPress</strong> looks for the Enter key (ignoring Shift+Enter line breaks), prevents the newline, and sends the message immediately.</li></ul><p>In order to keep the message box scrolled to the most recent message (the one on the bottom) we’ll need to add an empty div element into the message container, which will then be scrolled into view whenever the components re-renders. This is the element that we&#39;ll add to the UI:</p><pre>&lt;div className={styles.chatText}&gt;<br>  {messageElements}<br>  &lt;div ref={messageEndRef} /&gt;<br>&lt;/div&gt;</pre><p>We use a useEffect hook along with scrollIntoView() to scroll the message history to the bottom whenever the component renders.</p><pre>useEffect(() =&gt; {<br>  messageEndRef.current?.scrollIntoView({ behavior: &#39;smooth&#39; });<br>}, [messages]);</pre><h3>Returning the UI markup</h3><p>Finally, we will write the React component markup with the event handlers all bound to the onChange and onKeyPress events in JSX.</p><p>The markup itself is just a few div elements and a form with a textarea for user input. There are two calls to the react ref function, which allows us to capture a reference to the elements when they are rendered so that we can interact with them in JavaScript. The returned markup will look like this:</p><pre>return (<br>  &lt;div className={styles.chatHolder}&gt;<br>    &lt;div className={styles.chatText}&gt;<br>      {messageElements}<br>      &lt;div ref={messageEndRef}&gt;&lt;/div&gt;<br>    &lt;/div&gt;<br>    &lt;form onSubmit={handleFormSubmission} className={styles.form}&gt;<br>      &lt;textarea<br>        ref={inputBox}<br>        value={messageText}<br>        placeholder={&#39;Type a message...&#39;}<br>        onChange={(e) =&gt; setMessageText(e.target.value)}<br>        onKeyPress={handleKeyPress}<br>        className={styles.textarea}<br>      &gt;&lt;/textarea&gt;<br>      &lt;button type=&quot;submit&quot; className={styles.button} disabled={messageTextIsEmpty}&gt;<br>        Send<br>      &lt;/button&gt;<br>    &lt;/form&gt;<br>  &lt;/div&gt;<br>);</pre><p>Swap over to your browser (make sure you restart the application server if you need to) and you should see a functioning chat application now.</p><h3>6. Hosting on Vercel</h3><p>We’re using Vercel as our development server and build pipeline.</p><p>As we mentioned at the beginning, in order to deploy your new chat app to Vercel, you’ll need to:</p><ol><li>Create a <a href="https://github.com/">GitHub account</a> (if you don’t already have one)</li><li><a href="https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/creating-a-new-repository">Push your app to a GitHub repository</a></li><li><a href="https://vercel.com/signup">Create a Vercel account</a></li><li>Create a new Vercel app and import your app from your GitHub repository. (This will require you to authorize Vercel to use your GitHub account)</li><li>Add your ABLY_API_KEY as an environment variable</li><li>Watch your app deploy</li><li>Visit the newly created URL in your browser!</li></ol><h3>7. Make it your own</h3><p>There are a few ways that this example could be extended:</p><h4>Add message history</h4><p>There is currently no chat history in this demo — you’ll only see messages that come in after you join the chat. You could expand this demo by using Ably Chat’s built-in <a href="https://ably.com/docs/chat/rooms/history">message history</a> to retrieve messages sent earlier, like this:</p><pre>import { useMessages } from &#39;@ably/chat/react&#39;;<br><br>const MyComponent = () =&gt; {<br>  const { get } = useMessages();<br><br>  const handleGetMessages = () =&gt; {<br>    // fetch the last 3 messages, oldest to newest<br>    get({ limit: 3, orderBy: OrderBy.OldestFirst })<br>      .then((result) =&gt;<br>        console.log(&#39;Previous messages: &#39;, result.items));<br>  };<br><br>  return (<br>    &lt;div&gt;<br>      &lt;button onClick={handleGetMessages}&gt;Get Messages&lt;/button&gt;<br>    &lt;/div&gt;<br>  );<br>};</pre><h4>Add room reactions</h4><p>Use the <a href="https://ably.com/docs/chat/rooms/messages?lang=react">useRoomReactions</a> Chat React Hook to both send reactions and listen for incoming reaction events. The hook returns a send function; you register a listener to update your own React state when a new reaction arrives. Here&#39;s how to incorporate it in ChatBox.jsx. First, add this import statement at the top:</p><pre>import { useRoomReactions } from &#39;@ably/chat/react&#39;;</pre><h4>Add typing indicators</h4><p>You can show when other users are typing using the Chat React Hook <a href="https://ably.com/docs/chat/rooms/typing?lang=react">useTyping</a>. Just incorporate it into the existing ChatBox.jsx with this import statement:</p><pre>import { useTyping } from &#39;@ably/chat/react&#39;;</pre><p>Learn more about typing indicators in the Ably Chat <a href="https://ably.com/docs/chat/rooms/typing">typing indicator docs.</a></p><h3>Let us know</h3><p>Hope you have enjoyed this tutorial.</p><p>If this tutorial was helpful, or you’re using Next.js and Ably in your project, we’d love to hear about it. Drop us a <a href="https://x.com/ablyrealtime">message on X</a> or <a href="https://www.linkedin.com/company/ably-realtime/">LinkedIn</a>.</p><h3>FAQs</h3><p><strong>What is the Ably Chat SDK and why use it with Next.js?</strong><br>The Ably Chat SDK provides realtime messaging APIs built on Ably’s globally distributed data network. When integrated with Next.js, it simplifies WebSocket-style communication and enables features like presence, moderation, message history, typing indicators, and more.</p><p><strong>How do you authenticate Ably clients securely in a Next.js app?</strong><br>Authentication is handled using a serverless API route on Vercel. This route issues short-lived tokens based on your Ably API key, ensuring the secret key is never exposed while allowing clients to connect safely.</p><p><strong>Can Vercel handle persistent WebSocket connections directly?</strong><br>Not natively — Vercel serverless functions have timeouts that prevent persistent sockets. Ably solves this by maintaining realtime connections for you, while your Vercel app interacts through APIs and the Chat SDK.</p><p><strong>How do you deploy a realtime chat app with Next.js to Vercel?</strong><br>You push your project to GitHub, connect it to Vercel, set environment variables like ABLY_API_KEY, and deploy. Vercel handles the build and hosting, while Ably manages realtime messaging globally.</p><p><strong>What features can I add to enhance the chat experience?</strong></p><p>Beyond sending messages, you can use Ably’s Chat SDK to add moderation, typing indicators, room and message reactions, presence, read receipts, or message history. These features improve usability and make your chat app feel polished and production-ready. See the <a href="https://ably.com/docs/chat">Ably Chat documentation</a> for the full feature list.</p><p><em>Originally published at </em><a href="https://ably.com/blog/realtime-chat-app-nextjs-vercel"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=387732b0c368" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/building-a-realtime-chat-app-with-next-js-and-vercel-387732b0c368">Building a realtime chat app with Next.js and Vercel</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[What it takes to build a realtime messaging app]]></title>
            <link>https://medium.com/ably-realtime/what-it-takes-to-build-a-realtime-messaging-app-c80e6c114f25?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/c80e6c114f25</guid>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[messaging]]></category>
            <category><![CDATA[live-chat]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:21:10 GMT</pubDate>
            <atom:updated>2026-02-20T14:21:10.750Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*kJStcdERT4vXpNmC" /></figure><blockquote><em>What does it really take to build a high-quality realtime messaging app? Choosing the right architecture up front — covering latency, reliability, message ordering, persistence, presence, and security can mean the difference between smooth user experiences and costly failures as your audience grows. Learn more about</em><strong><em> </em></strong><a href="https://ably.com/chat"><strong><em>Ably Chat</em></strong></a><strong><em> →</em></strong></blockquote><p>We all expect online experiences to happen in realtime. Messages should arrive instantly, dashboards should <a href="https://ably.com/solutions/live-updates-results-metrics">deliver business metrics</a> as they happen, and live sports scores should <a href="https://ably.com/solutions/data-broadcast">broadcast to fans around the world</a> in a blink.</p><p>This expectation is even higher for <a href="https://ably.com/solutions/chat">realtime chat and messaging</a>, which is now embedded in everything from <a href="https://ably.com/solutions/ecommerce-and-retail">e-commerce platforms</a> to <a href="https://ably.com/solutions/gaming">online gaming</a>. But building a competitive instant messaging or live chat app requires some heavy lifting-especially if you’re starting from scratch.</p><p>To help you hit the ground running, this article provides an overview of what live chat and instant messaging app development involve, including: the features you need, the challenges you can expect, and everything you need to know about delivering reliable, scalable realtime messaging.</p><h3>The foundations of a successful realtime messaging app</h3><p>Let’s start by taking a closer look at what every winning chat app and instant messaging platform has in common.</p><ul><li><strong>Low latency data delivery: </strong>The promise of realtime means users expect to, and should, receive messages on their devices without delay. This relies on a combination of factors, including a high throughput, an efficient, low-latency messaging protocol (like <a href="https://ably.com/topic/websockets">WebSockets</a>), and geographic proximity between users and servers.</li><li><strong>Message delivery guarantees:</strong> Chat and instant messaging rely on messages being delivered to the right client, in the right order, at the right time. Ensuring data integrity is difficult, but critical to prevent missed, unordered, or duplicate messages.</li><li><strong>Scalability: </strong>Having a highly available and resilient infrastructure allows a realtime chat or instant messaging app to grow in-line with its user base. The <a href="https://ably.com/topic/pub-sub">Pub/Sub messaging</a> pattern is a good foundation for this, since it decouples the communication logic from the business logic — making your system easier to scale.</li><li><strong>Elasticity:</strong> A chat or instant messaging app that crashes when it gets more users than expected will never remain competitive. To succeed in the long term, your app has to be able to react to sudden changes and elastically scale to handle a high, unpredictable, and fluctuating number of concurrent users.</li><li><strong>Reliability:</strong> Chat and instant messaging need to be always available-even if something goes wrong. Building in redundancy ensures service continuity even in the face of failure, either at a regional level (instances and datacenters) or at a global level (network issues, outages, or even DDoS attacks).</li><li><strong>Features for a richer realtime messaging experience:</strong> Chat and instant messaging should be fun as well as functional. The standard is to send and receive messages, but the bar is now higher since chat apps like WhatsApp, Messenger, and Slack popularized features like emoji reactions, read receipts, and GIFs to upgrade the chat experience.</li></ul><h3>What realtime messaging app features to build</h3><p>The idea of building a chat or instant messaging app is simple, but with the likes of Slack and WhatsApp setting the standard for realtime messaging, it’s not enough to just set up a sleek UI that lets users send and receive messages.</p><p>With that in mind, here are the features you need for a well-rounded experience that won’t push users to a better-equipped competitor.</p><h3>Core instant messaging and chat features: What your app can’t do without</h3><ul><li><strong>Realtime messaging:</strong> Your chat app must enable users to join a chat to send and receive messages in realtime. Pub/Sub messaging is ideal for chat apps since it supports 1:1 messaging as well as 1:many, which is useful for <a href="https://ably.com/solutions/chat/group-chat">group chat</a>, chat rooms or channels.</li><li><strong>Message storage: </strong>Persist messages so users can retrieve old conversations. You can choose between different storage options and differing data retention policies, depending on the specifics of your use case.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3pOZn5DKuYZXDJyS.png" /></figure><ul><li><strong>Authentication and authorization:</strong> Your chat app needs a way to manage access for chat participants. This can be through their social media account using a third-party login, or simply their email and phone number. You also need to consider managing permissions for different roles, like only allowing admins to moderate a group chat.</li><li><strong>Access to contacts:</strong> Your chat app must give users a simple way to import their contacts. It’s also a good idea to show which contacts are already registered in the app and give the option to send an invite to those who aren’t.</li></ul><h3>Enhanced instant messaging and chat features: Taking your app beyond the basics</h3><ul><li><strong>Edit/delete messages: </strong>Your chat app should give users the option to edit or unsend a published message. This means thinking about the most suitable data structures for searchability, and making sure the message payload is properly updated and stored.</li><li><strong>Complex text: </strong>Your chat app should be able to interpret text that triggers a specific action. For example, URLs should become clickable or show a media thumbnail. A name tagged with @ should be highlighted and automatically send the tagged user a notification.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*pnCZe-lS84Reshdf.png" /></figure><ul><li><strong>File sharing: </strong>Adding support for different file formats to your instant messaging or chat app will enable users to send photos, videos and audio to liven up the conversation. This is particularly important for instant messaging apps, where participants are engaging in social interactions. Common protocols for this include <a href="https://ably.com/blog/what-is-webrtc">WebRTC</a>, <a href="https://ably.com/topic/websockets">WebSockets</a>, and IRC.</li><li><strong>Audio/video calling: </strong>If you want your chat or instant messaging app to emulate the likes of WhatsApp, then you should enlist protocols like WebRTC to enable video calls within your chat app — or integrate third-party APIs that handle everything for you.</li><li><strong>Push notifications: </strong>Although the in-app experience is important, ensuring that users are aware of new messages even if they’re not using the app is key to engagement and user communication. This can be achieved by sending <a href="https://ably.com/push-notifications">notifications</a> to users’ devices.</li></ul><h3>Rich instant messaging and chat UI and UX features: Upgrading the in-app experience</h3><ul><li><strong>Read receipts:</strong> Update your UI to show users when a message has been successfully sent, delivered, and read. You could also show if a message has been edited.</li><li><strong>Presence indicators:</strong> Give visibility into what others in the conversation are doing in realtime, like when they’re online or the last time they were active in the app.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9B1vWHOmRcbMOUy-.png" /></figure><ul><li><strong>Message reactions: </strong>Offer the alternative for those in a hurry (or lacking a good response) of adding an emoji to a published message, like a heart or a thumbs up.</li><li><strong>App updates:</strong> Show what’s changed since the user was last active in the app, like how many unread messages they have, or how many times they’ve been mentioned in a thread.</li></ul><h3>The challenges of building a realtime messaging app</h3><p>It’s one thing to map out what to build for your chat app, but <em>engineering</em> a dependable chat system is a whole other ballgame. The time you spend battling code, uprooting issues, and juggling protocols can add up quickly-and time is money.</p><p>To help you better prepare, here’s an overview of the most common challenges.</p><h4>Performance</h4><p>This isn’t just about minimizing latency and bandwidth requirements to send data end-to-end, but also minimizing the variance in them. Too much variance can make messaging unpredictable and create an exasperating user experience. It can also make building and scaling features tricky since you wouldn’t know for certain whether they’ll perform as expected in varied operating conditions.</p><p>This is where a PaaS comes in handy. You’d know what median latency and throughput performance to expect, as well as the specific operating boundaries to design and build new features around.</p><p><strong>TIP:</strong> Realtime messaging applications, especially those with interactive sessions like voice or video calls, are best experienced with latencies under 100ms.</p><h4>Reliability</h4><p>Ensuring reliability requires a stable, fault-tolerant architecture that has redundancy built in at a regional (and sometimes global) level. But maintaining a reliable distributed infrastructure comes at a high operating cost, and there’s a long list of capabilities (like global replication and automatic fail safes) that need to be developed.</p><p>A common approach is to pay for a PaaS that covers all your bases, unless you have the time and resources to build a fault-tolerant system.</p><h4>Scalability</h4><p>Architecting your chat app for scale takes more effort upfront since you need to spend more time on design before you build. You also have to make sure you have the funds to host, run, and maintain your app as it grows.</p><p>Partnering with a reputable PaaS can provide a highly elastic infrastructure so your app is never short on capacity and your team isn’t putting out operational fires at 3AM.</p><h4>Cross-platform development</h4><p>It’s no longer enough to develop your chat app for one lonely device. It now has to be accessible across various platforms and operating systems. Of course, the development time and technical challenges multiply with each additional platform, as you’ll need to navigate different SDKs and programming languages.</p><p>Luckily there are providers who offer SDKs targeting multiple platforms, so teams can develop using the languages and tools they already know.</p><h4>Security and compliance</h4><p>Security is top of mind for most users today, and messaging in particular is expected to be private and secure. Additionally, you’ll most likely need to meet compliance requirements (GDPR, SOC2) and any industry-specific frameworks, like HIPAA to protect patient privacy.</p><p>At a minimum, you need to encrypt data in transit and at rest, and implement robust authentication, as well as a permissions system.</p><h4>Capabilities to build rich chat</h4><p>There’s a lot more to chat once you’ve built out the basics. You also have to think about channels, emojis, read receipts, communicating user presence (online, offline, typing), and more. Presence is a particularly tricky feature to <a href="https://ably.com/blog/user-presence-at-scale">handle at scale</a>.</p><p>These are many moving parts to develop and maintain in-house, so it’s a good idea to integrate APIs that already offer these additional features to let your team focus on core chat capabilities.</p><h3>How to build a realtime messaging app</h3><p>As we’ve outlined above, the path to building a realtime messaging app can be fraught with challenges. The approach you should take depends on the timeline and budget for your project, the engineering resources you have available, as well as your ambitions.</p><p>Whilst most engineering teams can knock out an MVP (Minimal Viable Product) in around 3–5 months, with a budget in the range of $30,000 to $50,000 for a single platform (like Android), the offering will be fairly basic. According to AppInventive, <a href="https://appinventiv.com/blog/cost-to-develop-a-chat-app-like-whatsapp">building a chat app like WhatsApp</a> can cost up to $250,000. And that’s just the initial cost to build and manage the system-there’s no telling how much you’ll spend over time with ongoing scaling, maintenance, and future enhancements.</p><ul><li><strong>93%</strong> of projects required at least 4 in-house engineers to build the realtime messaging infrastructure.</li><li><strong>10.2</strong> person-months was the average time taken to complete a realtime messaging infrastructure project in-house.</li><li><strong>46%</strong> said escalating costs as a major challenge during the development of their realtime messaging infrastructure.</li><li><strong>50%</strong> of self-built realtime messaging platforms required $100K-$200K a year in upkeep.</li></ul><p>Given that a lot of the challenges faced in building a realtime messaging app — performance, reliability, and scalability — are associated with the realtime infrastructure behind the chat app, a common fork in the road is deciding whether to build the infrastructure yourself or use a PaaS that does most of the work for you. Let’s dig into the two options.</p><h4>Option 1: Building the realtime messaging infrastructure yourself</h4><p><a href="https://ably.com/topic/websockets">WebSockets</a> are widely used as a key technology for enabling realtime, two-way communication for chat and instant messaging apps. You have the choice of building your own bespoke protocol on top of raw WebSockets, or you can use an <a href="https://ably.com/topic/websockets#open-source-web-socket-libraries-you-can-use-right-now">open-source WebSocket library</a> to build your chat app.</p><p>For example, <a href="https://ably.com/topic/socketio">Socket.IO</a> is a popular WebSocket library that’s often used to develop chat apps for its ability to broadcast events to multiple clients, fallback options, and automatic reconnections. The <a href="https://ably.com/topic/scaling-socketio">downsides of Socket.IO</a> are that it’s difficult to scale, has limited native security features, it’s designed to work in a single region, and doesn’t guarantee message ordering.</p><p>Keep in mind that whether you build your own protocol or use an open-source library, you have to host, scale, and manage the infrastructure yourself. This brings us to the next DIY option, which is to stitch together different cloud-based services that will host the servers for you. Even so, you still need to configure and optimize how the different services connecting your chat app should interact and operate.</p><p>Overall, the DIY approach is certainly doable, but most are barebones implementations that leave a lot for you to figure out on your own. They can prove challenging if you have a particular need to scale, or have a limited workforce to do so. In our <a href="https://ably.com/resources/reports/state-of-serverless-websocket-infrastructure">survey of over 500 engineering leaders in the UK and US</a>, we discovered that:</p><ul><li><strong>60%</strong> switched to PaaS to improve live UX with stable infrastructure.</li><li><strong>56%</strong> ranked risk reduction as the second most compelling reason to swap to a PaaS.</li><li><strong>55%</strong> said the third critical reason to move to a PaaS was to redeploy engineers into core product work.</li><li><strong>65%</strong> of DIY solutions had an outage or significant downtime in the last 12–18 months.</li></ul><p>The reality is that building realtime infrastructure is hard and the timeline can be unpredictable. Plus, not every organization has the time, money, or expertise to build realtime infrastructure in-house. Even Adobe figured it would be easier to <a href="https://ably.com/blog/buy-vs-build-adobe-acquires-figma">buy Figma for $20bn</a> than build realtime multiplayer collaboration into their products.</p><h4>Option 2: Leveraging a PaaS for your realtime messaging app infrastructure</h4><p>If you’re looking to deliver a production-ready chat or instant messaging app without the complexity of building everything yourself, a PaaS is your best route.</p><p>For example, you could enlist an app development platform like Google-owned <a href="https://firebase.google.com/">Firebase</a> to build, test, release, and monitor web and mobile chat apps. However, it can be <a href="https://ably.com/topic/scaling-firebase-realtime-database">limiting when it’s time to scale</a> and build features beyond a simple MVP. Not to mention vendor lock-in, as it restricts you to Google’s ecosystem.</p><p>Another option is to choose a flexible PaaS, like <a href="https://ably.com/solutions/chat">Ably</a>, which is a serverless WebSocket PaaS that helps developers build scalable, realtime experiences-like chat-without the hassle of managing the underlying infrastructure.</p><ul><li><strong>Predictable performance:</strong> Realtime messaging with dependable latencies and global availability, even under extreme load.</li><li><strong>Integrity built-in:</strong> Exactly-once delivery and ordered messages ensure your conversations never lose context.</li><li><strong>Scalable efficiency:</strong> A flexible, consumption-based pricing model-plus upcoming features like batching and aggregation-keeps costs predictable as you grow.</li><li><strong>Seamless integration:</strong> Ably slots neatly between your frontend and backend, with managed integrations to protocols and third-party services.</li></ul><p>The case for using a PaaS gets stronger the deeper you dig into the challenges of building and maintaining the infrastructure. In addition to the statistics above, <a href="https://ably.com/resources/reports/state-of-serverless-websocket-infrastructure">our survey</a> revealed that:</p><p>The bottom line is: if you want to get your instant messaging or chat app to market sooner and grow it quickly, you’re better off using a PaaS that takes care of the heavy lifting and can guarantee predictable performance at scale.</p><h3>Simplifying your realtime messaging app development with Ably</h3><p>Building a reliable, realtime messaging app is notoriously hard. That’s why companies such as <a href="https://ably.com/case-studies/hubspot">HubSpot</a>, <a href="https://ably.com/case-studies/17live">17LIVE</a>, <a href="https://ably.com/case-studies/sportsbet">SportsBet</a>, <a href="https://ably.com/case-studies/invitepeople">InvitePeople</a>, and more choose Ably to power their chat experiences.</p><p>gives you everything you need to deliver modern chat at speed. Purpose-built <a href="https://ably.com/chat/sdk">APIs and SDKs</a> across multiple platforms make it easy to add <a href="https://ably.com/docs/chat/rooms/messages">realtime messaging</a>, <a href="https://ably.com/docs/chat/rooms/presence">presence tracking</a>, <a href="https://ably.com/docs/chat/rooms/typing">typing indicators</a>, <a href="https://ably.com/docs/chat/moderation">moderation</a>, <a href="https://ably.com/docs/chat/rooms/message-reactions">reactions</a>, and more. Whether you’re building for livestreams, in-game communication, customer support, or social features in SaaS products, Ably Chat helps you ship a great chat experience 3× faster.</p><p><strong>Powered by the </strong><a href="https://ably.com/platform"><strong>Ably platform</strong></a><strong>.</strong> Under the hood, Ably Chat runs on the same realtime infrastructure trusted worldwide. That means you inherit:</p><p>With the complexities of latency, message integrity, scalability, and cross-platform support handled seamlessly, you can shift your energy to what truly matters — innovating your chat experience, not maintaining its plumbing.</p><p>And with <a href="https://ably.com/chat"><strong>Ably Chat SDKs available today</strong></a>, your teams get consistent, idiomatic APIs across every platform, so you ship faster, smarter, and stand out in a world where realtime matters most.</p><h3>FAQs</h3><p><strong>How do you ensure message ordering and reliability in realtime chat systems?</strong><br>You ensure this by using protocols that support delivery guarantees (e.g. exactly-once or ordered delivery), buffering and retry logic, and having infrastructure that persists messages so that clients who briefly disconnect can resume without losing or reordering messages.</p><p><strong>When should I build my own realtime infrastructure versus using a PaaS like Ably?</strong><br>Building your own gives you full control but demands more engineering, cost, and operational overhead; using a Platform as a Service reduces time-to-market, offloads complexity, and helps with scalability and global delivery. The right choice depends on your team’s resources, performance needs, and how critical uptime and latency are for your users.</p><p><strong>How do you handle message history and offline users when building realtime chat?</strong><br>You persist messages, so they can be retrieved after disconnections or for new users joining a conversation, and include logic to fetch unread or historical messages. This ensures consistent user experience and continuity even when people are offline or switching devices.</p><p><strong>What kind of security and presence features are essential in a messaging app?</strong><br>Essential features include user authentication and authorization, secure transport (e.g. TLS), control over permissions, and the ability to see which users are online or offline (presence). Also, mechanisms for moderation and audit are important for maintaining trust and compliance, especially in large-scale or global applications.</p><p><em>Originally published at </em><a href="https://ably.com/blog/what-it-takes-to-build-a-realtime-chat-or-messaging-app"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=c80e6c114f25" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/what-it-takes-to-build-a-realtime-messaging-app-c80e6c114f25">What it takes to build a realtime messaging app</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[AI UX: Reliable, resumable token streaming]]></title>
            <link>https://medium.com/ably-realtime/ai-ux-reliable-resumable-token-streaming-b42c0e824ef4?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/b42c0e824ef4</guid>
            <category><![CDATA[ai-agent]]></category>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[ai]]></category>
            <category><![CDATA[ai-transport]]></category>
            <category><![CDATA[ably]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:20:01 GMT</pubDate>
            <atom:updated>2026-02-20T14:20:02.852Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cojWWEYelBP30gJo5Sxjzg.png" /></figure><p>Refresh the page, lose signal, switch tabs — the AI conversation just keeps going. That’s what reliable, resumable token streaming makes possible. No restarts, no lost context, just the same response picking up right where it left off. It keeps users in flow and builds trust, making conversations feel seamless. Even better, it unlocks things like switching devices mid-stream without missing a beat. This post explains why users expect it, why it’s hard to build, and what your infrastructure needs to make it work.</p><h3>The new expectation for seamless AI interactions</h3><p>As AI becomes woven into everyday apps, users have rising expectations for seamless interactions. An emerging baseline is that an AI conversation or generated answer should not be fragile. Reliable token streaming that survives crashes or reloads is quickly becoming expected behaviour. People now assume an ongoing AI response will continue uninterrupted despite a temporary failure. If your browser tab crashes or you hit refresh accidentally, you’d expect the AI to keep going in the background and resume when you return — just like a video resumes where you left off.</p><p>This expectation isn’t theoretical; it’s showing up as a real demand from users and developers. Many have noticed the annoyance of a chatty AI that goes silent after a network blip and forces you to retry the prompt from scratch. Forward-looking teams are already experimenting with ways to make AI streams more resilient. In short, the bar for a smooth AI experience is rising: reliable, resumable streaming is moving from a nice-to-have to a must-have.</p><h3>What users want, and why this enhances the experience</h3><p>Users want AI conversations that continue uninterrupted despite failures or reloads. They don’t want to babysit the AI or repeat themselves due to technical faults. Consider this scenario: You’re halfway through a detailed AI response when the page reloads or the network drops. When things come back, you expect the conversation to pick up right where it left off. The same question, same response, no rewind. That’s the baseline now: the AI should just handle it. In practice, this means users now expect a few key behaviours:</p><ul><li>Streamed responses resume instantly after a reload. The AI’s answer picks up exactly where it stopped when you refreshed.</li><li>Incomplete prompts persist across failures. If you submit a question and the app crashes or you go offline, the AI still finishes the answer. You don’t lose your query or its partial response.</li><li>Reconnection doesn’t trigger full re-generation. Coming back online or reopening the app doesn’t make the AI start the answer over from scratch; it continues as if nothing happened.</li></ul><p>Under the hood, delivering these behaviours requires that the AI’s generation process not be tied to a single fragile connection. Even if the user disconnects, the system must carry on generating tokens so it can seamlessly resume later. In other words, the conversation’s state should survive independently of the user’s browser tab or device session. This greatly enhances the user experience by ensuring the AI is always “in sync” with the user, no matter the hiccups along the way.</p><h3>Why this is proving challenging</h3><p>Building seamless, resumable streaming sounds simple on the surface: keep the tokens flowing, even when something goes wrong. But under the hood, it’s anything but. Most web stacks were never designed for this kind of continuity, and the gaps show quickly when you try to implement it. There are a few core failure points that make reliable streaming difficult to get right:</p><h3>Stateless protocols like HTTP drop the stream on failure</h3><p>Most web interactions (think HTTP requests, REST APIs) are stateless and short-lived. If you’re streaming an AI response over a standard HTTP connection and it drops, that request is gone. HTTP has no native concept of resuming a half-finished response. It wasn’t designed for long-lived, continuous streams. This makes it fundamentally ill-suited to delivering multi-turn, token-based output with realtime guarantees.</p><h3>Streaming logic often lives only in the browser</h3><p>Many apps place the responsibility for handling AI output in the client — usually the browser tab. If that tab crashes or is closed, any awareness of the current conversation state disappears. Unless the server is explicitly maintaining progress (e.g. buffering the partial response), the result is a hard reset. Even a minor network blip or page reload can cause the entire generation to be lost, forcing the user to re-issue the prompt and wait again. From the developer’s side, this means wasted tokens and potentially double the LLM costs for the same request.</p><h3>Server infrastructure rarely stores stream state by default</h3><p>Even when <a href="https://ably.com/topic/websockets">WebSockets</a> or similar protocols are used, many backends treat streaming as fire-and-forget. Once tokens are emitted, they’re not stored. If a client reconnects and asks “what did I miss?”, the server has no answer unless a stateful resume mechanism is in place. That means tracking client progress, buffering streamed output, handling retries, and ensuring correct ordering. None of which are trivial to bolt on after the fact. Building this kind of infrastructure requires careful design, and is one reason robust streaming support remains rare despite user demand.</p><p><strong>These three limitations add up to a brittle default behaviour:</strong> A typical implementation ends up tying AI generation directly to a single client connection. If that connection drops due to a refresh, crash, or network issue, the stream is lost. Undelivered tokens vanish, and the user is left with an incomplete response and no way to recover. They have to restart the prompt and wait all over again. The result is a jarring, inefficient experience that breaks user trust.</p><h3>Why you need a drop-in AI transport layer</h3><p>Making streaming resilient isn’t something you can bolt on later. It needs to be handled at the transport layer, by infrastructure that treats continuity as the default. This isn’t one feature, it’s a set of behaviours working together to keep streams intact even when clients disconnect, reload, or crash. At a minimum, the transport should handle:</p><h3>Persistent streaming connections</h3><p>Instead of one-request-per-response, the client should use a persistent connection (e.g. WebSocket) that stays open for streaming. A persistent channel enables realtime, bi-directional, delivery and helps guarantee in-order arrival of tokens.</p><p>Unlike stateless HTTP calls, a WebSocket connection can continuously push data to the client without needing to re-establish a new HTTP request for each chunk. This drastically reduces the chance of interruption. And if the connection does break, the protocol can attempt automatic reconnection quickly, avoiding the overhead of starting a whole new session from scratch. In short, a long-lived connection is the foundation for uninterrupted token streams.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Jkp-gkTXbjnM7dKW.png" /></figure><p>Reliable, resumable token streaming: Your AI keeps streaming even after reloads, tab crashes, or network drops. No restarts. No lost context.</p><h3>Server-side output buffering and replay</h3><p>A resilient transport layer buffers the AI’s output on the server side as it’s being generated. Every token or chunk is stored (in memory or a fast store) at least until it’s safely delivered. Why? Because if the client disconnects momentarily, those tokens must still be available to send later. <a href="https://ably.com/platform">Ably’s messaging platform</a>, for instance, persists messages while the client is reconnecting, guaranteeing no data is lost in transit. This buffered backlog enables catch-up: when a client reconnects, the transport can replay any missed tokens from the buffer before returning to live streaming.</p><p>The user doesn’t see gaps in the text, because the system fills in everything that was generated while they were away. Without server-side buffering, there’s simply no way to recover what was produced during a disconnect.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*g7Wf9Bc051QOVLwE.png" /></figure><p>Rejoin &amp; instantly hydrate state: When someone comes back, they instantly see the live state of the conversation.</p><h3>Session tracking across client restarts</h3><p>To resume a stream, the system needs to know who’s reconnecting and where to pick things up. That means tracking session state across connections. That typically means using a stable session or conversation ID that stays the same even if the page reloads or the device changes.</p><p>When the client reconnects, it should tell the server what it last received (for example, “I got up to token 123”). The server then uses that information to send only the tokens the client missed. This handshake (where the client shares its last-seen message ID) is what lets the stream continue cleanly, without starting over.</p><p>Platforms like Ably support this by using resume tokens or last-event IDs. The client includes that token on reconnect, and t <a href="https://ably.com/docs/platform/architecture/connection-recovery#:~:text=When%20network%20connectivity%20is%20reestablished%2C,missed%20during%20the%20disconnection%20period">he stream resumes from exactly the right point</a>. As a result, even after a crash, refresh, or switching devices, the AI response carries on with no manual sync needed.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*-aotEDEVRf7EGRQc.png" /></figure><p>Multi-device &amp; multi-tab continuity: Start a chat on your laptop, continue on your phone; open three tabs. it all stays in perfect sync.</p><h3>Ordered delivery guarantees and reconnection state</h3><p>Maintaining the correct order of tokens is critical. We can’t have jumbled or duplicated text when a stream resumes. The transport layer must guarantee that messages (tokens) are <a href="https://ably.com/blog/data-integrity-in-ably-pub-sub">delivered in order, exactly once.</a> This involves assigning each chunk a unique sequence identifier and ensuring the client never processes the same chunk twice even in the face of retries.</p><p>Upon reconnection, the system should replay missed tokens in the original order, with none missing and none repeated. Achieving this reliably often means the server needs to temporarily queue messages and only release them in sequence. Ably’s approach, for example, replays any messages the client missed during a disconnection and ensures no gaps or duplicates in the data. In practice, that means when your AI resumes its answer after a drop the user sees a continuous, correctly ordered completion as if no disconnect ever happened.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*M3B7XXeBytLSsn8d.png" /></figure><p>Exactly-once, in-order delivery: Every message, token, event, or state update arrives once, arrives only once, and arrives in the correct sequence.</p><p>All of this points to a deeper architectural issue. To make streaming reliable, you need to rethink where state lives and how streams are managed across connections:</p><h3>Putting it all together</h3><p>A drop-in transport layer for AI needs to manage these concerns transparently. It keeps a persistent pipe open, buffers the token stream, tracks session offsets, and enforces ordering and exactly-once semantics. For the developers, this means you don’t have to build custom state management for every AI session — the transport layer provides the assurances that “your AI will keep streaming, no matter what.” Essentially, it’s infrastructure that transforms the unreliable web into a dependable conduit for AI data.</p><h3>How the experience maps to the transport layer</h3><p>To better illustrate, here’s how specific user expectations translate into transport-layer requirements and technical implementations:</p><p>Answer continues after page refresh : The AI’s response resumes exactly where it left off when the user reloads the page, with no repetition.</p><p>Stream resumption on reconnect</p><p>Connection recovery using a resume token or last message ID (e.g. sending an SSE Last-Event-ID or a WebSocket reconnection handshake) so the server knows what data to replay.</p><h3>Delivering reliable, resumable streaming today</h3><p>Reliable, resumable token streaming isn’t theoretical anymore. You can ship it now. You don’t need to redesign your whole architecture or stitch together a fragile set of custom reconnection hacks.</p><p><a href="https://ably.com/ai-transport">Ably AI Transport</a> gives you the infrastructure required to keep AI responses flowing, even when the client drops. Persistent connections, ordered replay, automatic resume, and delivery guarantees come as part of the platform. Your generation process keeps running, and users see the response continue exactly where it left off when they return.</p><p>If you’re building Gen-2 AI experiences and want streaming that survives reloads, outages, and device switches, we’d be happy to help.</p><p>Reach out for <a href="https://share.hsforms.com/2vFBJVWNOQzKfBXkaRLGawg44qpp">early access</a> or to learn how we can support reliable, resumable streaming in your AI products.</p><p><em>Originally published at </em><a href="https://ably.com/blog/token-streaming-for-ai-ux"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b42c0e824ef4" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/ai-ux-reliable-resumable-token-streaming-b42c0e824ef4">AI UX: Reliable, resumable token streaming</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Ably AI Transport is now available]]></title>
            <link>https://medium.com/ably-realtime/ably-ai-transport-is-now-available-2b64e61e46c8?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/2b64e61e46c8</guid>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[ai-transport]]></category>
            <category><![CDATA[ai]]></category>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[ai-agent]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:19:04 GMT</pubDate>
            <atom:updated>2026-02-20T14:19:05.698Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*E4lUSR8_xu4SrNfq5-e2cw.png" /></figure><p>Today we’re launching <a href="https://ably.com/ai-transport">Ably AI Transport</a>: a drop-in realtime delivery and session layer that sits between agents and devices, so AI experiences stay continuous across refreshes, reconnects, and device switches — without an architecture rewrite.</p><h3>The gap: HTTP streaming breaks down for stateful AI UX</h3><p>AI has moved from “type and wait” requests to experiences that are long-running and stateful: responses stream, users steer mid-flight, and work needs to carry across tabs and devices. That shift changes what “working” means in production. It’s not just whether the model can generate tokens, it’s whether the experience stays continuous when real users behave like real users do.</p><p>Most AI apps still start with a connection-oriented setup: the client opens a streaming connection (SSE, fetch streaming, sometimes WebSockets), the agent generates tokens, and the UI renders them as they arrive. It’s low friction and demos well.</p><p>But HTTP streaming really solves only the first part of the problem, and it’s not a good place to end.</p><p>First: continuity. When output is tied to a specific connection, the experience becomes fragile by default. <a href="https://ably.com/blog/token-streaming-for-ai-ux">Refreshes, network changes</a>, backgrounding, multiple tabs, <a href="https://ably.com/blog/cross-device-ai-sync">device switches</a>, agent handovers (even agent crashes) are normal behaviour. And they’re exactly where teams see partial output, missing tokens, duplicated messages, drifting state, and “start again” recovery paths. That’s where user trust gets lost.</p><p>Second: capability. A connection-first transport layer doesn’t just make UX fragile. It limits what you can build. Once you want true collaborative patterns like barge-in, live steering, copilot-style bidirectional exchange, multi-agent coordination, or a seamless human takeover with full context, you need more than “a stream.” You need a stateful conversation layer that can support multiple participants, resumable delivery, and shared session state.</p><p>So teams patch it: buffering, replay, offsets, reconnection logic, session IDs, routing rules for interrupts and tool results, multi-subscriber consistency, and observability once production incidents start. It’s critical work — but it’s not differentiation.</p><h3>What Ably AI Transport does</h3><p>AI Transport gives each AI conversation a durable bi-directional session that isn’t tied to one tab, connection or agent. Agents publish output into a session channel, clients subscribe from any device, and Ably handles the delivery guarantees you’d otherwise rebuild yourself: ordered delivery, recovery after reconnects, and fan-out to multiple subscribers.</p><p>It’s deliberately model and framework-agnostic. You keep your agent runtime and orchestration. AI Transport handles the delivery and session layer underneath.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*F3FW58pkmO2yyn0W.png" /></figure><h3>The key shift: sessions become channels</h3><p>In a connection-oriented setup, the “session” effectively lives inside the streaming pipe. When the pipe breaks, continuity becomes a headache.</p><p>With AI Transport, the session is created once and represented as a durable channel. Agents and clients can join independently. Refresh becomes reattach and hydrate. Device switching becomes another subscriber joining the same session. Multi-device behaviour becomes fan-out rather than custom routing. Agents and humans become truly connected over a transport designed for AI bi-directional low latency conversations.</p><h3>How Ably AI Transport ensures a resilient, stateful AI UX</h3><p><strong>Resumable, ordered token streaming:</strong> A great AI UX depends on durable streaming. Output is treated as session data, so clients can catch up cleanly after refreshes, brief dropouts, and network handoffs.</p><p><strong>Multi-device continuity:</strong> Conversations are user-scoped, not tab-scoped. Multiple clients can join the same session without split threads, duplication, or drifting state.</p><p><strong>Live steering and interruption:</strong> Modern AI UX needs control, not just output. Interrupts, redirects, and approvals route through the same bi-directional session fabric as the response stream, so steering works even across reconnects and devices.</p><p><strong>Presence-aware sessions:</strong> Once agents do real work, wasted compute becomes a serious cost problem. Presence provides a reliable signal for whether the user is currently connected (or fully offline across devices), so you can throttle, defer, or resume work accordingly.</p><p><strong>Agents that collaborate and act with awareness:</strong> As soon as you have more than one agent (or an agent plus tools/workers), coordination becomes the product. Shared session state and routing prevent clashing replies, duplicated context, and “two brains answering at once,” so multiple agents can communicate directly with users coherently.</p><p><strong>Seamless human takeover when it really matters:</strong> When an agent hits a boundary (risk, uncertainty, or policy) a human should be able to step in with full context and continue the session immediately. The handoff keeps the same session history and controls, so there’s no repeated questions, no “start again,” and no losing track of what happened mid-flight.</p><p><strong>Identity and access control:</strong> Beyond toy demos, you need to know who can read, write, steer, or approve actions. Verified identity plus fine-grained permissions let multi-party sessions stay secure without inventing a bespoke access model.</p><p><strong>Observability and governance:</strong> When AI UX breaks in production, it’s rarely obvious where. Built-in visibility into session delivery and continuity makes failures diagnosable and auditable instead of “black box streaming incidents.”</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*sc-tihs1yfrLAFfT.png" /></figure><h3>Concrete examples</h3><p><strong>Multi-device copilots:</strong> A user starts a long-running answer on desktop, switches to mobile mid-response, and the session continues without restarting. Steering and approvals apply to the same session regardless of device.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ZnFwLDyosdED0evB.png" /></figure><p><strong>Long-running agents</strong>: A research agent runs multi-step tool work for minutes. If the user disconnects, the work continues; when the user returns, the client hydrates from session history instead of resetting.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*oEZRGufS0QpvxRyb.png" /></figure><h3>Getting started (low friction)</h3><p>You can get a basic session running in minutes</p><h3>What to do next</h3><p><a href="https://ably.com/sign-up">Sign-up</a> for a free developer account and <a href="https://ably.com/docs/ai-transport">follow our guides</a> on setting up a publisher and subscriber locally to test refresh/reconnect/device-switch behaviour — that’s where you’ll feel the value immediately.</p><p><em>Originally published at </em><a href="https://ably.com/blog/ably-ai-transport-is-now-available"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=2b64e61e46c8" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/ably-ai-transport-is-now-available-2b64e61e46c8">Ably AI Transport is now available</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[The evolution of realtime AI: The transport layer needed for stateful, steerable AI UX]]></title>
            <link>https://medium.com/ably-realtime/the-evolution-of-realtime-ai-the-transport-layer-needed-for-stateful-steerable-ai-ux-da8690253f80?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/da8690253f80</guid>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[ai-agent]]></category>
            <category><![CDATA[ai]]></category>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[ai-transport]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:18:24 GMT</pubDate>
            <atom:updated>2026-02-20T14:18:25.523Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dUxWkg7x4hE2fJ7_GqFLIQ.png" /></figure><p>When we launched Ably in 2016, we set out to solve a fundamental problem: delivering reliable, low-latency real-time experiences at scale. So we set out to build a globally distributed system that didn’t force developers to choose between latency, integrity, and reliability — trade-offs that had defined the realtime infrastructure space for years.</p><p>Fast forward to today, and we’re reaching 2 billion devices monthly, processing 2 trillion operations for customers who demand rock-solid infrastructure for their mission-critical features. But over the past year, as AI has transformed from a backend optimisation tool into a front-and-centre user experience, we’ve been asking ourselves a critical question: <strong>What’s Ably’s role in the AI ecosystem?</strong></p><h3>From “nice-to-have” to essential infrastructure</h3><p>A year ago, if you’d asked us about Ably’s AI story, we would have told you that yes, customers were using us. Companies like HubSpot and Intercom were leveraging Ably for token streaming and realtime AI features. But honestly? The value proposition felt incremental. Traditional LLM interactions followed a simple request-response pattern: send a query, stream back tokens, done. HTTP streaming handled this reasonably well, and while Ably offered benefits, there wasn’t a smoking gun reason to use us specifically for AI.</p><p><strong>That’s changed dramatically.</strong></p><h3>The shift to Gen 2 AI experiences</h3><p>What we’re calling “Gen 2” AI experiences are fundamentally different from what came before. Instead of simply querying a model’s training data, today’s AI agents reason, search the web, call APIs, interact with tools via MCP (Model Context Protocol), and orchestrate complex multi-step workflows. Just look at how Perplexity searches, or how ChatGPT now breaks down complex requests into observable reasoning steps.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9ggWB6QXXiXmLk5E.png" /></figure><p>This shift introduces an entirely new set of challenges:</p><h3>Modern AI UX problems</h3><p><strong>Async by default</strong>: When an AI agent needs 30 seconds or a minute to complete a task (not 3 seconds) user behaviour changes. They switch tabs, check their phone, or start other work. A simple HTTP request suddenly needs to handle disconnections, reconnections, and state recovery.</p><p><strong>Continuous feedback is mandatory</strong>: Users need to know what’s happening. “Searching the web… Analysing documents… Calling your CRM…” This isn’t a nice-to-have anymore. Without feedback, users assume the system has failed.</p><p><strong>Multi-threading conversations</strong>: Imagine asking a support agent about your order status. While they’re checking, you ask another question. Now you have two parallel operations that need coordination. The agent needs to know what else is in flight and potentially prioritise or sequence responses intelligently.</p><p><strong>Cross-device continuity</strong>: Users want to be able to set tasks running and then pick-up later from where they left off. They may start a deep research query on their laptop, close it, and then want to check progress on their phone an hour later. The entire conversation state needs to seamlessly transfer.</p><h3>The transport layer modern AI needs</h3><p>Our vision for addressing these challenges centres on what we’re calling the <a href="https://ably.com/ai-transport"><strong>Ably AI Transport</strong></a>. A drop-in solution that handles the complexity of making the AI UX resilient and multi-device — so developers can focus on building great agent experiences, not wrestling with networking problems.</p><p>We focus on everything between your AI agents and end-user devices, leaving orchestration, LLM selection, and business logic where they belong — in your control.</p><h3>Layer 1: The foundation</h3><p>At the base level, the AI Transport provides what you’d expect from Ably: <a href="https://ably.com/platform"><strong>bulletproof reliability</strong></a>, multi-device synchronisation, and automatic resume capabilities. But the real shift is architectural. Instead of your agent responding directly to requests, it returns a conversation ID. Devices subscribe to that conversation, and from that point forward, the agent pushes updates through Ably.</p><p>This simple change unlocks powerful capabilities:</p><ul><li><strong>Decoupling</strong>: Agents and devices can disconnect and reconnect independently without losing continuity</li><li><strong>Bidirectional control</strong>: Need to stop an agent mid-task or ask a follow-up question? There’s a direct communication channel that doesn’t require complex routing infrastructure</li><li><strong>State recovery</strong>: <a href="https://ably.com/blog/token-streaming-for-ai-ux">Reconnecting devices don’t replay every token</a>. They get current state and resume from there</li></ul><h3>Layer 2: Richer orchestration</h3><p>The next layer introduces shared state on channels using live shared state. This enables sophisticated coordination:</p><ul><li><strong>Agent presence and status</strong>: Devices know if agents are active, thinking, or have crashed. Agents can broadcast their current focus (“Analyzing Q4 data…”) as state rather than events.</li><li><strong>Multi-agent coordination</strong>: When multiple agents work simultaneously — say, one handling a technical query while another processes a billing question — they can see each other’s state and coordinate without stepping on each other’s work.</li><li><strong>Context-aware prioritisation</strong>: Agents can see if a user is actively waiting versus having backgrounded their session, enabling smarter resource allocation.</li><li><strong>Client-side tool calls</strong>: In co-pilot scenarios, agents can query the client directly about user context “Is the user currently editing this field?” without roundtripping through backend systems.</li></ul><h3>Layer 3: Enterprise-grade observability</h3><p>Because everything flows through Ably, you gain comprehensive visibility into the last mile of your AI experience. Stream observability into your existing systems, integrate with Kafka for audit trails, and leverage enterprise features like SSO and SOC 2 compliance that come standard with Ably’s infrastructure.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*arpPdIjT2l3X4avm.png" /></figure><h3>A new way of building</h3><p>What excites us most is the idea of providing a stateful conversation layer that removes infrastructure concerns from the developer’s plate. Think of it as abstract storage for conversation state, combined with the realtime capabilities developers need for modern AI UX.</p><p>The developers building these experiences don’t want to solve networking problems. They want to focus on prompts, orchestration, RAG pipelines, and agent logic. The transport layer shouldn’t be where they spend their time — but it will become critical as user expectations evolve to match what ChatGPT, Perplexity, and Claude are demonstrating daily.</p><h3>Framework-agnostic by design</h3><p>One pattern we’ve noticed: as engineering teams mature in their AI journey, they tend to move away from monolithic frameworks and build custom orchestration logic. This makes sense — these systems become core to their business differentiation.</p><p>That’s why the Ably AI Transport is deliberately framework-agnostic. Yes, we’re building drop-in integrations with OpenAI’s agent framework, LangChain, LangGraph, Vercel AI SDK, ag-ui and others to make getting started trivially easy. But the architecture doesn’t lock you in. Swap out your orchestration layer, change LLM providers, rebuild your agent logic — your transport layer and device communication remain consistent.</p><h3>The road ahead</h3><p>If you’re building AI experiences and wrestling with questions like “How do I handle interruptions?”, “What happens when users switch devices mid-conversation?”, or “How do I coordinate multiple parallel agent tasks?” — we’d love to talk. We’re convinced there’s a better way to build these experiences, and it starts with not having to rebuild the real-time infrastructure layer from scratch.</p><p>The plumbing shouldn’t be your problem. Building great AI experiences should be.</p><p><em>Originally published at </em><a href="https://ably.com/blog/evolution-of-realtime-ai"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=da8690253f80" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/the-evolution-of-realtime-ai-the-transport-layer-needed-for-stateful-steerable-ai-ux-da8690253f80">The evolution of realtime AI: The transport layer needed for stateful, steerable AI UX</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[The new Ably dashboard: realtime visibility in your hands]]></title>
            <link>https://medium.com/ably-realtime/the-new-ably-dashboard-realtime-visibility-in-your-hands-2fd81e6d438a?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/2fd81e6d438a</guid>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[ably-feature]]></category>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[debugging]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:17:48 GMT</pubDate>
            <atom:updated>2026-02-20T14:17:50.224Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tb0DL5AyFJh7y7lVVzkENg.png" /></figure><p>We’ve rebuilt the Ably dashboard to give developers clear, realtime visibility into how their applications behave.</p><p>This isn’t just a cosmetic refresh. It’s a shift from a configuration-first dashboard to a live observability surface. One that lets you see channels, connections, messages, and errors as they happen, debug issues instantly, and understand usage without stitching together logs and tooling.</p><h3>Why we rebuilt the dashboard</h3><p>The previous dashboard did a solid job in helping you manage your apps, API keys, and configurations. But it didn’t show what was actually happening inside your realtime system. When something broke or behaved unexpectedly, you were left piecing together clues from SDK logs, APIs, and external tools. There wasn’t a single place to answer operational questions like who’s connected right now, what’s happening on a particular channel, or whether a pattern of errors is brand new or recurring.</p><p>The new dashboard brings realtime observability directly into the browser. No setup, no extra tooling, no context switching — just a live window into Ably.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7fUgtCgRRDWZtXQa.png" /></figure><h3>What’s new (and why it matters)</h3><p>At the heart of this release are four capability upgrades that change how your team operates realtime systems on Ably. Each one is useful on its own; together, they make it far easier to understand behavior in your apps, debug faster, and understand what’s driving usage.</p><h3>Channel and connection inspectors</h3><p>The new inspectors provide realtime visibility into how your system behaves as data flows through Ably.</p><p><strong>The channel inspector</strong> shows you who’s attached to the channel, which messages are being sent, and what’s happening in the presence set. You can also see which rules and integrations are active on that channel. Alongside that live activity, it surfaces realtime metrics like message rates, occupancy, and connection counts, so you can see performance as it changes — not after the fact.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*WCZMLwBhmj5imqfM.png" /></figure><p><strong>The connection inspector</strong> enables you to see who’s connected to your app. You can choose a specific connection and see which channels it’s attached to and view live statistics such as the rate of messages being published by that connection. Additionally, you can see information such as the geographical location of the connection and the SDK it’s connected to Ably with. Combined, the inspectors put realtime visibility into who’s interacting with your app, and which channels they’re interacting with. You now have the ability to debug any issues far more easily, such as ‘why is this channel still active?’</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*1bnYB1VaY-7FWsYR.png" /></figure><h3>Log search</h3><p>Live streams are great for what’s happening right now, but many investigations start with a timestamp. Log search lets you query historical platform events so you can understand past behavior, trace what happened and understand why it occurred. You can then compare today’s traffic with last week’s. It’s ideal for debugging anomalies and spotting patterns, especially when you’re trying to answer whether a problem is new or recurring.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*nX7CNNQ_uWoNRo4p.png" /></figure><h3>Reports and analytics</h3><p>The new reports section gives you aggregated visibility into how your apps are used over time — message volumes, connection and channel durations — so you can understand where consumption is coming from and what’s driving traffic. This is particularly helpful when needing to explain usage internally, plan scaling work, or map realtime costs back to product features.</p><p>This is the foundation for deeper analytics arriving in future releases, including more granular breakdowns by product, SDK and device, plus finer‑grained views by app, channel, and namespace.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*YNKyPnPvkWiMWnLt.png" /></figure><h3>Web CLI</h3><p>We’ve also introduced a new web CLI. A browser-based command line that lets you run Ably commands instantly. You can publish and subscribe to messages, enter presence, and manage your app configuration without any local setup. It complements the redesigned dashboard to give you a fast way to interact with Ably from anywhere. The web CLI is a powerful tool that’s invaluable for exploring Ably features without requiring you to write any code. It is especially useful during support calls where you need to quickly reproduce a certain behavior or send a specific set of messages.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*8XySAI3f2cCQ4Vtr.png" /></figure><h3>Logs tail and live telemetry</h3><p>Each inspector includes a live, realtime log stream scoped to the resource you’re viewing. If you’re inspecting a channel, you see the events relevant to that channel; if you’re inspecting a connection, you see the events relevant to that connection. This means you can trace behaviour as it happens, correlate spikes in live metrics with specific platform events, and debug instantly rather than collecting evidence after the incident.</p><h3>A more modern, product-first dashboard</h3><p>Alongside these new capabilities, we’ve modernized the dashboard itself. Navigation is cleaner and faster, with dedicated sections for each Ably product. The result is a more intuitive experience that helps teams get to the right tools quicker; whether they’re debugging, trying out a new product, testing new features, or monitoring live traffic.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*jLqlEIPRNkBA9Cwo.png" /></figure><h3>What’s coming next</h3><p>This release is a major step toward making the dashboard a full observability layer for Ably. We’re working towards live logs: a global realtime stream of platform events across all resources to complement the existing log search functionality — so you can see what <em>is</em> happening live, and what <em>has </em>happened previously. We’re also continuing to expand the reports section to provide richer visualization of your usage, performance, and reliability, across all your apps.</p><p>In parallel, we’re continuing to modernize the remaining areas of the dashboard so that all your resources benefit from enhanced observability and analytics.</p><p><em>Originally published at </em><a href="https://ably.com/blog/ably-dashboard-realtime-observability"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=2fd81e6d438a" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/the-new-ably-dashboard-realtime-visibility-in-your-hands-2fd81e6d438a">The new Ably dashboard: realtime visibility in your hands</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Gen‑2 AI UX: Conversations that stay in sync across every device]]></title>
            <link>https://medium.com/ably-realtime/gen-2-ai-ux-conversations-that-stay-in-sync-across-every-device-2e64a4316ab4?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/2e64a4316ab4</guid>
            <category><![CDATA[ai-agent]]></category>
            <category><![CDATA[ably]]></category>
            <category><![CDATA[ai-transport]]></category>
            <category><![CDATA[realtime]]></category>
            <category><![CDATA[ai]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:17:03 GMT</pubDate>
            <atom:updated>2026-02-20T14:17:04.817Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*se7CMpTVlIuFq2Hrfjz2GQ.png" /></figure><p>Start a conversation on your laptop, finish it on your phone. The context just follows you. That’s what cross-device AI sync delivers. No reloading history, no reintroducing yourself, just one continuous thread across every screen. It builds trust, reduces friction, and makes the assistant feel like a single, persistent presence. This post unpacks why users expect it, what makes it technically tricky, and what your system needs to get it right.</p><h3>AI conversations must survive the device switch</h3><p>Modern users have grown to expect realtime, seamless experiences from their apps and AI tools. They want instantaneous responses, continuous interactions, and no interruptions as they move between devices. This expectation extends to AI-powered experiences: if you start a conversation with an AI assistant on your laptop, you should be able to pick it up on your phone or another tab without missing a beat. Equally, if you have initiated a long-running asynchronous task you want to be notified once it’s completed, no matter which device you’re using at the time.</p><h3>What users want, and why this enhances the experience</h3><p>Users want continuous, identity-aware AI conversations that follow them across devices. In practice, this means an AI chat session linked to their identity rather than a single tab or device. The conversation should feel like a single thread they can return to at any time.</p><p>That continuity builds trust. The AI isn’t “forgetting” just because you switched devices. A remembered history signals reliability and intent, helping users feel the assistant is genuinely useful. Multi-turn conversations flow naturally, and users avoid repeating themselves or reconstructing context.</p><p>This matters even more once AI systems move beyond simple chat. When an LLM is running long-lived, asynchronous work such as multi-step research, tool calls, or background analysis, users expect to see progress and results wherever they happen to be at the time. You might start a task on your desktop, step away while the model works, and then pick up your tablet to see the output appear as soon as it’s ready.</p><p>Real-world usage makes multi-device continuity unavoidable. These moments must be frictionless and reinforce the sense that the AI is persistent, reliable, and working on your behalf rather than being tied to a fragile client session.</p><h3>Why this is proving challenging</h3><p>HTTP is fundamentally stateless. Each request stands alone, meaning conversation context has to be manually preserved and restored for both the client and the server. This makes cross-device AI session continuity complex.</p><p>Having clients poll for updates is inefficient and adds latency. Long-polling or server-sent events help, but only partially. They don’t enable simultaneous bi-directional, low latency messaging, which is what smooth AI conversations require.</p><p>Handling reconnections, preserving message order, and managing updates across multiple active clients requires considerable infrastructure. Doing this reliably, at scale, across networks and devices, is beyond what the typical product team can or should build from scratch.</p><h3>Why you need a drop-in AI transport</h3><p>Given the challenges described, building a robust system for realtime synchronisation from scratch can significantly drain engineering resources and slow product velocity. This is where a drop-in AI transport layer becomes essential.</p><h3>Persistent, bi-directional messaging</h3><p>To support conversations that stay in sync across devices, such a layer must offer persistent, bi-directional messaging using protocols like WebSockets for AI streaming. This allows for continuous, low-latency communication in both directions, enabling the AI to push updates and the client to send input without waiting for discrete request/response cycles.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*PzgYn5DgSLQLVHFs.png" /></figure><p>Persistent, bi-directional messaging: Low-latency, always-on two-way messaging.</p><h3>Identity aware fan-out</h3><p>Equally important is identity-aware fan-out. The transport system needs to recognize all active sessions associated with a single user and ensure that every message or state update is sent to all of those endpoints. That means when a user sends a message on one device, every other device they’re signed in on should immediately reflect the change.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*WgqVO4PABb9HXJud.png" /></figure><p>Identity aware fan-out: Sync updates across all a user’s devices.</p><h3>Ordering and session recovery</h3><p>The system also needs to preserve message ordering and support reliable session recovery. If the connection drops momentarily, say from a device switch or network disruption, the user shouldn’t lose messages or see them out of order. A well-designed transport layer offers mechanisms to replay missed events and keep message sequences intact, ensuring consistency in the conversation.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*BobE2Uqg5qEIAtEk.png" /></figure><p>Keep messages ordered, recover after drops.</p><h3>Presence tracking</h3><p>This enables the backend to know which devices are currently online and active. It helps coordinate updates, prevents redundant notifications, and can be used to power features like realtime indicators for typing or collaborative editing across devices.</p><h3>Streaming support</h3><p>To maintain a high-quality conversational UX, the transport layer must support LLM token streaming. This includes delivering partial, realtime updates from the AI model as it generates responses. That stream must arrive quickly, in order, and appear simultaneously on any active device.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*QUFfwdJxaGV1VvpY.png" /></figure><p>Stream tokens fast, in order, everywhere.</p><p>Ably’s infrastructure supports all of these capabilities as part of its realtime platform. It eliminates the need to custom-build low-level transport solutions, allowing engineering teams to focus on building intelligent, agentic features instead of protocol logic.</p><h3>How the desired experience maps to the transport layer</h3><p>The table below breaks down what users expect from cross-device AI conversations, what your transport layer must support to deliver those experiences, and the technical mechanics that make it all work.</p><h3>Cross device AI? You can ship it now.</h3><p>Seamless cross-device conversations aren’t futuristic — they’re achievable today. You don’t need to rebuild your stack to make it happen.</p><p><a href="https://ably.com/ai-transport">Ably AI Transport</a> provides all you need to support persistent, identity-aware, streaming AI experiences across multiple clients. If you’re working on Gen‑2 AI products and want to get this right, we’d love to talk.</p><p><em>Originally published at </em><a href="https://ably.com/blog/cross-device-ai-sync"><em>http://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=2e64a4316ab4" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/gen-2-ai-ux-conversations-that-stay-in-sync-across-every-device-2e64a4316ab4">Gen‑2 AI UX: Conversations that stay in sync across every device</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How we built an AI-first culture at Ably]]></title>
            <link>https://medium.com/ably-realtime/how-we-built-an-ai-first-culture-at-ably-7eeb46893d65?source=rss----63d285882655---4</link>
            <guid isPermaLink="false">https://medium.com/p/7eeb46893d65</guid>
            <category><![CDATA[ai]]></category>
            <category><![CDATA[ai-infrastructure]]></category>
            <category><![CDATA[company-culture]]></category>
            <category><![CDATA[ably]]></category>
            <dc:creator><![CDATA[Ably Team]]></dc:creator>
            <pubDate>Fri, 20 Feb 2026 14:16:20 GMT</pubDate>
            <atom:updated>2026-02-20T14:16:21.476Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LkEKFw4rittW1VZ1aF97Lg.png" /></figure><p>Most companies talk about being “AI-first.” At Ably, we decided to actually become one. We build realtime infrastructure for AI applications. To do that credibly, we need to live and breathe AI ourselves — not just in our product, but in how we work every day.</p><p>A year ago, we began a company-wide push for AI adoption. This post breaks down how we did it: the pillars, the tooling, the MCP advantage, the early mistakes, the wins across engineering, marketing, sales, and finance, and the cultural momentum that turned a mandate into a mindset.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*D0yksfG6qZzaZvkd.png" /></figure><h3>Building an AI-first company culture</h3><p>When Jamie Newcomb, Ably’s Head of Product Operations, began championing internal AI adoption, the approach was straightforward: everyone at Ably should explore how AI could make them more effective. No exceptions.</p><p>“We might want to tone down the language,” Jamie admits with a laugh, “but it really is mandated. Everyone at Ably should be using AI to see how they can make themselves more effective. But it’s not just about doing things faster. It’s about doing things you couldn’t do before. The goal is to shift the mindset, where people stop asking ‘can AI help with this?’ and start assuming it can, then push further: what’s now possible that wasn’t?”</p><p>Today, that mandate has evolved into something far more organic. A company-wide culture where AI isn’t just accepted, it’s expected.</p><p>For a company processing <a href="https://ably.com/docs/platform/architecture/platform-scalability">2 trillion operations monthly</a>, this isn’t about following trends, it’s about credibility. It’s about walking the walk. To build <a href="https://ably.com/ai-transport">AI Transport</a> that developers can trust for agentic workloads, we need firsthand experience of how AI performs in real operational environments, both the advantages and the pitfalls.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*FpYcjWIGhJarflnt.png" /></figure><h3>Three pillars of successful AI adoption</h3><p>Ably’s approach to AI rests on three interconnected pillars:</p><ol><li><strong>Internal AI adoption and enablement</strong>: Integrating AI into workflows and processes across every team to enhance capabilities and drive productivity improvements. The goal isn’t just providing tools, it’s automating repetitive, time-consuming tasks so people can focus on strategic thinking and creative problem-solving.</li><li><strong>AI developer experience</strong>: Using AI to make Ably’s platform more discoverable and easier to use for developers. This means AI-enhanced documentation, intelligent tooling, and optimized SDK experiences, empowering developers to build real-time products faster with the help of LLMs. The goal is to position Ably as essential infrastructure for real-time user experiences powered by AI.</li><li><strong>AI product enhancement</strong>: Making proactive, explicit efforts to understand AI use cases where Ably delivers value, determining what we need to enable those use cases, and ensuring those capabilities are part of our roadmap. This pillar is about building infrastructure informed by real customer needs, both known and yet to be discovered.</li></ol><p>“My main role is about process efficiency in product engineering,” Jamie explains. “And that naturally extended to AI adoption. We believe there are significant productivity improvements we can make if everyone adopts AI thoughtfully across the company.”</p><p>These pillars aren’t separate initiatives, they’re a unified strategy. Internal productivity adoption teaches us what works in practice. Developer experience ensures we’re making Ably discoverable and easy to use for the growing number of developers building with AI. And AI product enhancement ensures we’re building infrastructure informed by real customer needs, not just theory. This article focuses primarily on the first pillar, but the three are deeply connected. What we learn from using AI internally shapes how we build for developers using AI externally.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5ZzSgI-YFc-D8K76.png" /></figure><h3>The MCP advantage</h3><p>Perhaps the most significant internal development has been Ably’s adoption of the Model Context Protocol (MCP), built over the summer of 2025.</p><p>“The Ably MCP connects all our internal tools together,” Jamie explains. “It lets people access data across systems via AI assistants. Building this and seeing it genuinely change how people work has been incredibly rewarding.”</p><p>What started as an experiment to see what was possible has grown into a company-wide platform that’s now critical to daily workflows, integrating 15+ services through over 140 tools. Engineers can check CI build status and debug workflow failures without leaving their conversation. Product managers search across Jira issues, GitHub PRs, and Slack threads in a single query. Sales teams pull Gong call transcripts and HubSpot contact history to prepare for customer meetings. The breadth is significant: GitHub, Jira, Confluence, Slack, HubSpot, Gong, Jellyfish, Metabase, PagerDuty, GSuite and more, all accessible through natural conversation.</p><p>Before MCP, every AI interaction started from zero, engineers manually explaining Ably’s infrastructure, marketers pasting in brand guidelines, constant context-switching that made AI feel like more work rather than less.</p><p>Now when an Ably employee opens Claude, they’re not starting from scratch. Through MCP, they have immediate access to:</p><ul><li>Shared context and prompt library</li><li>Company knowledge and documentation</li><li>Ably’s tone of voice guidelines and style guides</li><li>Live data from internal tools and systems</li></ul><p>Instead of “Here’s what Ably is, here’s our tone of voice, now help me write this email,” it becomes simply: “Help me write this customer email about latency improvements.” The AI already knows.</p><p>Scaling to 140+ tools created its own challenge: context limits. Ably solved this with a tool registry that lets the AI discover only what it needs for each task, keeping interactions lean and responsive.</p><p>“That context library is really important,” Jamie emphasises. “The prompts for critical workflows (like our ICP matching) are all version controlled. When something needs adjusting, it’s not about AI being wrong. It’s about iterating on what you’re asking the AI to do.”</p><p>The platform continues to evolve based on team feedback. When engineers noticed they were dropping out the terminal to check GitHub Actions builds, new workflow tools were shipped within hours. Claude Code is used heavily to maintain and extend the MCP itself, with Claude’s Agent SDK integrated throughout the development workflow. Using AI to build AI tooling is a big part of why the velocity is so high. That responsiveness, treating internal AI tooling as a living product rather than a one-off project, reflects how deeply AI has become embedded in Ably’s operating culture.</p><p>Jamie spoke at length with Jellyfish on how Ably moved beyond data retrieval to unlock real analysis and insights through MCP, and <a href="https://jellyfish.co/blog/how-ably-makes-magic-with-jellyfishs-mcp/">you can read the full article here.</a></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*SuLeShJgvutGLfeB.png" /></figure><h3>AI tool selection</h3><p>When Ably first encouraged company-wide AI adoption, the approach was deliberately open-ended. People experimented with ChatGPT, Claude, and workflow orchestration tools like N8N, Zapier, and Relay.</p><p>“We’ve settled on Claude for our primary AI, particularly Claude Code for engineers, but people have the freedom to use whatever works best for them,” Jamie says. “If someone has a strong case for a different tool, that’s fine. We’re not prescriptive about it.”</p><p>Everyone at Ably has access to Claude for day-to-day work, whether that’s drafting documents, thinking through problems, or exploring ideas. For workflow automation, Relay emerged as the orchestration layer, handling the multi-stage pipelines that power lead enrichment, ICP scoring, and sales alerts. The combination of Claude for reasoning and Relay for orchestration has become Ably’s default stack, though teams remain free to experiment.</p><p>This flexibility matters, especially given Ably’s positioning around AI Transport. “We can’t just say ‘use Claude’ when we’re building infrastructure that works with any LLM provider,” Jamie notes. “We need to show that our approach works regardless of which AI you’re using.”</p><h3>Results by team</h3><h4>Engineering</h4><p>All engineers now use Claude Code for agentic coding, but the workflows vary based on the task.</p><p>For narrow, well-defined tickets, Claude can often one-shot a solution. Engineers point it at the relevant files, describe what they want, and use test-driven development as a guardrail. Claude writes the test first, sees it fail, writes the implementation, and confirms the test passes. For larger tasks, the approach is more iterative: Claude generates a plan as a markdown file, the engineer reviews and refines it, then kicks off implementation in a fresh context with the plan as input.</p><p>Discovery is another common use case. Engineers ask Claude questions about the codebase, “where does X get used?”, “how does a message get from acceptance to being broadcast out to clients?”, using it as a way to navigate complex systems without reading through thousands of lines of code.</p><p>The Ably MCP bridges the gap between documentation and code. Engineers pull context from Confluence docs, have Claude synthesise summaries, and feed those into coding sessions, turning scattered documentation into usable implementation context. Some are experimenting with Claude Code running asynchronously in the browser, queuing up tasks from a phone and reviewing the work later.</p><p>Beyond individual workflows, Claude is integrated into the development pipeline itself. Claude’s Agent SDK is connected to GitHub to generate implementation context, review PRs, and fix CI issues before code reaches production. When a PR goes up, AI reviews it for obvious issues first, then engineers review it as they would any other colleague’s work.</p><p>One principle remains constant: a single human author owns every PR, regardless of how much was AI-generated. The practice of engineering judgment, knowing what to accept, what to push back on, and what to rewrite, is still the job.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*3U2bPj1s8OrgiiGz.png" /></figure><h4>Marketing</h4><p>The Marketing team wanted to spend more time shaping the narrative and shipping campaigns, not doing repetitive admin. There are always multiple activities in flight, each needing planning, research, execution, reporting, and analysis. That’s where AI has been a huge productivity lever: the team has adopted it to streamline the “admin” layer so they can increase both output and quality without adding headcount.</p><p>Today, the team uses a small stack of AI tools across the lifecycle. They analyse Gong calls to accelerate market research and tighten messaging and positioning. They use Claude to pull and synthesise data from multiple sources to scope and validate content opportunities faster. They also automate lead validation and categorisation for sales follow-up, enriching contact and company data so the first human touch starts from context, not guesswork. And they map the customer journey with attribution, using AI to connect what prospects do pre-signup to intent signals, so they can prioritise the right audiences and double down on what’s actually working.</p><p>For example lead qualification that used to take hours, is now a multi-stage AI pipeline that runs automatically on every signup. The system researches companies across 6+ data sources (Crunchbase, LinkedIn, SEC filings, PitchBook), extracts structured data, scores against 8 ICP criteria, classifies personas, and routes alerts to Slack with tier assignments and recommended actions — all before anyone on the team sees the lead.</p><p>“Marketing used to spend considerable time on this,” Jamie recalls. “Now the first time they see a lead, it already has a confidence-scored ICP assessment, enriched company data, and suggested next steps.”</p><h4>Sales</h4><p>New lead assignment uses multi-signal analysis (employee count, funding raised, revenue for public companies) to automatically route accounts to Commercial, Enterprise, or Strategic segments. For qualified leads, AI generates personalised email sequences based on the ICP analysis, tailoring messaging to the prospect’s industry, technical challenges, and relevant customer references.</p><p>For existing customers, AI monitors self-service accounts against usage limits, surfacing expansion opportunities when customers approach thresholds and flagging critical capacity alerts that need immediate outreach. Relay handles the orchestration across all workflows.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Xz4EC2cRrs-y08h0.png" /></figure><h4>Finance</h4><p>Finance operations at Ably are treated like a tech product, using AI as a force multiplier to engineer away repetitive work.</p><p>The team systematically verifies contracts, builds smarter revenue models, and automates reconciliation work. A recent hackathon project eliminates thousands of monthly clicks in the Stripe-to-Xero process, the kind of repetitive work that most finance teams wouldn’t know where to start automating.</p><p>They use Ably’s MCP to retrieve data from Xero, then create and update sheets directly through Claude, turning what would be manual exports and data entry into conversational requests. It’s a small example of how the platform extends beyond engineering and into every corner of the business.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*LdCPr-anpvZpEeu9.png" /></figure><h3>The cultural shift</h3><p>Creating an AI-first culture isn’t just about providing tools — it’s about enablement, support, and honest assessment of where you are versus where you’re headed.</p><p>We run AI drop-in sessions every Friday where team members can bring questions, share what they’ve built, or explore new ideas. An internal Slack channel serves as a continuous stream of AI experiments, wins, and collaborative problem-solving.</p><p>“When Charlotte [Delivery Manager] and I approach teams, we don’t even talk about AI initially,” Jamie reveals. “We ask: what are your repetitive processes? Once teams understand their processes, then you can start the AI conversation.”</p><p>“Anyone can build something now,” Jamie says. “The barrier to solving a problem has basically been removed because people can use AI to build the solution themselves.”</p><p>The result is what Jamie calls the “wow moment”: when someone successfully builds their first AI-powered solution, a ceiling lifts. “Once people have that moment, they just keep building.”</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*W1UkCsTJj5fP0BuV.png" /></figure><h3>What’s next</h3><p>But Jamie is candid about where Ably still has room to grow. “To be completely honest, we haven’t hit our potential yet,” he admits. “We’ve made real progress, but there’s still more impact to unlock from AI across how we work, our processes, and how we achieve our product outcomes. And when we think we’ve got there, there’ll still be more room to grow.”</p><p>The vision for what’s next is clear: continuing to integrate AI deeper into how Ably works. The foundations are in place: agentic coding, AI-assisted PR reviews, automated workflows across teams. But the true potential lies in making these the default across every function, not just the teams that adopted early.</p><p>“The biggest gains come from how people think, not just what tools they use,” Jamie explains. “When people stop asking ‘can AI help with this?’ and start assuming it can, that’s where the real impact comes from.”</p><p>The most significant outcome isn’t any specific tool or workflow, it’s that cultural shift in action. “We don’t have a problem at Ably where people are on the fence about whether AI can help them,” Jamie reflects. “We’ve shown that it can. Now it’s about enablement and encouraging people to identify problems they can solve themselves.”</p><p>The same infrastructure philosophy that powers our internal AI adoption powers our AI Transport product. <a href="https://ably.com/blog/evolution-of-realtime-ai">Read how Ably enables reliable, scalable realtime experiences for conversational AI here.</a></p><p><em>Originally published at </em><a href="https://ably.com/blog/building-ai-first-culture-at-ably"><em>https://ably.com</em></a><em>.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=7eeb46893d65" width="1" height="1" alt=""><hr><p><a href="https://medium.com/ably-realtime/how-we-built-an-ai-first-culture-at-ably-7eeb46893d65">How we built an AI-first culture at Ably</a> was originally published in <a href="https://medium.com/ably-realtime">Ably: Serious, serverless realtime infrastructure</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>