Add AI management chat widget docs and improve formatting
Added documentation and image for the AI Management chat widget, including usage examples and JavaScript API details. Improved table formatting and consistency throughout the AI Management module documentation for better readability.
Open ABP Studio, navigate to your solution explorer, **Right Click** on the project and select **Import Module**. Choose `Volo.AIManagement` from `NuGet` tab and check the "Install this Module" checkbox. Click the "OK" button to install the module.
## Packages
This module follows the [module development best practices guide](../../framework/architecture/best-practices) and consists of several NuGet and NPM packages. See the guide if you want to understand the packages and relations between them.
@ -37,7 +36,7 @@ AI Management module packages are designed for various usage scenarios. Packages
AI Management module adds the following items to the "Main" menu:
* **AI Management**: Root menu item for AI Management module. (`AIManagement`)
* Only authorized users with that permission can access the workspace endpoints
* Users without the permission will receive an authorization error
@ -213,6 +212,7 @@ The AI Management module is designed to support various usage patterns, from sim
In this scenario, you only use the ABP Framework's AI features directly. You configure AI providers (like OpenAI) in your code and don't need any database or management UI.
**Required Packages:**
- `Volo.Abp.AI`
- Any Microsoft AI extensions (e.g., `Microsoft.Extensions.AI.OpenAI`)
@ -250,7 +250,7 @@ public class MyService
{
_chatClient = chatClient;
}
public async Task<string> GetResponseAsync(string prompt)
{
var response = await _chatClient.CompleteAsync(prompt);
@ -270,10 +270,12 @@ In this scenario, you install the AI Management module with its database layer,
@ -308,6 +310,7 @@ public class YourModule : AbpModule
**Option 2 - Dynamic Workspace (UI-based):**
No code configuration needed. Define workspaces through:
- The AI Management UI (navigate to AI Management > Workspaces)
- Data seeding in your `DataSeeder` class
@ -332,6 +335,7 @@ public class MyService
In this scenario, your application communicates with a separate AI Management microservice that manages configurations and communicates with AI providers on your behalf. The AI Management service handles all AI provider interactions.
**Required Packages:**
- `Volo.AIManagement.Client.HttpApi.Client`
**Configuration:**
@ -392,7 +396,7 @@ public class MyService
var response = await _chatService.ChatCompletionsAsync(workspaceName, request);
return response.Content;
}
// For streaming responses
public async IAsyncEnumerable<string> StreamAIResponseAsync(string workspaceName, string prompt)
{
@ -419,6 +423,7 @@ public class MyService
This scenario builds on Scenario 3, but your application exposes its own HTTP endpoints that other applications can call. Your application then forwards these requests to the AI Management service.
**Required Packages:**
- `Volo.AIManagement.Client.HttpApi.Client` (to communicate with AI Management service)
| **1. No AI Management** | No | Code | Local | Optional | Simple apps, no config management needed |
| **2. Full AI Management** | Yes | Database/UI | Local | Optional | Monoliths, services managing their own AI |
| **3. Client Remote** | No | Remote Service | Remote Service | No | Microservices consuming AI centrally |
| **4. Client Proxy** | No | Remote Service | Remote Service | Yes | API Gateway pattern, proxy services |
## Client Usage (MVC UI)
AI Management has a distinction in the naming of the packages. The `Volo.AIManagement.*` packages are for the main AI operations in the process and application itself. The `Volo.AIManagement.Client.*` packages are designed to consume the AI services from out of the application that is hosting the AI features. `Volo.AIManagement.*` packages don't expose any application service and endpoints to be consumed by default. You'll need to install the `Volo.AIManagement.Client.*` packages to both of your applications to expose the AI services and to consume the AI services to both of your applications.
The `Volo.AIManagement.Client.Web` package provides a chat widget to allow you easily integrate a chat interface into your application that uses a specific AI workspace named `ChatClientChatViewComponent`.
#### Basic Usage
You can invoke the `ChatClientChatViewComponent` Widget in your razor page with the following code:
```csharp
@await Component.InvokeAsync(typeof(ChatClientChatViewComponent), new ChatClientChatViewModel
You can use the `ConversationId` property to specify the id of the conversation to use. When the Conversation Id is provided, the chat will be stored at the client side and will be retrieved when the user revisits the page that contains the chat widget.
```csharp
@await Component.InvokeAsync(typeof(ChatClientChatViewComponent), new ChatClientChatViewModel
All the initialized components in the page is stored in the `abp.chatComponents` object. You can retrieve a specific component by its `ComponentId` which is defined while invoking the ViewComponent.
```csharp
@await Component.InvokeAsync(typeof(ChatClientChatViewComponent), new ChatClientChatViewModel
{
WorkspaceName = "mylama",
ComponentId = "mylama-chat"
})
```
You can then use the JavaScript API to interact with the component.
```js
var chatComponent = abp.chatComponents.get('mylama-chat');
```
Once you have the component, you can use the following functions to interact with it:
```js
// Switch to a different conversation
chatComponent.switchConversation(conversationId);
// Create a new conversation with a specific model
## Using Dynamic Workspace Configurations for custom requirements
The AI Management module allows you to access only configuration of a workspace without resolving pre-constructed chat client. This is useful when you want to use a workspace for your own purposes and you don't need to use the chat client.
The `IWorkspaceConfigurationStore` service is used to access the configuration of a workspace. It has multiple implementaations according to the usage scenario.
@ -463,7 +587,7 @@ public class MyService
{
// Get the configuration of the workspace that can be managed dynamically.
var configuration = await _workspaceConfigurationStore.GetAsync("MyWorkspace");
// Do something with the configuration
var kernel = Kernel.CreateBuilder()
.AddAzureOpenAIChatClient(
@ -543,24 +667,23 @@ public override void ConfigureServices(ServiceConfigurationContext context)
> [!TIP]
> For production scenarios, you may want to add validation for the factory configuration.
### Available Configuration Properties
The `ChatClientCreationConfiguration` object provides the following properties from the database:
enisn
2 months ago
