这次我们来看一个 Blazor Server 与 AI 代码生成结合的项目。对于 .NET 开发者来说Blazor Server 提供了构建现代 Web 应用的强大能力而 AI 代码生成则能显著提升开发效率。这个项目的核心就是探讨如何在 Blazor Server 应用中集成 AI 能力实现从自然语言描述到实际代码片段的自动生成。它不是某个特定的开源工具而是一个技术实践方向的探索重点在于打通前端交互、后端逻辑与大模型服务之间的链路。最值得关注的几个点包括如何设计一个简洁高效的 Blazor UI 来收集用户需求如何在后端安全、高效地调用 AI 大模型的代码生成接口以及如何将生成的代码进行格式化、验证并呈现给开发者。整个过程不涉及复杂的本地模型部署因此对硬件没有特殊要求普通开发机即可运行核心成本在于调用云端 AI 服务的 API。本文将带你从零开始构建一个具备基础代码生成功能的 Blazor Server 应用并验证其完整工作流程。1. 核心能力速览能力项说明项目类型Blazor Server 应用集成 AI 服务实践主要功能通过 Web 界面接收自然语言需求调用 AI 接口生成对应代码如 C#、HTML、CSS 等并展示结果技术栈.NET 8 Blazor Server 任意支持代码生成的 AI API如 OpenAI GPT Azure OpenAI 国内大模型 API硬件门槛无特殊要求普通开发电脑即可。核心依赖网络和 API 调用。显存/GPU不涉及本地模型推理无需 GPU。启动方式标准 .NET 应用启动dotnet run或 IDE 调试。是否支持 API是本项目本身是一个 Web 应用同时需要调用外部 AI 服务的 API。是否支持批量任务可通过扩展实现例如读取需求文件批量生成代码。适合场景.NET 开发者学习 AI 集成、快速原型构建、辅助代码片段生成、教学演示。2. 适用场景与使用边界这个实践项目主要适合以下几类开发者.NET/Blazor 开发者希望了解如何将 AI 能力融入现有技术栈构建智能应用。全栈开发者需要快速生成重复性或样板代码片段提升开发效率。技术学习者对 AI 应用开发感兴趣想通过一个具体的、可运行的项目理解前后端与 AI 服务的协作流程。它能解决的核心问题是**“需求到代码”的快速转换**。例如描述“创建一个接收用户姓名并返回欢迎信息的 C# 方法”AI 可以生成对应的方法代码。或者描述“一个带有蓝色按钮和居中标题的 HTML 页面”AI 可以生成相应的 HTML 和 CSS。需要注意的使用边界代码质量AI 生成的代码是“建议性”的可能存在逻辑错误、安全漏洞或非最佳实践必须由开发者进行审查、测试和修改后才能用于生产环境。上下文限制AI 模型有上下文长度限制无法一次性生成非常庞大或复杂的完整项目代码更适合模块、函数、组件级别的生成。依赖与成本完全依赖第三方 AI 服务的可用性和计费策略需要自行管理 API Key 和调用成本。合规与版权确保生成的代码不侵犯第三方知识产权特别是当需求描述涉及特定专利算法或商业逻辑时。3. 环境准备与前置条件在开始编码之前请确保你的开发环境满足以下要求操作系统Windows 10/11 macOS 或 Linux。.NET 支持跨平台。.NET SDK需要安装 .NET 8.0 或更高版本。你可以通过命令行dotnet --version来验证。开发 IDE可选但推荐Visual Studio 2022 (17.8) 并安装 “ASP.NET 和 Web 开发” 工作负载。Visual Studio Code 并安装 C# 扩展和 .NET 扩展包。AI 服务账户与 API Key这是本项目的关键依赖。你需要准备以下之一OpenAI API Key访问 OpenAI 平台注册并获取。Azure OpenAI Service在 Azure 门户中创建资源并获取终结点与密钥。国内大模型 API如百度文心千帆、阿里灵积、智谱 AI 等获取相应的 API Key 和调用地址。网络连接需要能够稳定访问你所选的 AI 服务 API 端点。4. 项目创建与基础结构搭建我们从一个全新的 Blazor Server 项目开始。4.1 创建 Blazor Server 项目打开终端或命令行工具执行以下命令# 创建一个名为 BlazorAICodeGenerator 的 Blazor Server 项目 dotnet new blazorserver -n BlazorAICodeGenerator # 进入项目目录 cd BlazorAICodeGenerator4.2 安装必要的 NuGet 包我们需要安装用于 HTTP 请求和 JSON 处理的包。使用 .NET CLI 安装dotnet add package Microsoft.Extensions.Http如果你的 IDE 支持 NuGet 包管理器也可以直接搜索安装。4.3 配置 AI 服务参数将 AI 服务的 API Key 和 BaseUrl 等配置存储在appsettings.json中避免硬编码。打开appsettings.json文件添加一个配置节{ Logging: { LogLevel: { Default: Information, Microsoft.AspNetCore: Warning } }, AllowedHosts: *, AIService: { // 示例OpenAI 配置 Provider: OpenAI, // 或 AzureOpenAI, BaiduQianfan 等 ApiKey: your-api-key-here, // 你的实际 API Key BaseUrl: https://api.openai.com/v1/, // OpenAI 端点 DeploymentOrModelName: gpt-4o-mini // 使用的模型名称 // 示例Azure OpenAI 配置 // Provider: AzureOpenAI, // ApiKey: your-azure-openai-key, // BaseUrl: https://your-resource.openai.azure.com/, // DeploymentOrModelName: gpt-35-turbo } }重要永远不要将真实的 API Key 提交到源代码仓库。appsettings.json中的密钥应使用本地机密管理器如dotnet user-secrets或环境变量来填充。4.4 创建 AI 服务客户端类在项目根目录创建一个Services文件夹并添加一个AICodeService.cs文件。这个服务将负责与 AI API 通信。// Services/AICodeService.cs using System.Net.Http.Json; using System.Text; using System.Text.Json; using Microsoft.Extensions.Options; namespace BlazorAICodeGenerator.Services; public class AIServiceOptions { public string? Provider { get; set; } public string? ApiKey { get; set; } public string? BaseUrl { get; set; } public string? DeploymentOrModelName { get; set; } } public interface IAICodeService { Taskstring GenerateCodeAsync(string requirement, string language); } public class AICodeService : IAICodeService { private readonly HttpClient _httpClient; private readonly AIServiceOptions _options; private readonly ILoggerAICodeService _logger; public AICodeService(HttpClient httpClient, IOptionsAIServiceOptions options, ILoggerAICodeService logger) { _httpClient httpClient; _options options.Value; _logger logger; // 根据提供商配置 HttpClient ConfigureHttpClient(); } private void ConfigureHttpClient() { _httpClient.BaseAddress new Uri(_options.BaseUrl); _httpClient.DefaultRequestHeaders.Add(Authorization, $Bearer {_options.ApiKey}); // 对于 Azure OpenAI还需要添加 API-Key 头 if (_options.Provider?.Equals(AzureOpenAI, StringComparison.OrdinalIgnoreCase) true) { _httpClient.DefaultRequestHeaders.Add(api-key, _options.ApiKey); // Azure OpenAI 的请求路径略有不同可以在发送请求时构造 } } public async Taskstring GenerateCodeAsync(string requirement, string language) { try { string requestBody; string requestUrl; // 根据不同的 AI 服务提供商构造不同的请求体和 URL switch (_options.Provider?.ToLower()) { case openai: requestUrl chat/completions; requestBody BuildOpenAIRequest(requirement, language); break; case azureopenai: // Azure OpenAI 的部署名在路径中 requestUrl $openai/deployments/{_options.DeploymentOrModelName}/chat/completions?api-version2024-02-15-preview; requestBody BuildOpenAIRequest(requirement, language); // 请求体与 OpenAI 兼容 break; // 可以在此扩展其他提供商如百度千帆、智谱等 default: throw new InvalidOperationException($Unsupported AI provider: {_options.Provider}); } var content new StringContent(requestBody, Encoding.UTF8, application/json); var response await _httpClient.PostAsync(requestUrl, content); response.EnsureSuccessStatusCode(); var jsonResponse await response.Content.ReadFromJsonAsyncJsonDocument(); return ParseAIResponse(jsonResponse); } catch (Exception ex) { _logger.LogError(ex, Error calling AI service for code generation.); return $Error: {ex.Message}; } } private string BuildOpenAIRequest(string requirement, string language) { var messages new[] { new { role system, content You are a helpful coding assistant. Generate clean, efficient, and correct code based on the users requirement. Only output the code block without any additional explanation unless explicitly asked. }, new { role user, content $Please generate {language} code for the following requirement: {requirement} } }; var request new { model _options.DeploymentOrModelName, messages messages, temperature 0.2, // 较低的温度使输出更确定适合代码生成 max_tokens 1000 }; return JsonSerializer.Serialize(request); } private string ParseAIResponse(JsonDocument? jsonResponse) { if (jsonResponse null) return Error: Empty response from AI service.; try { // 解析 OpenAI/Azure OpenAI 格式的响应 var choice jsonResponse.RootElement.GetProperty(choices)[0]; var message choice.GetProperty(message); var content message.GetProperty(content).GetString(); // 简单清理尝试提取 Markdown 代码块中的内容 if (!string.IsNullOrEmpty(content)) { // 匹配 language ... 格式 var match System.Text.RegularExpressions.Regex.Match(content, (?:\w)?\s*([\s\S]*?)\s*); if (match.Success) { return match.Groups[1].Value.Trim(); } return content.Trim(); } return No code generated.; } catch (Exception ex) { _logger.LogError(ex, Error parsing AI response.); return $Error parsing response: {ex.Message}; } } }4.5 注册服务与配置打开Program.cs文件注册我们刚刚创建的服务和配置。// Program.cs using BlazorAICodeGenerator.Services; var builder WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); // 注册 HttpClient builder.Services.AddHttpClient(); // 配置 AIServiceOptions 并从 appsettings.json 绑定 builder.Services.ConfigureAIServiceOptions( builder.Configuration.GetSection(AIService)); // 注册 AI 代码生成服务 builder.Services.AddScopedIAICodeService, AICodeService(); var app builder.Build(); // ... 以下默认配置保持不变5. 构建 Blazor 前端交互界面现在我们来创建一个简单的 UI让用户可以输入需求选择语言并查看生成的代码。5.1 修改首页Index.razor打开Pages/Index.razor文件用以下内容替换page / using BlazorAICodeGenerator.Services inject IAICodeService CodeService inject ILoggerIndex Logger PageTitleAI Code Generator/PageTitle div classcontainer mt-5 h1 classmb-4Blazor Server AI 代码生成器/h1 p classlead mb-4描述你的需求选择编程语言一键生成代码片段。/p div classrow div classcol-md-8 div classcard div classcard-header h5 classmb-0输入需求/h5 /div div classcard-body div classmb-3 label forlanguageSelect classform-label目标编程语言/框架/label select bind_selectedLanguage classform-select idlanguageSelect option valueC#C#/option option valueJavaScriptJavaScript/option option valueTypeScriptTypeScript/option option valueHTMLHTML/option option valueCSSCSS/option option valueSQLSQL/option option valuePythonPython/option option valueBlazor Component (Razor)Blazor Component (Razor)/option /select /div div classmb-3 label forrequirementText classform-label详细需求描述/label textarea bind_requirement classform-control idrequirementText rows5 placeholder例如创建一个方法接收两个整数并返回它们的和。或者一个带有圆角、悬停效果的蓝色按钮。/textarea /div div classd-grid gap-2 d-md-flex justify-content-md-end button classbtn btn-primary me-md-2 onclickGenerateCode disabled_isGenerating if (_isGenerating) { span classspinner-border spinner-border-sm me-2 rolestatus aria-hiddentrue/span span生成中.../span } else { span生成代码/span } /button button classbtn btn-outline-secondary onclickClearAll清空/button /div /div /div if (!string.IsNullOrEmpty(_errorMessage)) { div classalert alert-danger mt-3 rolealert _errorMessage /div } /div div classcol-md-4 div classcard div classcard-header h5 classmb-0示例需求/h5 /div div classcard-body p点击示例快速填充/p ul classlist-unstyled foreach (var example in _examples) { li a hrefjavascript:void(0) onclick() LoadExample(example.Language, example.Text) classtext-decoration-none smallstrong[example.Language]/strong example.Text/small /a /li } /ul /div /div /div /div if (!string.IsNullOrEmpty(_generatedCode)) { div classcard mt-4 div classcard-header d-flex justify-content-between align-items-center h5 classmb-0生成的代码/h5 div button classbtn btn-sm btn-outline-success onclickCopyToClipboard i classbi bi-clipboard/i 复制 /button /div /div div classcard-body p-0 pre classm-0code classlanguage-GetLanguageClass()_generatedCode/code/pre /div /div } /div code { private string _requirement ; private string _selectedLanguage C#; private string _generatedCode ; private string _errorMessage ; private bool _isGenerating false; // 示例需求列表 private readonly List(string Language, string Text) _examples new() { (C#, 创建一个异步方法从给定的 URL 下载字符串并处理可能的异常。), (HTML/CSS, 创建一个居中的卡片包含标题、描述和一个居中的按钮。), (JavaScript, 写一个函数验证电子邮件地址格式是否正确。), (SQL, 创建一个查询找出订单表中最近30天内金额大于100的所有订单。), (Blazor Component (Razor), 创建一个可复用的按钮组件接受 Label 和 OnClick 参数。) }; private async Task GenerateCode() { if (string.IsNullOrWhiteSpace(_requirement)) { _errorMessage 请输入需求描述。; return; } _isGenerating true; _errorMessage ; _generatedCode ; StateHasChanged(); // 触发 UI 更新显示加载状态 try { _generatedCode await CodeService.GenerateCodeAsync(_requirement, _selectedLanguage); if (_generatedCode.StartsWith(Error:)) { _errorMessage _generatedCode; _generatedCode ; } } catch (Exception ex) { Logger.LogError(ex, Code generation failed.); _errorMessage $生成失败: {ex.Message}; } finally { _isGenerating false; } } private void ClearAll() { _requirement ; _generatedCode ; _errorMessage ; } private void LoadExample(string lang, string text) { _selectedLanguage lang; _requirement text; } private async Task CopyToClipboard() { await JSRuntime.InvokeVoidAsync(navigator.clipboard.writeText, _generatedCode); // 可以添加一个短暂的“已复制”提示 } private string GetLanguageClass() { return _selectedLanguage.ToLower() switch { c# csharp, javascript javascript, typescript typescript, html html, css css, sql sql, python python, blazor component (razor) razor, _ }; } }5.2 添加客户端脚本支持复制功能为了使用JSRuntime需要在_Imports.razor文件中添加inject IJSRuntime JSRuntime但更常见的做法是在组件中直接注入。修改Index.razor顶部的注入部分page / using BlazorAICodeGenerator.Services inject IAICodeService CodeService inject IJSRuntime JSRuntime inject ILoggerIndex Logger同时为了代码高亮你可以在Pages/_Host.cshtml.NET 7 及以下或App.razor附近引入 Prism.js 或 Highlight.js。这里以简单样式替代。6. 功能测试与效果验证项目搭建完成现在启动应用进行测试。6.1 启动应用在项目根目录执行dotnet run或者使用 IDE 的调试功能。应用启动后通常会监听https://localhost:7000和http://localhost:5000。6.2 基础生成测试打开浏览器访问https://localhost:7000。选择语言在下拉框中选择 “C#”。输入需求在文本框中输入“写一个计算阶乘的递归函数”。点击生成点击“生成代码”按钮。按钮会变为“生成中...”并显示加载动画。观察结果成功情况下方“生成的代码”卡片中会显示类似以下的代码public int Factorial(int n) { if (n 1) return 1; else return n * Factorial(n - 1); }失败情况如果 API Key 错误或网络问题会在顶部显示错误信息如“Error: The remote server returned an error: (401) Unauthorized.”。6.3 多语言测试重复上述步骤测试不同语言HTML/CSS输入“一个带阴影和悬停效果的红色圆形按钮”。SQL输入“查询学生表中成绩高于平均分的学生姓名和成绩”。Blazor Component输入“创建一个显示当前时间的组件每秒更新一次”。验证要点响应速度观察从点击到收到代码的延迟这主要取决于 AI 服务的响应时间。代码质量检查生成的代码是否符合语法、是否解决了描述的需求、是否有明显的错误。错误处理尝试输入空需求或无效需求看前端验证和后端错误处理是否正常工作。6.4 接口 API 调用测试扩展我们的 Blazor 应用本身是一个服务器端应用。如果你想将其代码生成能力以 API 形式暴露给其他系统可以添加一个 Controller。添加 API Controller在项目根目录创建Controllers文件夹添加CodeGenController.cs。// Controllers/CodeGenController.cs using BlazorAICodeGenerator.Services; using Microsoft.AspNetCore.Mvc; namespace BlazorAICodeGenerator.Controllers; [ApiController] [Route(api/[controller])] public class CodeGenController : ControllerBase { private readonly IAICodeService _codeService; public CodeGenController(IAICodeService codeService) { _codeService codeService; } [HttpPost(generate)] public async TaskIActionResult GenerateCode([FromBody] CodeGenerationRequest request) { if (string.IsNullOrWhiteSpace(request.Requirement)) { return BadRequest(Requirement is required.); } try { var code await _codeService.GenerateCodeAsync(request.Requirement, request.Language); return Ok(new { generatedCode code }); } catch (Exception ex) { return StatusCode(500, $Internal server error: {ex.Message}); } } public class CodeGenerationRequest { public string Requirement { get; set; } string.Empty; public string Language { get; set; } C#; } }在Program.cs中注册控制器如果未启用builder.Services.AddControllers(); // 添加这行 // ... app.MapControllers(); // 在 app.MapBlazorHub() 前或后添加这行使用工具测试 API重启应用后使用 Postman 或 curl 测试。curl -X POST https://localhost:7000/api/codegen/generate \ -H Content-Type: application/json \ -d {requirement:Create a function to reverse a string in C#, language:C#}7. 资源占用与性能观察由于本项目不涉及本地模型推理资源消耗主要集中在 Blazor Server 应用本身和网络 I/O。CPU/内存一个典型的 Blazor Server 应用进程在空闲时内存占用约 100-200 MB在有用户交互和 AI API 调用时会有所上升主要消耗在维持 SignalR 连接和 HTTP 客户端处理上。CPU 使用率通常很低。网络 I/O性能瓶颈主要在于调用外部 AI 服务的网络延迟。一次代码生成请求的端到端时间 Blazor 前端渲染 SignalR 通信 后端处理 AI API 网络往返 AI 模型推理时间。其中 AI 模型推理时间占主导。优化方向前端添加防抖Debounce避免频繁触发生成请求。后端对HttpClient使用IHttpClientFactory以管理连接池本文示例已隐含此模式。可以考虑对常见、确定性的代码生成请求结果进行短期缓存。AI 调用选择低延迟的 AI 服务区域使用流式响应如果 AI 服务支持以提升用户体验。8. 常见问题与排查方法问题现象可能原因排查方式解决方案应用启动失败.NET SDK 版本不匹配端口被占用。查看命令行或 IDE 输出错误信息。运行dotnet --version检查。安装或升级到 .NET 8。修改Properties/launchSettings.json中的应用 URL 端口。页面打开后点击生成无反应前端 JavaScript 错误或 SignalR 连接失败。打开浏览器开发者工具F12查看 Console 和 Network 标签页。检查_Host.cshtml中 Blazor 脚本引用是否正确。确保服务端已正确启动。生成代码时报错“401 Unauthorized”AI 服务的 API Key 配置错误、过期或没有权限。检查appsettings.json或机密管理器中的ApiKey和BaseUrl是否正确。确认 AI 服务账户是否有余额或配额。更新正确的 API Key 和终结点。检查 AI 服务平台的使用状态。生成代码时报错“404 Not Found”AI 服务的请求 URL 或模型名称错误。检查AICodeService中构建的requestUrl和model/deployment名称。对照 AI 服务商的 API 文档修正请求 URL 和模型参数。生成的代码格式混乱或包含多余文本AI 模型的响应可能包含 Markdown 代码块或解释文字。查看AICodeService.ParseAIResponse方法收到的原始响应内容。完善ParseAIResponse方法中的解析逻辑更好地提取纯净代码。应用响应缓慢AI 服务 API 调用延迟高或网络状况不佳。在AICodeService中添加日志记录请求耗时。使用工具直接测试 AI API 的响应时间。考虑更换 AI 服务区域或在 UI 中添加加载提示。对于复杂需求可以提示用户耐心等待。批量生成时 API 费用激增或限流未对用户输入或调用频率做限制。监控 AI 服务的用量统计。在后端添加请求频率限制Rate Limiting。对用户输入进行长度和内容审核。考虑使用更经济的模型。9. 最佳实践与使用建议密钥管理绝对不要将 API Key 硬编码在代码中或提交到版本控制系统。始终使用 .NET 机密管理器开发环境或环境变量/Azure Key Vault生产环境。# 设置用户机密开发环境 dotnet user-secrets init dotnet user-secrets set AIService:ApiKey your-real-api-key然后在appsettings.json中保留占位符或通过Configuration直接读取。输入验证与清理在将用户需求发送给 AI 前应进行基本的清理和验证防止注入攻击或滥用。例如限制输入长度过滤敏感词汇。结果不可直接信任建立“AI 生成代码 - 开发者审查 - 人工测试 - 集成”的流程。生成的代码必须经过严格审查和测试才能使用。用户体验优化流式输出如果 AI 服务支持如 OpenAI 的流式响应可以实现代码逐字或逐行显示的效果提升体验。历史记录将用户生成的需求和代码保存到数据库如 SQLite 或 SQL Server方便查看和复用。代码高亮集成如 Highlight.js 或 Prism.js 库使生成的代码更易读。扩展方向多模型支持在服务层抽象支持快速切换 OpenAI、Claude、国内大模型等。上下文增强允许用户上传部分现有代码作为上下文让 AI 生成更贴合项目的代码。代码解释不仅生成代码还能对现有代码块进行解释、注释或重构建议。集成到 IDE将这套逻辑封装成 Visual Studio 扩展或 VS Code 插件。这个从零开始的 Blazor Server AI 代码生成项目完整演示了如何将现代 Web 框架与云端 AI 能力结合。它的最大价值在于提供了一个可运行、可扩展的样板你可以基于此快速验证想法或将其集成到更复杂的开发工具链中。最先应该验证的是你的 AI API 配置是否正确这是整个项目运转的基石。最容易踩的坑是忽略了 API 调用成本和安全问题。接下来你可以尝试为其添加身份认证、历史记录功能或者探索更复杂的提示工程Prompt Engineering来提升生成代码的质量和相关性。
)
