Skip to content

Commit

Permalink
Merge branch 'main' into feature-better-auth
Browse files Browse the repository at this point in the history
  • Loading branch information
@dehoward
dehoward committed Aug 7, 2023
2 parents 408f580 + 10c5ee9 commit f644b37
Show file tree
Hide file tree
Showing 5 changed files with 616 additions and 602 deletions.
73 changes: 43 additions & 30 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Chat Copilot Sample Application

This sample allows you to build your own integrated large language model (LLM) chat copilot. The sample is built on Microsoft Semantic Kernel and has two applications: a front-end web UI app and a back-end API server.
This sample allows you to build your own integrated large language model (LLM) chat copilot. The sample is built on Microsoft Semantic Kernel and has two components: a frontend [React web app](./webapp/) and a backend [.NET web API service](./webapi/).

These quick-start instructions run the sample locally. To deploy the sample to Azure, please view [Deploying Chat Copilot](https://github.com/microsoft/chat-copilot/blob/main/deploy/README.md).

Expand All @@ -13,27 +13,28 @@ These quick-start instructions run the sample locally. To deploy the sample to A
# Requirements
You will need the following items to run the sample:

**Frontend App -** The web UI application will run on Azure.

- [.NET 7.0 SDK](https://dotnet.microsoft.com/download/dotnet/7.0) _(via Setup script)_
- [Node.js](https://nodejs.org/en/download) _(via Setup script)_
- [Yarn](https://classic.yarnpkg.com/docs/install) _(via Setup script)_
- [Azure account](https://azure.microsoft.com/free)
- [Azure AD Tenant](https://learn.microsoft.com/azure/active-directory/develop/quickstart-create-new-tenant)
- [Registered application](https://learn.microsoft.com/azure/active-directory/develop/quickstart-register-app#register-an-application)
- Under `Supported account types`: Select "_Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)_"
- Under `Redirect URI (optional)`: Select `Single-page application (SPA)` and set the URI to `http://localhost:3000`.
- [Application (client) ID](https://learn.microsoft.com/azure/active-directory/develop/quickstart-register-app#register-an-application)

**Backend API -** Requirements depend on your AI Service choice.
- AI Service

| AI Service | Item |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Azure OpenAI | - [Access](https://aka.ms/oai/access)<br>- [Resource](https://learn.microsoft.com/azure/ai-services/openai/how-to/create-resource?pivots=web-portal#create-a-resource)<br>- [Deployed model](https://learn.microsoft.com/azure/ai-services/openai/how-to/create-resource?pivots=web-portal#deploy-a-model) (`gpt-35-turbo`) <br>- [Endpoint](https://learn.microsoft.com/azure/ai-services/openai/tutorials/embeddings?tabs=command-line#retrieve-key-and-endpoint) (e.g., `http://contoso.openai.azure.com`)<br>- [API key](https://learn.microsoft.com/azure/ai-services/openai/tutorials/embeddings?tabs=command-line#retrieve-key-and-endpoint) |
| OpenAI | - [Account](https://platform.openai.com)<br>- [API key](https://platform.openai.com/account/api-keys) |
| AI Service | Requirement |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Azure OpenAI | - [Access](https://aka.ms/oai/access)<br>- [Resource](https://learn.microsoft.com/azure/ai-services/openai/how-to/create-resource?pivots=web-portal#create-a-resource)<br>- [Deployed models](https://learn.microsoft.com/azure/ai-services/openai/how-to/create-resource?pivots=web-portal#deploy-a-model) (`gpt-35-turbo` and `text-embedding-ada-002`) <br>- [Endpoint](https://learn.microsoft.com/azure/ai-services/openai/tutorials/embeddings?tabs=command-line#retrieve-key-and-endpoint)<br>- [API key](https://learn.microsoft.com/azure/ai-services/openai/tutorials/embeddings?tabs=command-line#retrieve-key-and-endpoint) |
| OpenAI | - [Account](https://platform.openai.com)<br>- [API key](https://platform.openai.com/account/api-keys) |

# Instructions
## Register an application
1. Follow [these instructions](https://learn.microsoft.com/azure/active-directory/develop/quickstart-register-app) and use the values below:
- `Supported account types`: "_Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)_"
- `Redirect URI (optional)`: _Single-page application (SPA)_ and use _http://localhost:3000_.
2. Take note of the `Application (client) ID`. Chat Copilot will use this ID for authentication.

# Setup Instructions
## Windows
1. Open PowerShell as an administrator.
2. Configure environment.
2. Setup your environment.

```powershell
cd <path to chat-copilot>\scripts\
Expand All @@ -44,7 +45,7 @@ You will need the following items to run the sample:
3. Configure Chat Copilot.
```powershell
```powershell
.\Configure.ps1 -AIService {AI_SERVICE} -APIKey {API_KEY} -Endpoint {AZURE_OPENAI_ENDPOINT} -ClientId {AZURE_APPLICATION_ID}
```
Expand All @@ -53,21 +54,27 @@ You will need the following items to run the sample:
- `AZURE_OPENAI_ENDPOINT`: The Azure OpenAI resource `Endpoint` address. Omit `-Endpoint` if using OpenAI.
- `AZURE_APPLICATION_ID`: The `Application (client) ID` associated with the registered application.
- > (Optional): To set a specific Tenant Id, use the parameter:
- (Optional): To set a specific Tenant Id, use the parameter:
```powershell
-TenantId {TENANT_ID}
```
- > **IMPORTANT:** For `AzureOpenAI`, if you deployed models `gpt-35-turbo` and `text-embedding-ada-002` with custom names (instead of each own's given name), also use the parameters:
```powershell
-CompletionModel {DEPLOYMENT_NAME} -EmbeddingModel {DEPLOYMENT_NAME} -PlannerModel {DEPLOYMENT_NAME}
```
4. Run Chat Copilot locally. This step starts both the backend API and frontend application.
```powershell
.\Start.ps1
```
> **IMPORTANT:** Confirm pop-ups are not blocked and you are logged in with the same account used to register the application.
> **NOTE:** It may take a few minutes for Yarn packages to install on the first run.
It may take a few minutes for Yarn packages to install on the first run.
> NOTE: Confirm pop-ups are not blocked and you are logged in with the same account used to register the application.
## Linux/macOS
1. Open Bash as an administrator.
Expand Down Expand Up @@ -97,30 +104,36 @@ You will need the following items to run the sample:
3. Configure Chat Copilot.
```bash
./Configure.sh --aiservice {AI_SERVICE} --apikey {API_KEY} --endpoint {AZURE_OPENAI_ENDPOINT} --clientid {AZURE_APPLICATION_ID}
./Configure.sh --aiservice {AI_SERVICE} --apikey {API_KEY} --endpoint {AZURE_OPENAI_ENDPOINT} --clientid {AZURE_APPLICATION_ID}
```
- `AI_SERVICE`: `AzureOpenAI` or `OpenAI`.
- `API_KEY`: The `API key` for Azure OpenAI or for OpenAI.
- `AZURE_OPENAI_ENDPOINT`: The Azure OpenAI resource `Endpoint` address. Omit `--endpoint` if using OpenAI.
- `AZURE_APPLICATION_ID`: The `Application (client) ID` associated with the registered application.
- > (Optional): To set a specific Tenant Id, use the parameter:
- (Optional): To set a specific Tenant Id, use the parameter:
```bash
--tenantid {TENANT_ID}
```
- > **IMPORTANT:** For `AzureOpenAI`, if you deployed models `gpt-35-turbo` and `text-embedding-ada-002` with custom names (instead of each own's given name), also use the parameters:
```bash
--completionmodel {DEPLOYMENT_NAME} --embeddingmodel {DEPLOYMENT_NAME} --plannermodel {DEPLOYMENT_NAME}
```
4. Run Chat Copilot locally. This step starts both the backend API and frontend application.
```bash
./Start.sh
```
> **IMPORTANT:** Confirm pop-ups are not blocked and you are logged in with the same account used to register the application.
It may take a few minutes for Yarn packages to install on the first run.
> NOTE: Confirm pop-ups are not blocked and you are logged in with the same account used to register the application.
> **NOTE:** It may take a few minutes for Yarn packages to install on the first run.
## (Optional) Enable backend authorization via Azure AD
1. Ensure you created the required application registration mentioned in [Start the WebApp FrontEnd application](#start-the-webapp-frontend-application)
Expand All @@ -140,7 +153,7 @@ You will need the following items to run the sample:
1. This will generate an `api://` URI with a generated for you
2. Click *Save* to store the generated URI
3. Add a scope for `access_as_user`
1. Click *Add scope*
Expand Down Expand Up @@ -176,15 +189,15 @@ You will need the following items to run the sample:
1. Open *appsettings.json*
2. Set the value of `Authorization:AzureAd:Audience` to your application ID URI
# Troubleshooting
1. **_Issue:_** Unable to load chats.
_Details_: interaction_in_progress: Interaction is currently in progress._
_Explanation_: The WebApp can display this error when the application is configured for a different AAD tenant from the browser, (e.g., personal/MSA account vs work/school account).
_Solution_: Either use a private/incognito browser tab or clear your browser credentials/cookies. Confirm you are logged in with the same account used to register the application.
2. **_Issue:_**: Challenges using text completion models, such as `text-davinci-003`
Expand All @@ -197,9 +210,9 @@ You will need the following items to run the sample:
![Cert-Issue](https://github.com/microsoft/chat-copilot/assets/64985898/e9072af1-e43c-472d-bebc-d0082d0c9180)
_Explanation_: Your browser may be blocking the frontend access to the backend while waiting for your permission to connect.
_Solution_:
1. Confirm the backend service is running. Open a web browser and navigate to `https://localhost:40443/healthz`
- You should see a confirmation message: `Healthy`
- If your browser asks you to acknowledge the risks of visiting an insecure website, you must acknowledge this before the frontend can connect to the backend server.
Expand Down
6 changes: 3 additions & 3 deletions scripts/Configure.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ while [[ $# -gt 0 ]]; do
shift
shift
;;
--completion)
--completionmodel)
COMPLETION_MODEL="$2"
shift
shift
;;
--embedding)
--embeddingmodel)
EMBEDDING_MODEL="$2"
shift
shift
;;
--planner)
--plannermodel)
PLANNER_MODEL="$2"
shift
shift
Expand Down
6 changes: 3 additions & 3 deletions webapi/CopilotChatWebApi.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,17 +51,17 @@
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

<PackageReference Include="Roslynator.Analyzers" Version="4.3.0">
<PackageReference Include="Roslynator.Analyzers" Version="4.4.0">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

<PackageReference Include="Roslynator.CodeAnalysis.Analyzers" Version="4.3.0">
<PackageReference Include="Roslynator.CodeAnalysis.Analyzers" Version="4.4.0">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>

<PackageReference Include="Roslynator.Formatting.Analyzers" Version="4.3.0">
<PackageReference Include="Roslynator.Formatting.Analyzers" Version="4.4.0">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
Expand Down
10 changes: 5 additions & 5 deletions webapp/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"dependencies": {
"@azure/msal-browser": "^2.32.1",
"@azure/msal-react": "^1.5.1",
"@fluentui/react-components": "^9.26.2",
"@fluentui/react-components": "^9.27.4",
"@fluentui/react-icons": "^2.0.209",
"@fluentui/react-northstar": "^0.66.4",
"@microsoft/signalr": "^7.0.5",
Expand All @@ -32,12 +32,12 @@
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@types/debug": "^4.1.7",
"@types/node": "^20.4.4",
"@types/react": "^18.0.28",
"@types/react": "^18.2.18",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^6.2.0",
"@typescript-eslint/parser": "^6.2.0",
"@typescript-eslint/eslint-plugin": "^6.2.1",
"@typescript-eslint/parser": "^6.2.1",
"eslint": "^8.46.0",
"prettier": "^3.0.0",
"prettier": "^3.0.1",
"react-scripts": "^5.0.1",
"serve": "^14.2.0",
"typescript": "5.1.6"
Expand Down
Loading

0 comments on commit f644b37

Please sign in to comment.