Att bygga en Frontend Innan API är redo: Utan ömtång (Svenska (Swedish))

Att bygga en Frontend Innan API är redo: Utan ömtång

Saturday, 13 December 2025

//

14 minute read

Comments Raw Edit
API Development ASP.NET Core LLM Mock APIs Testing

Inleiding

Hur många gånger har du varit blockerad och väntat på att backend APIs är redo?

Kom in mostlylucid.mockllmapi - en produktion, - färdiga ASP, ., NET Core mocking-plattform som använder stora språkmodeller för att generera realistiska, kontextuellt medvetna API-responser, flyktig, ., istället för att underhålla JSON-installationer, ,, får du intelligenta mocker som anpassar sig till dina begäran och minns tillståndet under samtalen.

Vad det supporterar: Varenda protocol du behöver - REST , GraphQL, gRPCMska3 SignalRM Ska4 ServerMske5 skickade händelser, och OpenAPIMskan7 Till skillnad från statiska fixturerMksK8 genereras reaktionerna dynamiskt baserat på din begäransuppsättningMnsK9 gör multi- -Workflows och komplexa testscenarier triviala

Projekt länkar

NuGet NuGet GitHub-utsläpp Licensen : Olicenctioner

Tre sätt att använda det

Du kan använda mestadelslucid.mockllmapi på tre sätt

  1. ASP.NET Core NuGet paket - Lägg till dina existerande projekt
  2. Enkel CLI-verktyg - Cross utsläpp)
  3. Dockercontainer - Noll installering krävs

Killer-fenskapen: Kontextminnet

📖 Den fulla manualen : API Kontext Dokumentation

Traditionella modellera API har en dödlig brist.

API Kontexter löser detta med gemensam minne genom olika insatser:

// Request 1: Get a user
// Note: 'context' is a simple query parameter - no cookies or sessions needed
fetch('/api/users/123?context=checkout-session')
// Response: { id: 42, name: "Alice Smith", email: "[email protected]" }

// Request 2: Get orders (same context parameter)
fetch('/api/orders?userId=42&context=checkout-session')
// Response: { userId: 42, customerName: "Alice Smith", items: [...] }
// Perfect! Same user, consistent data

LLM ser tidigare begäran i samma kontext och genererar konsekventa data. Det här är spelet

Features:

Livscykel:

  • Automatiskt utgångsdatum efter 15 minuter av inactivitet ( konfigurierbart)
  • Varje begäran uppdaterar timern

Behavior:

  • Intelligent extraktion av ALLE fält från reaktioner

säkerhet:

  • Noll minnesdröjningar - kontexter rensar sig själva

Använd fall:

  • Perfekt för CI/CD - inga mellanläge

Vinnig Start

Option 1: NuGet Paket

dotnet add package mostlylucid.mockllmapi

// Program.cs
builder.Services.AddLLMockApi(builder.Configuration);
app.MapLLMockApi("/api/mock");

Option 2: CLI-verktyg

# Download from https://github.com/scottgal/LLMApi/releases
llmock serve --port 5000

Option 3: Docker

📖 Den kompletta manualen Docker-användningsguidet

git clone https://github.com/scottgal/LLMApi.git
cd LLMApi
docker compose up -d

Voraussetzungen: LLM Backend

Du behöver en av: Ollama, OpenAI

# Recommended: Ollama with ministral-3:3b (ultra-fast, accurate JSON generation)
ollama pull ministral-3:3b

Se Ollama Modellführer för alla modellbeveelningar och jämförelser.

Försök det omedelbart

När den körs, gör din första begäran.

curl http://localhost:5000/api/mock/users
# Response: [{"id": 1, "name": "Alice Johnson", "email": "[email protected]"}, ...]

Det är det. Du har nu en fungerande modell-API som genererar realistiska data på beställning.

Ett verkligt exempel: söka från mostlylucid.net

Här är den faktiska sökkoden från den här bloggen - det här är oföränderlig produktionsfrontend kod, inga anpassningar behöver göras för modellen :

// typeahead.js from mostlylucid.net
export function typeahead() {
    return {
        query: '',
        results: [],
        search() {
            fetch(`/api/search/${encodeURIComponent(this.query)}`)
                .then(response => response.json())
                .then(data => { this.results = data; });
        }
    }
}

Skämt det:

# Using CLI
llmock serve --port 5000

# Query returns contextual results
curl http://localhost:5000/api/search/markdown
# LLM generates blog posts about Markdown

curl http://localhost:5000/api/search/docker
# LLM generates blog posts about Docker

Varje respons är unik och realistiskt, anpassat till frågan.

Formkontroll: Definiera ditt schema

Förutom att bara generera slumpmässiga data

Grundform

# Without shape - random structure
curl http://localhost:5000/api/mock/users
# Response: { "userId": 1, "fullName": "Alice" }

# With shape - you control it
curl "http://localhost:5000/api/mock/users" \
  -H 'X-Response-Shape: {"id":0,"name":"string","email":"string"}'
# Response: { "id": 1, "name": "Alice", "email": "[email protected]" }

Tre sätt att definiera formen:

  1. Fråga-parameter - ?shape={...}
  2. HTTP-Header - X-Response-Shape: {...} (kommande
  3. Benötningsorgan - {"shape": {...}}

Nested form

const shape = {
  company: {
    id: 0,
    name: "string",
    employees: [{
      id: 0,
      firstName: "string",
      department: { id: 0, name: "string" },
      projects: [{ id: 0, title: "string" }]
    }]
  }
};

fetch('/api/mock/company', {
  headers: { 'X-Response-Shape': JSON.stringify(shape) }
});

TypScript-lignering

interface User {
  id: number;
  name: string;
  email: string;
}

const USER_SHAPE: Partial<User> = { id: 0, name: "", email: "" };

// Shape becomes your type definition AND mock schema!

Multi-Step-Workflows med sammanhang

Låt oss nu kombinera formkontroll med API-kontexter för att hantera komplexa arbetsflöden.

Det här exemplet från mestlucid.net's översättningsservice visar hur LLM upprätthåller tillståndet över en komplett async arbetsprocess

# Step 1: Start translation
curl -X POST http://localhost:5000/api/translate/start?context=translate-session \
  -d '{"language": "es", "markdown": "# Hello World"}'
# Response: { "taskId": "abc-123", "status": "processing" }

# Step 2: Check status (LLM remembers the task)
curl http://localhost:5000/api/translate/status/abc-123?context=translate-session
# Response: { "taskId": "abc-123", "status": "complete" }

# Step 3: Get result (same taskId!)
curl http://localhost:5000/api/translate/result/abc-123?context=translate-session
# Response: { "taskId": "abc-123", "translatedText": "# Hola Mundo" }

Notera hur taskId är konsekvent över alla begäran. Kontext gör detta möjligt.

Förutom REST: Alla protokoller

Än så länge har vi fokuserat på REST, men moderna tillämpningar behöver mer.., oavsett om du bygger med GraphQL, implementerar riktiga, reala, -, signaltidsfunktioner, eller jobbar med gRPC.

Ondersteunde protokoller:

  • ✓ REST
  • ✓ GraphQL
  • ✓ gRPC
  • ✓ SignalR
  • ✓ Server
  • ✓ OpenAPI / Swagger

GraphQL

📖 Guide GraphQL-sektionen

curl -X POST http://localhost:5000/api/mock/graphql \
  -d '{"query": "{ users { id name email } }"}'

Frågan är formen - inget separat schema behövs.

gRPC

📖 Den kompletta manualen gRPC Support

# Upload .proto file
curl -X POST http://localhost:5116/api/grpc-protos \
  --data-binary "@user_service.proto"

# Call via JSON or binary Protobuf
curl -X POST http://localhost:5116/api/grpc/userservice/UserService/GetUser \
  -d '{"user_id": 123}'

SignalR Real-Time

📖 Guide SignalR Demo Guide

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub/mock")
    .build();

connection.on("DataUpdate", (message) => {
    console.log(message.data); // Live generated data
});

await connection.start();
await connection.invoke("SubscribeToContext", "stock-prices");

Perfekt för brädansprototypen.

Server-Sent händelser (SSE)

📖 Guide SSE Streaming-modi

const eventSource = new EventSource('/api/mock/stream/users');
eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data);
    console.log('Token:', data.chunk); // Progressive generation
};

OpenAPI / Swagger

📖 Den kompletta manualen OpenAPI: s egenskaper

# CLI: Load any OpenAPI spec
llmock serve --spec https://petstore3.swagger.io/api/v3/openapi.json

# All endpoints become live mocks automatically
curl http://localhost:5000/petstore/pet/123

Pluggable Tools: Mix Real & Mock Data

📖 Den kompletta manualen verktyg & Aksier

Ibland behöver man ett hybridt angreppssätt - verkliga data från produktion kombinerade med genererade modelldata . Det pluggbara verktygssystemet låter dig kalla riktiga API-gränssnitt under modellproduktionen M SK2 skapa otroligt realistiska testscenarier .

{
  "Tools": [{
    "Name": "getUserData",
    "Type": "http",
    "HttpConfig": {
      "Endpoint": "https://api.production.com/users/{userId}",
      "Headers": { "Authorization": "Bearer ${PROD_API_KEY}" }
    }
  }]
}

curl "http://localhost:5000/api/mock/orders?useTool=getUserData&userId=123"

Den modellen tar fram REAL-användarens data, sedan genererar LLM inställningar genom att använda den. Extremt användbar för realistiska tester med hybrid mock

ASP.NET Core Integration

Om du bygger med ASP, ., NET Core och , så är integreringen genomkomlig. noll kodförändringar till dina tjänster - så konfigurerar du helt enkelt HttpClient att peka på modellen under utveckling och på den verkliga API i produktion

// Real code from mostlylucid.net
builder.Services.AddHttpClient<IMarkdownTranslatorService, MarkdownTranslatorService>(
    client => {
        var baseUrl = builder.Configuration["TranslationService:BaseUrl"]
            ?? "http://localhost:5000";  // Mock during dev
        client.BaseAddress = new Uri(baseUrl);
    }
);

appsettings.Development.jsonM SK2

{
  "TranslationService": {
    "BaseUrl": "http://localhost:5000"  // Mock
  }
}

appsettings.Produktion.jsonM SK2

{
  "TranslationService": {
    "BaseUrl": "https://api.production.com"  // Real
  }
}

Detta mönster fungerar för alla HttpClient i din applikation - översättningstjänster , betalningsportaaler, externa APIsM SK3 vad du kallar det för

När man ska använda detta

Innan vi dyker in i avancerade egenskaper, låt oss tala klar om när det här verktyget är användbart för ditt arbetsflöde.

Perfekt för:

  • Frontend utveckling innan backend existerar - Stopp blockering på backendteams
  • Multi-step testning av arbetsflödet - Kontextminnet hanterar komplexa scenarier
  • API-prototyper - Försök reagerande former innan du börjar
  • Offline utveckling - Jobba utan nätverks beroenden
  • Fehler i scenariotestning - simulera misslyckanden utan att bryta produktionen
  • CI/CD-rör - Inga externa beroende betyder snabbare , mer tillförlitliga byggningar

Inte idealt för:

  • Tillverkningsmiljöer - Detta är ett utvecklings- och testverktyg
  • Deterministiska tester - Använd fixeringar när du behöver exakt återskapbarhet
  • Contrattestning - Validatera alltid mot riktiga APIs för produktionskontrakt

Nu när du vet var den passar, låter , utforska de avancerade möjligheterna.

avancerade egenskaper

De här egenskaperna är optionella. - du kan få enorm värde från grunden ens.

Flera LLM backends

📖 Guide Flera LLM backends

# Fast for dev
curl http://localhost:5000/api/mock/users

# High quality for demos
curl "http://localhost:5000/api/mock/users?backend=quality"

# Cloud AI for production-like
curl "http://localhost:5000/api/mock/users?backend=openai"

Simulationen med begränsade hastigheter

📖 Guide Limitering av hastigheten & Batchning

Testa hur din app hanterar hastighetsgränser:

{
  "EnableRateLimiting": true,
  "RateLimitDelayRange": "500-2000"
}

Fehlersimulation

# Test 429 rate limiting
curl "http://localhost:5000/api/mock/users?error=429&errorMessage=Rate%20limit%20exceeded"

# Test 503 unavailable
curl "http://localhost:5000/api/mock/users?error=503"

Ondersteuner alla 4xx och 5xx koder

Response Caching

# Generate and cache 10 variants
curl "http://localhost:5000/api/mock/users?shape={\"$cache\":10,\"id\":0,\"name\":\"string\"}"

De efterföljande begäran får genast cached svar.

Testverktyg: mest uppenbart .mockllmapi.Testing

📖 Paket mestlucid.mockllmapi.Testing

Alla de här egenskaperna är fantastiska för utvecklingen, men vad sägs om automatiserad tester? Samarbetspaketet för tester ger en flytande API som gör integreringstest till en breeze M SK2 konfigurera modellbeteende deklarativt och låta HttpClient gör resten.

Installation

dotnet add package mostlylucid.mockllmapi.Testing

Grundanvändning

using mostlylucid.mockllmapi.Testing;

// Create a client with a single endpoint configuration
var client = HttpClientExtensions.CreateMockLlmClient(
    baseAddress: "http://localhost:5116",
    pathPattern: "/users",
    configure: endpoint => endpoint
        .WithShape(new { id = 0, name = "", email = "" })
        .WithCache(5)
);

// Make requests - configuration is automatically applied
var response = await client.GetAsync("/users");
var users = await response.Content.ReadFromJsonAsync<User[]>();

Flera slutpunkter

var client = HttpClientExtensions.CreateMockLlmClient(
    "http://localhost:5116",
    configure: handler => handler
        .ForEndpoint("/users", config => config
            .WithShape(new { id = 0, name = "", email = "" })
            .WithCache(10))
        .ForEndpoint("/posts", config => config
            .WithShape(new { id = 0, title = "", content = "", authorId = 0 })
            .WithCache(20))
        .ForEndpoint("/error", config => config
            .WithError(404, "Resource not found"))
);

// Each endpoint automatically uses its configuration
var usersResponse = await client.GetAsync("/users");
var postsResponse = await client.GetAsync("/posts");
var errorResponse = await client.GetAsync("/error"); // Returns 404

Konfigurationsoptioner

Form konfiguration:

// Using anonymous objects
.WithShape(new { id = 0, name = "", active = true })

// Using JSON strings
.WithShape("{ \"id\": 0, \"name\": \"\", \"tags\": [] }")

// Complex nested structures
.WithShape(new
{
    user = new { id = 0, name = "" },
    posts = new[] { new { id = 0, title = "" } }
})

Fehlersimulation:

// Simple error
.WithError(404)

// With custom message
.WithError(404, "User not found")

// With details
.WithError(422, "Validation failed", "Email address is invalid")

Streaming:

// Enable streaming with token-by-token output
.WithStreaming()
.WithSseMode("LlmTokens")

// Stream complete objects
.WithStreaming()
.WithSseMode("CompleteObjects")

// Stream array items individually
.WithStreaming()
.WithSseMode("ArrayItems")

beroende injection

Inskriven klient:

services.AddMockLlmHttpClient<IUserApiClient>(
    baseApiPath: "/api/mock",
    configure: handler => handler
        .ForEndpoint("/users", config => config
            .WithShape(new { id = 0, name = "", email = "" }))
);

Namerad klient:

services.AddMockLlmHttpClient(
    name: "MockApi",
    baseApiPath: "/api/mock",
    configure: handler => handler
        .ForEndpoint("/data", config => config
            .WithShape(new { value = 0 }))
);

// Usage
var client = httpClientFactory.CreateClient("MockApi");

Integrationstest exempel

[Fact]
public async Task Should_Handle_User_Creation()
{
    // Arrange
    var client = HttpClientExtensions.CreateMockLlmClient(
        "http://localhost:5116",
        "/users",
        config => config
            .WithMethod("POST")
            .WithShape(new { id = 0, name = "", email = "", createdAt = "" })
    );

    // Act
    var newUser = new { name = "John Doe", email = "[email protected]" };
    var response = await client.PostAsJsonAsync("/users", newUser);

    // Assert
    response.EnsureSuccessStatusCode();
    var created = await response.Content.ReadFromJsonAsync<User>();
    Assert.NotNull(created);
    Assert.NotEqual(0, created.Id);
}

[Fact]
public async Task Should_Handle_Not_Found_Error()
{
    // Arrange
    var client = HttpClientExtensions.CreateMockLlmClient(
        "http://localhost:5116",
        "/users/999",
        config => config.WithError(404, "User not found")
    );

    // Act
    var response = await client.GetAsync("/users/999");

    // Assert
    Assert.Equal(HttpStatusCode.NotFound, response.StatusCode);
}

Hur det fungerar

Den MockLlmHttpHandler är en DelegatingHandler att:

  1. Intercepterar utgående HTTP- begäran
  2. matchar begäran mot konfigurerade slutpunktsmönster
  3. Injicerar modellkonfiguration via sökparameter och HTTP-Header
  4. Framför den ändrade begäran till den faktiska modell LLM API

Det här låter dig använda en riktig HttpClient i dina tester samtidigt som du enkelt kontrollerar modell API-beteende utan att ändra din applikationskod.

Vad man bör göra & Tips

Efter att ha arbetat med det här verktyget i flera projekt

  1. Använd alltid kontexter för arbetsflöden - Bekämpar konsekventa IDs och data över flera operationer
  2. Använd form för typsäkerhet - gör att det matchar dina TypeScript gränssnitt
  3. Blanda verkliga och modelldata med verktyg - Den bästa av båda världarna
  4. Välj den rätta modellen (se Ollama Modellführer för detaljer):
    • REKOMMEND för dev: ministral-3:3b (3B-paramer, 32K-kontext KILLER för JSON! Ultra-fast, hög noggrannM SK2 minimal RAM
    • produktion-liknande: llama3 (8B-paramer, 8K-kontext
    • Hög kvalitet: mistral-nemo (12B-paramer, 128K-kontextM SK3 | | Complexa schema och massiva datasamlingar
    • Ressourcen- begränsad: gemma3:4b eller phi3 - Litere alternativ

Dokumentation

Slutsatsen

Frontend utveckling behöver inte vänta på backend APIs mostlylucid.mockllmapi ger dig:

  • Kontextminne - konsekventa , uppriktiga data över flera vaiheprocesser
  • Formkontroll - Precisa schemadefinitioner som matchar dina typer
  • Den universella protocoltillgången - REST, GraphQL, gRPCM SK3 SignalRMska4 SSEM Ska5 OpenAPI
  • Hybridtestning - Blanda verkliga produktionsdata med skapade modeller
  • Noll underhåll - Inga JSON-installationer som kan uppdateras när krav ändras
  • Testande verktyg - Fluent API för integrationstest

Skillnaden mellan det här och den traditionella mockingen? Frontend fungerar mot realistiska data, kontextuellt medvetna data från dag ettM SK2 Ingen mer Mska3 det fungerade med modelldata men misslyckades med riktiga data Mska4 överraskningarMske5

Vare sig du bygger en enkel blogg eller en komplicerad företagsapplikation, så kommer du att iterera snabbare, testa mer noggrant, , och leverera på ett säkert sätt.

Klar att börja?

docker compose up -d

Det där' det är det . Ingen baksida krävs

Finding related posts...
logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.