Update main README with more samples and also add README for in-repo …

…samples (#56)

* update READMEs for package and main library

* update main README and add samples README

README.md

@@ -71,12 +71,21 @@ for await (const response of result) {
 
 ## Samples on Azure
 
-If you're curious on end-to-end samples hosted on Azure, the following samples utilize the AI Chat Protocol SDK on the frontend:
+If you're curious on samples hosted on Azure, the following samples utilize the AI Chat Protocol SDK on the frontend:
 
 * [Serverless AI Chat with RAG using LangChain.js](https://github.com/Azure-Samples/serverless-chat-langchainjs)
 * [Chat Application using Azure OpenAI (Python)](https://github.com/Azure-Samples/openai-chat-app-quickstart)
 * [OpenAI Chat Application with Microsoft Entra Authentication (Python) - Local](https://github.com/Azure-Samples//openai-chat-app-entra-auth-local)
 * [OpenAI Chat Application with Microsoft Entra Authentication (Python) - Builtin](https://github.com/Azure-Samples/openai-chat-app-entra-auth-builtin)
+* [OpenAI Chat App Frontend (Vanilla JS)](https://github.com/Azure-Samples/openai-chat-frontend-vanillajs)
+* [Chat Application using Azure OpenAI (Python)](https://github.com/Azure-Samples/openai-chat-app-quickstart)
+
+Additionally, many Azure AI sample projects utilize the AI Chat Protocol API spec without the SDK, either because they don't have a frontend, or because they were made before the library's release:
+
+* [ChatGPT + Enterprise data with Azure OpenAI and AI Search in Python](https://github.com/Azure-samples/azure-search-openai-demo)
+* [ChatGPT + Enterprise data with Azure OpenAI and Azure AI Search in JavaScript](https://github.com/Azure-samples/azure-search-openai-javascript)
+* [Chat with GPT Modes - FastAPI backend](https://github.com/Azure-Samples/openai-chat-backend-fastapi)
+* [Evaluating a RAG Chat App](https://github.com/Azure-Samples/ai-rag-chat-evaluator)
 
 ## Code of Conduct
 

samples/README.md

@@ -0,0 +1,33 @@
+# Microsoft AI Chat Protocol Samples
+
+> This directory contains basic starters for using the AI Chat Protocol. If you're interested in more in-depth, end-to-end samples hosted on Azure, visit this [link](https://aka.ms/aichat/templates).
+
+If you'd like to run the samples, follow these steps:
+
+## Frontend
+
+1. Clone the repository to your machine.
+1. In one terminal, navigate to the `frontend` directory.
+1. In the `frontend` directory, run `npm install` to install your dependencies, including [`@microsoft/ai-chat-protocol`](https://www.npmjs.com/package/@microsoft/ai-chat-protocol).
+1. Next, run `npm run dev` to start your web application.
+
+## Backend
+
+The backend directory has both a .NET and a JavaScript (Express) backend sample. Follow the steps below for the sample you'd like to run.
+
+### .NET (with Semantic Kernel)
+
+1. In one terminal, navigate to the `backend/csharp` directory.
+2. Set the following environment variables:
+    1. UseAzureOpenAI - either `true` or `false`
+        1. If using Azure OpenAI, set your `AzureDeployment` and `AzureEndpoint` according to this [guide](https://learn.microsoft.com/en-us/azure/ai-services/openai/quickstart?tabs=command-line%2Cpython-new&pivots=programming-language-python#retrieve-key-and-endpoint).
+        2. Sign into Azure using the Azure CLI (`az login`) or Azure Developer CLI (`azd auth login`).
+    2. If you're using OpenAI (*not* Azure OpenAI), set the environment variables `APIKey` and `Model`.
+3. Next, run `dotnet restore` to restore your dependencies and `dotnet run` to run the backend.
+
+### JavaScript (Express)
+
+1. In one terminal, navigate to the `backend/js` directory.
+2. In the `.env` file, update `AZURE_OPENAI_ENDPOINT` and `AZURE_OPENAI_DEPLOYMENT` according to this [guide](https://learn.microsoft.com/en-us/azure/ai-services/openai/quickstart?tabs=command-line%2Cpython-new&pivots=programming-language-python#retrieve-key-and-endpoint).
+3. Run `npm install` to install your dependencies.
+4. Run `npm run dev` to run the backend.

sdk/js/packages/client/README.md

@@ -1,6 +1,6 @@
 # Microsoft AI Chat Protocol SDK
 
-The Microsoft AI Chat Protocol is a library for easily building AI Chat interfaces.
+The Microsoft AI Chat Protocol library allows you to easily build AI Chat interfaces.
 
 *Note: we are currently in public preview. Your feedback is greatly appreciated as we get ready to be generally available!*
 
@@ -10,14 +10,56 @@ With the AI Chat Protocol, you will be able to:
 * Consume LLM-powered deployed inference backends and middle tiers with ease, either synchronously or by streaming
 * Easily incorporate HTTP middleware for logging, authentication, and more.
 
-The AI Chat Protocol SDK is designed to easily consume AI backends that conform to the [AI Chat Protocol API](https://github.com/Azure-Samples/ai-chat-app-protocol) without any additional code. By agreeing on a standard API contract, server-side code becomes modular and the AI backend consumption process remains the same on the client-side.
+The AI Chat Protocol SDK is designed to easily consume AI backends that conform to the [AI Chat Protocol API](aka.ms/chatprotocol) without any additional code. By agreeing on a standard API contract, server-side code becomes modular and the AI backend consumption process remains the same on the client-side.
 
 ## Getting Started
 
-Our getting started guides are coming soon! For now, you can check out the [samples](/sdk/js/samples) directory.
+Our comprehensive getting started guide is coming soon! Be sure to check out the samples and API specification for more details.
+
+* [Samples](https://github.com/microsoft/ai-chat-protocol/tree/main/samples)
+* [API Specification](https://aka.ms/chatprotocol)
+* [Samples on Azure](https://github.com/microsoft/ai-chat-protocol/tree/main?tab=readme-ov-file#samples-on-azure)
 
 To take a look locally, install the library via npm:
 
 ```bash
 npm install @microsoft/ai-chat-protocol
 ```
+
+Create the client object:
+
+```javascript
+const client = new AIChatProtocolClient("/api/chat");
+```
+
+Stream completions to your UI:
+
+```javascript
+let sessionState = undefined;
+
+// add any logic to handle state here
+function setSessionState(value) {
+    sessionState = value;
+}
+
+const message: AIChatMessage = {
+    role: "user",
+    content: "Hello World!",
+};
+
+const result = await client.getStreamedCompletion([message], {
+    sessionState: sessionState,
+});
+
+for await (const response of result) {
+    if (response.sessionState) {
+        //do something with the session state returned
+    }
+    if (response.delta.role) {
+        // do something with the information about the role
+    }
+    if (response.delta.content) { 
+        // do something with the content of the message
+    }
+}
+```