Ant Design X of Blazor

Following the Ant Design specification, we developed a Blazor UI library Ant Design X of Blazor that crafts AI-driven interfaces with Blazor, seamlessly integrating smart chat components and API services at your fingertips.

+

✨ Features

  • 🌈 Derived from Best Practices of Enterprise-Level AI Products: Built on the RICH interaction paradigm, delivering an exceptional AI interaction experience.
  • 🧩 Flexible and Diverse Atomic Components: Covers most AI dialogue scenarios, empowering you to quickly build personalized AI interaction interfaces.
  • ⚡ Out-of-the-Box Model Integration: Easily connect with inference services compatible with OpenAI standards.
  • 🔄 Efficient Management of Conversation Data Flows: Provides powerful tools for managing data flows, enhancing development efficiency.
  • 📦 Rich Template Support: Offers multiple templates for quickly starting Blazor AI application development.
  • 🛡 Complete C# Support: Developed with C#, ensuring robust type coverage to improve the development experience and reliability.
  • 🎨 Advanced Theme Customization: Supports fine-grained style adjustments to meet diverse use cases and personalization needs.

📦 Installation

Using NuGet

We recommend using NuGet package manager for installation, it not only makes development easier, but also allows you to take advantage of the rich ecosystem of .NET packages and tooling.

dotnet add package AntDesign.X

If you're using Visual Studio, you can also install it through the NuGet Package Manager GUI.

Project Setup

In your Blazor project, register the services in Program.cs:

builder.Services.AddAntDesignX();

Add the namespace in _Imports.razor:

@using AntDesign.X

Add the stylesheet reference in wwwroot/index.html (WebAssembly) or Pages/_Host.cshtml (Server):

<link href="_content/AntDesign.X/css/ant-design-x.css" rel="stylesheet" />

🧩 Atomic Components

Based on the RICH interaction paradigm, we provide numerous atomic components for various stages of interaction to help you flexibly build your AI dialogue applications:

  • General: Bubble - Message bubble, Conversations - Conversation management
  • Wake-Up: Welcome - Welcome messages, Prompts - Prompt sets
  • Expression: Sender - Input box, Attachment - Attachments, Suggestion - Quick commands
  • Confirmation: ThoughtChain - Thought chains

Below is an example of using atomic components to create a simple chatbot interface:

@page "/chat"

<div>
    <BubbleList Items="messages" />
    <Sender OnSubmit="HandleSubmit" />
</div>

@code {
    private List<Message> messages = new()
    {
        new Message
        {
            Content = "Hello, Ant Design X!",
            Role = "user"
        }
    };

    private void HandleSubmit(string text)
    {
        // Handle submission logic
    }
}

⚡️ Connecting to Model Inference Services

We provide the XAgent service to help you easily connect with model inference services that adhere to OpenAI standards.

Here's an example of using XAgent:

@page "/chat"
@inject IXAgent Agent

<Sender OnSubmit="ChatRequest" />

@code {
    private async Task ChatRequest(string text)
    {
        await Agent.RequestAsync(new RequestOptions
        {
            Messages = new[]
            {
                new Message
                {
                    Content = text,
                    Role = "user"
                }
            },
            Stream = true
        });
    }
}

Configure the service in Program.cs:

builder.Services.AddXAgent(options =>
{
    options.BaseURL = "https://your.api.host";
    options.Model = "gpt-3.5";
});

🔄 Efficient Management of Data Flows

Using the XChat service, you can easily manage data flows in AI dialogue applications:

@page "/chat"
@inject IXChat Chat

<div>
    <BubbleList Items="Chat.Messages" />
    <Sender OnSubmit="Chat.OnRequest" />
</div>

Component References

AntDesign.X supports referencing components on-demand. Only include the components you need to use.

Companies Using Ant Design X of Blazor

We look forward to your adoption of Ant Design X of Blazor. If your company or products are using Ant Design X of Blazor, feel free to leave a comment here.

Contributing

Please read our CONTRIBUTING.md first.

If you'd like to help us improve Ant Design X of Blazor, just create a Pull Request. Feel free to report bugs and issues here.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way and How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Need Help?

If you encounter any issues while using Ant Design X of Blazor, you can seek help through the following channels. We also encourage experienced users to assist newcomers via these platforms.

When asking questions on GitHub Discussions, it's recommended to use the Q&A tag.

  1. GitHub Discussions
  2. GitHub Issues
Getting Started