$npx -y skills add OthmanAdi/openui-forge --skill openui-forge-csharpOpenUI generative UI with C# ASP.NET Core Minimal API backend. Direct OpenAI API SSE streaming via HttpClient on .NET 10.
| 1 | # OpenUI Forge — C# |
| 2 | |
| 3 | Build generative UI apps with a React frontend + C# backend. Streams OpenAI API responses directly via an ASP.NET Core Minimal API (.NET 10 LTS) using `HttpClient`. |
| 4 | |
| 5 | ## Activation Triggers |
| 6 | |
| 7 | - "openui csharp", "openui c#", "openui dotnet", "openui aspnet" |
| 8 | - "generative ui csharp", "c# streaming ui backend", "asp.net core openui" |
| 9 | |
| 10 | ## Prerequisites |
| 11 | |
| 12 | - Node.js >= 22 (24 LTS recommended) + React >= 18.3.1 (19+ recommended) (frontend) |
| 13 | - .NET SDK 10.0 (backend; .NET 10 is the current LTS, supported until Nov 2028. .NET 8 LTS also works but reaches end of support Nov 2026.) |
| 14 | - `OPENAI_API_KEY` environment variable set |
| 15 | |
| 16 | ## Quick Start |
| 17 | |
| 18 | 1. Create the React frontend and install OpenUI deps: |
| 19 | ```bash |
| 20 | npm install @openuidev/react-ui @openuidev/react-headless @openuidev/react-lang lucide-react zod |
| 21 | ``` |
| 22 | 2. Generate the system prompt: |
| 23 | ```bash |
| 24 | npx @openuidev/cli generate ./src/lib/library.ts --out backend/system-prompt.txt |
| 25 | ``` |
| 26 | 3. Create the C# backend (see Full Code below) |
| 27 | 4. Run: `dotnet run` on `:5000`, frontend on `:3000` |
| 28 | |
| 29 | ## Full Code |
| 30 | |
| 31 | ### Backend: `backend/openui-backend.csproj` |
| 32 | |
| 33 | ```xml |
| 34 | <Project Sdk="Microsoft.NET.Sdk.Web"> |
| 35 | <PropertyGroup> |
| 36 | <TargetFramework>net10.0</TargetFramework> |
| 37 | <Nullable>enable</Nullable> |
| 38 | <ImplicitUsings>enable</ImplicitUsings> |
| 39 | </PropertyGroup> |
| 40 | </Project> |
| 41 | ``` |
| 42 | |
| 43 | > No NuGet packages required. ASP.NET Core, `HttpClient`/`IHttpClientFactory`, and `System.Text.Json` all ship in the .NET 10 shared framework referenced by `Microsoft.NET.Sdk.Web`. |
| 44 | |
| 45 | ### Backend: `backend/Program.cs` |
| 46 | |
| 47 | ```csharp |
| 48 | using System.Text; |
| 49 | using System.Text.Json; |
| 50 | using System.Text.Json.Serialization; |
| 51 | |
| 52 | var builder = WebApplication.CreateBuilder(args); |
| 53 | |
| 54 | // Pooled, correctly-disposed HttpClient instances. Infinite timeout because |
| 55 | // this is a long-lived streaming proxy; client disconnects cancel the request. |
| 56 | builder.Services.AddHttpClient("openai", client => |
| 57 | { |
| 58 | client.Timeout = Timeout.InfiniteTimeSpan; |
| 59 | }); |
| 60 | |
| 61 | // CORS: lock to the configured frontend origin. Do NOT use AllowAnyOrigin — |
| 62 | // a wildcard would let any site call this backend and burn your API key. |
| 63 | var frontendOrigin = |
| 64 | Environment.GetEnvironmentVariable("FRONTEND_ORIGIN") ?? "http://localhost:3000"; |
| 65 | |
| 66 | builder.Services.AddCors(options => |
| 67 | { |
| 68 | options.AddDefaultPolicy(policy => |
| 69 | policy.WithOrigins(frontendOrigin) |
| 70 | .WithMethods("POST", "OPTIONS") |
| 71 | .AllowAnyHeader()); |
| 72 | }); |
| 73 | |
| 74 | var app = builder.Build(); |
| 75 | |
| 76 | app.UseCors(); |
| 77 | |
| 78 | // Load the generated system prompt ONCE at startup; fail fast if missing. |
| 79 | var promptPath = Path.Combine(Directory.GetCurrentDirectory(), "system-prompt.txt"); |
| 80 | if (!File.Exists(promptPath)) |
| 81 | { |
| 82 | throw new FileNotFoundException( |
| 83 | "system-prompt.txt not found. Generate it with: " + |
| 84 | "npx @openuidev/cli generate ./src/lib/library.ts --out system-prompt.txt", |
| 85 | promptPath); |
| 86 | } |
| 87 | var systemPrompt = await File.ReadAllTextAsync(promptPath); |
| 88 | |
| 89 | var apiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY"); |
| 90 | var baseUrl = (Environment.GetEnvironmentVariable("OPENAI_BASE_URL") ?? "https://api.openai.com/v1") |
| 91 | .TrimEnd('/'); |
| 92 | var model = Environment.GetEnvironmentVariable("OPENAI_MODEL") ?? "gpt-5.5"; |
| 93 | |
| 94 | app.MapPost("/api/chat", async (ChatRequest req, IHttpClientFactory httpClientFactory, HttpContext ctx) => |
| 95 | { |
| 96 | if (string.IsNullOrEmpty(apiKey)) |
| 97 | return Results.Json(new { error = "OPENAI_API_KEY not set" }, statusCode: 500); |
| 98 | if (req.Messages is null || req.Messages.Length == 0) |
| 99 | return Results.Json(new { error = "messages must be a non-empty array" }, statusCode: 400); |
| 100 | |
| 101 | // Prepend the server-side system prompt; never trust the client to supply it. |
| 102 | var messages = new List<ChatMessage> { new("system", systemPrompt) }; |
| 103 | messages.AddRange(req.Messages); |
| 104 | |
| 105 | var payload = JsonSerializer.Serialize(new OpenAiRequest(model, true, messages)); |
| 106 | |
| 107 | using var upstreamRequest = new HttpRequestMessage( |
| 108 | HttpMethod.Post, $"{baseUrl}/chat/completions") |
| 109 | { |
| 110 | Content = new StringContent(payload, Encoding.UTF8, "application/json"), |
| 111 | }; |
| 112 | upstreamRequest.Headers.Add("Authorization", $"Bearer {apiKey}"); |
| 113 | |
| 114 | var client = httpClientFactory.CreateClient("openai"); |
| 115 | |
| 116 | // ResponseHeadersRead returns as soon as headers arrive, so we read the |
| 117 | // body incrementally off the socket instead of buffering it into memory. |
| 118 | var upstream = await client.SendAsync( |
| 119 | upstreamRequest, HttpCompletionOption.ResponseHeadersRead, ctx.RequestAborted); |
| 120 | |
| 121 | if (!upstream.IsSuccessStatusCode) |
| 122 | { |
| 123 | var errorBody = await upstream.Content.ReadAsStringAsync(ctx.RequestAborted); |
| 124 | upstream.Dispose(); |
| 125 | return Results.Json( |
| 126 | new { error = $"OpenAI returned {(int)upstream.StatusCode}: {errorBody}" }, |
| 127 | statusCode: (int)upstream.Status |