radzen-blazor/RadzenBlazorDemos/Pages/AI.razor

@page "/ai"

<PageTitle>Blazor AI Components — Chat, MCP Server & IDE Integration</PageTitle>

<HeadContent>
    <meta name="description" content="Add AI to your Blazor apps with RadzenAIChat and Radzen Blazor MCP. Built-in chat UI and a cloud-hosted MCP server for Cursor, Claude Code, GitHub Copilot, JetBrains, and other MCP-capable IDEs.">
</HeadContent>

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor AI Components
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Radzen.Blazor includes built-in AI capabilities, and we also provide a cloud-hosted MCP server that gives AI coding assistants access to Radzen Blazor documentation and templates.
</RadzenText>
<RadzenStack Gap="3rem">
<RadzenRow AlignItems="AlignItems.Center" class="rz-my-6">
    <RadzenColumn Size="12" SizeLG="6" Order="2">
        <RadzenStack Gap="1.5rem" AlignItems="AlignItems.Start">
            <RadzenText TextStyle="TextStyle.DisplayH3" Text="RadzenAIChat" TagName="TagName.H2"></RadzenText>
            <RadzenText>
                <strong>RadzenAIChat</strong> is a Blazor-native chat component that integrates with any OpenAI-compatible service (OpenAI, Azure OpenAI, local servers, or third-party providers).
            </RadzenText>
            <RadzenStack Gap="1rem">
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenIcon Icon="task_alt" />
                    <RadzenText>Works with any OpenAI API-compatible endpoint</RadzenText>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenIcon Icon="task_alt" />
                    <RadzenText>Supports streaming, theming, message history, and extensibility</RadzenText>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenIcon Icon="task_alt" />
                    <RadzenText>Ideal for embedding AI assistants directly into your Blazor apps</RadzenText>
                </RadzenStack>
            </RadzenStack>
            <RadzenLink Text="RadzenAIChat live demo" Path="/aichat" class="rz-button rz-button-lg rz-variant-outlined rz-primary rz-shade-default rz-w-auto rz-w-lg-100 rz-text-align-center rz-my-4" Style="--rz-link-hover-text-decoration: none;"></RadzenLink>
        </RadzenStack>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeLG="5" SizeXL="4" Order="1" class="rz-text-align-center">
        <RadzenCard Variant="Variant.Flat" class="rz-background-color-success-lighter rz-color-black rz-p-12 rz-w-fit-content rz-max-w-100" Style="min-width: 10vh; border-radius: 50%; margin: 0 auto;">
            <RadzenIcon Icon="chat" Style="font-size: 10vh; font-weight: 300;" class="rz-m-12" />
        </RadzenCard>
    </RadzenColumn>
</RadzenRow>
<RadzenRow AlignItems="AlignItems.Center" class="rz-my-6" ID="special-offer">
    <RadzenColumn Size="12" SizeLG="6" Order="2">
        <RadzenStack Gap="1.5rem" AlignItems="AlignItems.Start">
            <RadzenText TextStyle="TextStyle.DisplayH3" Text="Radzen Blazor MCP" TagName="TagName.H2"></RadzenText>
            <RadzenText>
                <strong>Radzen Blazor MCP</strong> is a cloud-hosted <strong>Model Context Protocol (MCP)</strong> server that gives AI coding assistants real-time access to Radzen Blazor component documentation, APIs, and templates.
            </RadzenText>
            <RadzenText>
                No packages to install — works with Cursor, Claude Code, GitHub Copilot, JetBrains, Windsurf, and other MCP-capable tools.
            </RadzenText>
            <RadzenStack Gap="1rem">
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenIcon Icon="task_alt" />
                    <RadzenText>Component API docs, ready-made templates, and usage guides for 110+ components</RadzenText>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenIcon Icon="task_alt" />
                    <RadzenText>Semantic search over complete Radzen Blazor documentation — always up to date</RadzenText>
                </RadzenStack>
                <RadzenStack Orientation="Orientation.Horizontal">
                    <RadzenIcon Icon="task_alt" />
                    <RadzenText>Free trial available — unlimited access included with Radzen Blazor Pro and Team subscriptions</RadzenText>
                </RadzenStack>
            </RadzenStack>
            <RadzenLink Text="Learn more about Radzen Blazor MCP" Path="https://www.radzen.com/blazor-mcp/" class="rz-button rz-button-lg rz-variant-outlined rz-primary rz-shade-default rz-w-auto rz-w-lg-100 rz-text-align-center rz-my-4" Style="--rz-link-hover-text-decoration: none;"></RadzenLink>
        </RadzenStack>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeLG="5" SizeXL="4" Order="1" class="rz-text-align-center">
        <RadzenCard Variant="Variant.Flat" class="rz-background-color-primary-lighter rz-p-12 rz-w-fit-content rz-max-w-100" Style="min-width: 10vh; border-radius: 50%; margin: 0 auto;">
            <RadzenImage Path="images/mcp.svg" Style="width: 10vh;" class="rz-m-12" AlternateText="Model Context Protocol (MCP)" />
        </RadzenCard>
    </RadzenColumn>
</RadzenRow>
</RadzenStack>