{"id":3078,"date":"2024-06-13T12:26:01","date_gmt":"2024-06-13T19:26:01","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/azure-sdk\/?p=3078"},"modified":"2024-06-13T12:31:21","modified_gmt":"2024-06-13T19:31:21","slug":"announcing-the-public-preview-of-the-microsoft-ai-chat-protocol-library-for-javascript","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/azure-sdk\/announcing-the-public-preview-of-the-microsoft-ai-chat-protocol-library-for-javascript\/","title":{"rendered":"Announcing the public preview of the Microsoft AI Chat Protocol library for JavaScript"},"content":{"rendered":"

We’re excited to announce the public preview of the Microsoft AI Chat Protocol library for building AI-powered frontends in JavaScript. The library and corresponding API specification are available on GitHub<\/a>.<\/p>\n

AI stands at the forefront of the tech industry’s latest innovations, causing a rapid spike in the number of technologies available for building AI applications. These technologies range from different Large Language Models (LLMs), orchestration frameworks, evaluation techniques, and design patterns for AI infrastructure such as Retrieval-Augmented Generation (RAG). While these solutions have their place in building a robust AI backend to serve users and handle complex tasks, we noticed that on the frontend, developers don’t get the same level of guidance or tooling when building applications.<\/p>\n

This diagram details these two separate workstreams for developers. It’s important to note that this diagram is intended to be a high-level example of how AI chat applications are designed today. Any implementation-specific details are intentionally abstracted away to clearly identify the two different development workstreams.<\/p>\n

One side is focused on client-side AI service consumption on the frontend in the browser, and the other is focused on the AI backend. In between the frontend and AI backend, there’s a “middle tier” endpoint that the frontend can call to access the AI backend. The diagram uses an Azure OpenAI Service-hosted model with LangChain orchestration as an example of what an AI backend can look like.<\/p>\n

\"High-level<\/a><\/p>\n

If this middle-tier endpoint adheres to the AI Chat Protocol API specification<\/a>, the frontend can use the library to get all the benefits you might be familiar with in the Azure SDK client libraries via Azure Core. These benefits include authentication, retries, HTTP pipeline management, and most importantly for this library, streaming responses, which can update your interfaces in real time. The consistent API surface enables the AI backend to be composed of different models and orchestration tools.<\/p>\n

\"With<\/a><\/p>\n

Importantly, the AI Chat Protocol API specification allows for standardization of the AI backend consumption process. That means as long as the middle-tier endpoint adheres to this specification, you can consume any AI backend in a consistent and robust way. The specification allows for flexibility around the models, orchestration tools, and architectural design patterns used on the AI backend. Additionally, this API standardization allows for a consistent way of performing evaluations on different AI backends due to a unified consumption pattern. With consistent consumption and evaluations, developers can work more on building applications and fine-tuning their AI backends for customer value instead of focusing heavily on their application architecture.<\/p>\n

Library Fundamentals<\/h2>\n

As mentioned before, because the library is built on a similar foundation as Azure Core, the process of using the library should feel familiar to Azure SDK customers.<\/p>\n

Installation<\/h3>\n

The AI Chat Protocol library is available on npm<\/a> for you to download.<\/p>\n

npm i @microsoft\/ai-chat-protocol<\/code><\/pre>\n
Usage<\/h3>\n
Once you have the library installed, you can start by creating a client object, just like other Azure SDK libraries. Next, we pass in a required endpoint when instantiating the client. This endpoint should adhere to the AI Chat Protocol API specification. If you’re using any authentication, you can also pass in your TokenCredential<\/a> here.<\/p>\n
import {\r\n    AIChatMessage,\r\n    AIChatProtocolClient,\r\n} from \"@microsoft\/ai-chat-protocol\";\r\n\r\nconst client = new AIChatProtocolClient(\"\/api\/chat\");<\/code><\/pre>\n
Once you have a client in your frontend application code, you can then send a message to your middle-tier endpoint and receive output via either the getCompletion<\/code> method for a synchronous response, or via the getStreamedCompletion<\/code> method for a streamed response to your frontend. When using the getStreamedCompletion<\/code> method, the response can include information about the role of the sender, the session state, or the content of the message. This example uses React Hooks<\/a> for handling sessionState<\/code>, which is an unknown<\/code> type passed in when calling getStreamedCompletion<\/code> in order to give the model an updated state of the conversation.<\/p>\n
\r\nconst [sessionState, setSessionState] = useState<unknown>(undefined);\r\n\r\nconst message: AIChatMessage = {\r\n    role: \"user\",\r\n    content: \"Hello World!\",\r\n};\r\n\r\nconst result = await client.getStreamedCompletion([message], {\r\n    sessionState: sessionState,\r\n});\r\n\r\nfor await (const response of result) {\r\n    if (response.sessionState) {\r\n        \/\/do something with the session state returned\r\n    }\r\n    if (response.delta.role) {\r\n        \/\/ do something with the information about the role\r\n    }\r\n    if (response.delta.content) { \r\n        \/\/ do something with the content of the message\r\n    }\r\n}<\/code><\/pre>\n
If your backend adheres to the AI Chat Protocol API specification, this starter code is all you need to get started with the AI Chat Protocol library.<\/p>\n
Summary<\/h2>\n
The Microsoft AI Chat Protocol library for JavaScript\/TypeScript provides a way for developers to consistently and easily stream AI backend responses to their applications. The AI Chat Protocol API specification creates a consistent surface for AI backend consumption and evaluations, letting developers focus on providing value in their applications instead of getting their endpoints to play nicely with one another. The AI Chat Protocol library for JavaScript\/TypeScript is available now on npm and is open-source on GitHub.<\/p>\n
Since the library is in public preview, any feedback would be appreciated. End-to-end samples are available on Azure and are located in the GitHub repo.<\/p>\n