{"id":21036939,"url":"https://github.com/azurecosmosdb/cosmosdb-nosql-copilot-javascript","last_synced_at":"2025-04-12T14:22:40.998Z","repository":{"id":255393911,"uuid":"849473829","full_name":"AzureCosmosDB/cosmosdb-nosql-copilot-javascript","owner":"AzureCosmosDB","description":"Build a JavaScript copilot application with Azure OpenAI Service, Azure Cosmos DB \u0026 Azure App Service.","archived":false,"fork":false,"pushed_at":"2025-02-18T21:19:39.000Z","size":1094,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-03-26T08:51:37.544Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AzureCosmosDB.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":"SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-29T16:56:46.000Z","updated_at":"2025-02-18T21:18:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"f28ef7a0-46d8-4922-bb8d-d3f68c8e7dd4","html_url":"https://github.com/AzureCosmosDB/cosmosdb-nosql-copilot-javascript","commit_stats":null,"previous_names":["azurecosmosdb/cosmosdb-nosql-copilot-javascript"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AzureCosmosDB%2Fcosmosdb-nosql-copilot-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AzureCosmosDB%2Fcosmosdb-nosql-copilot-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AzureCosmosDB%2Fcosmosdb-nosql-copilot-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AzureCosmosDB%2Fcosmosdb-nosql-copilot-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AzureCosmosDB","download_url":"https://codeload.github.com/AzureCosmosDB/cosmosdb-nosql-copilot-javascript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578915,"owners_count":21127724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T13:23:20.029Z","updated_at":"2025-04-12T14:22:40.992Z","avatar_url":"https://github.com/AzureCosmosDB.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build a Copilot app using Azure Cosmos DB \u0026 Azure OpenAI Service\n\nThis sample application shows how to build a Generative-AI application using Azure Cosmos DB using its new vector search capabilities and Azure OpenAI Service and Semantic Kernel. The sample provides practical guidance on many concepts you will need to design and build these types of applications.\n\n---\n\n## User Experience\n- **SignUp**\n\n![no pic](./diagrams/Signin.png)\n\n- **Homepage**\n\n![no pic](./diagrams/HomePage.png)\n\n- **Add Knowlege** (drag and drop a pdf file to add knowledge later you can chat with the AI to get the knowledge) \n\n![no pic](./diagrams/AddKnowlege.png)\n\n- **Light Theme**\n\n![no pic](./diagrams/LightTheme.png)\n\n- **User Profile**\n\n![no pic](./diagrams/UserProfile.png)\n\n## Application Auth\n\nThis application is a React-based frontend that integrates with Microsoft Authentication Library (MSAL) to provide authentication using Microsoft Identity Platform (formerly known as Azure Active Directory). The application demonstrates how to sign in users and redirect authenticated users to the home page.\n\n## Concepts Covered\nThis application demonstrates the following concepts and how to implement them:\n\nThe basics of building a highly scalable Generative-AI chat application using Azure Cosmos DB for NoSQL.\n- Generating completions and embeddings using Azure OpenAI Service.\n- Managing a context window (chat history) for natural conversational - - - - interactions with an LLM.\n- Manage token consumption and payload sizes for Azure OpenAI Service requests.\n- Building a semantic cache using Azure Cosmos DB for NoSQL vector search for improved performance and cost.\n- Using the Semantic Kernel SDK for completion and embeddings generation.\n\n## Prerequisites\n\nBefore running this application, you need:\n\n- **Node.js version \u003e= 20** installed. You can download it [here](https://nodejs.org/).\n- An **Azure account**. If you don't have an Azure account, you can create a free one [here](https://azure.microsoft.com/free/).\n- Subscription access to Azure OpenAI service. Start [here](https://learn.microsoft.com/legal/cognitive-services/openai/limited-access?WT.mc_id=studentamb_225706) to Request Access to Azure OpenAI Service\n- VS Code, GitHub Codespaces or another editor to edit or view the source for this sample.\n- Azure Cosmos DB for NoSQL Vector Search Preview enrollment\n- Azure Blob Storage\n\n## Cloning and Running the Application\n\n### Step 1: Clone the repository\n\nFirst, you need to clone the repository to your local machine.\n\n```bash\ngit clone https://github.com/AzureCosmosDB/cosmosdb-nosql-copilot-javascript\ncd cosmosdb-nosql-copilot-javascript\n```\n\n### Step 2: Register the Application on Microsoft Identity Platform\n\nBefore running the app, you'll need to register the application with the Microsoft Identity Platform to authenticate users via MSAL. Follow these steps:\n\n1. **Log into Azure Portal**:\n   - Go to [Azure Portal](https://portal.azure.com/).\n   \n2. **Navigate to Azure Active Directory**:\n   - In the left-hand navigation pane, select **Microsoft Entra ID**.\n\n3. **Click Add Button**:\n   - In the dropdown select **App registration**.\n   - Fill in the required fields:\n     - **Name**: Give your app a meaningful name, e.g., `My MSAL React App`.\n     - **Supported account types**: Choose an option that fits your scenario (e.g., **Accounts in any organizational directory and personal Microsoft accounts**).\n     - **Redirect URI**: \n       - For authentication with React, the redirect URI should be of type **Single-page application (SPA)**.\n       - Set it to `https://localhost:5173`, as this is the default port when you run the app locally.\n\n4. **Configure API permissions**:\n   - In the **API permissions** section, add the following:\n     - By default, you will have **Microsoft Graph API permissions** enabled with  User.Read Permissions.\n     - This is permission is enough for this demo.\n\n5. **Client ID and Tenant ID**:\n   - After registration, you will be redirected to your app's **Overview** page.\n   - Copy the **Application (client) ID** and **Directory (tenant) ID**, as these will be required in your code.\n\n6. **Configure authentication settings**:\n   - Go to **Authentication** in the left-hand menu.\n   - Under **Platform configurations**, make sure that the SPA is added and `https://localhost:5173` is listed as a **Redirect URI**.\n   - Enable **ID tokens** under **Implicit grant and hybrid flows**.\n\n7. **Create a `.env`** file in the root directory and configure your MSAL credentials:\n\n```bash\nVITE_CLIENT_ID=your-client-id\n```\n\nReplace `your-client-id` with the values you obtained from the Azure portal.\n\n\n### Step 3: Quickstart\n\nPlease see [Quickstarts](./QUICK_START.md)\n\n\nThe application should now be running at [https://localhost:5173](https://localhost:5173).\n\n## Key Features\n\n- **Login**: Users can sign in using their Microsoft account via the MSAL authentication.\n- **Redirect on Login**: After successful login, users are redirected to the home page.\n- **Handling Login Progress**: If the login is in progress, users will be notified with a loading message.\n\n\n## Additional Resources\n\n- [MSAL.js Documentation](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-overview)\n- [Azure Portal](https://portal.azure.com/)\n- [React Documentation](https://react.dev/learn)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\nThis README provides clear instructions to clone, configure, and run the application, as well as the steps for registering the app in the Microsoft Identity Platform for authentication.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazurecosmosdb%2Fcosmosdb-nosql-copilot-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazurecosmosdb%2Fcosmosdb-nosql-copilot-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazurecosmosdb%2Fcosmosdb-nosql-copilot-javascript/lists"}