# Att bygga en Frontend Innan API är redo: Utan ömtång
2025-12-13T14:30
## 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
[](https://www.nuget.org/packages/mostlylucid.mockllmapi)
[](https://www.nuget.org/packages/mostlylucid.mockllmapi)
[](https://github.com/scottgal/LLMApi/releases)
[](http://unlicense.org/)
- **Repository:** [https://~github~.~com~/~scottgal~M SK3~LLMApi](https://github.com/scottgal/LLMApi)
- **Releases:** https://~github~.~com~/~scottgal~MST3~LLMApi~Mst4~utsläpp
- **Kompanionspaket:** [mestlucid.mockllmapi.Testing](https://github.com/scottgal/LLMApi/blob/master/mostlylucid.mockllmapi.Testing/README.md) - Testverktyg med flytande HttpClient integration
### 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](https://github.com/scottgal/LLMApi/releases))
3. **Dockercontainer** - Noll installering krävs
[TOC]
## Killer-fenskapen: Kontextminnet
> **📖 Den fulla manualen :** [API Kontext Dokumentation](https://github.com/scottgal/LLMApi/blob/master/docs/API-CONTEXTS.md)
Traditionella modellera API har en dödlig brist.
**API Kontexter** löser detta med gemensam minne genom olika insatser:
```javascript
// 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: "alice@example.com" }
// 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
```bash
dotnet add package mostlylucid.mockllmapi
```
```csharp
// Program.cs
builder.Services.AddLLMockApi(builder.Configuration);
app.MapLLMockApi("/api/mock");
```
### Option 2: CLI-verktyg
```bash
# Download from https://github.com/scottgal/LLMApi/releases
llmock serve --port 5000
```
### Option 3: Docker
> **📖 Den kompletta manualen** [Docker-användningsguidet](https://github.com/scottgal/LLMApi/blob/master/docs/DOCKER_GUIDE.md)
```bash
git clone https://github.com/scottgal/LLMApi.git
cd LLMApi
docker compose up -d
```
### Voraussetzungen: LLM Backend
Du behöver **en av**: Ollama, OpenAI
```bash
# Recommended: Ollama with ministral-3:3b (ultra-fast, accurate JSON generation)
ollama pull ministral-3:3b
```
Se [Ollama Modellführer](https://github.com/scottgal/LLMApi/blob/master/docs/OLLAMA_MODELS.md) 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.
```bash
curl http://localhost:5000/api/mock/users
# Response: [{"id": 1, "name": "Alice Johnson", "email": "alice@example.com"}, ...]
```
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 :
```javascript
// 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:**
```bash
# 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
```bash
# 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": "alice@example.com" }
```
**Tre sätt att definiera formen:**
1. Fråga-parameter - `?shape={...}`
2. HTTP-Header - `X-Response-Shape: {...}` (kommande
3. Benötningsorgan - `{"shape": {...}}`
### Nested form
```javascript
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
```typescript
interface User {
id: number;
name: string;
email: string;
}
const USER_SHAPE: Partial = { 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
```bash
# 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](https://github.com/scottgal/LLMApi#graphql-api-mocking)
```bash
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](https://github.com/scottgal/LLMApi/blob/master/docs/GRPC_SUPPORT.md)
```bash
# 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](https://github.com/scottgal/LLMApi/blob/master/SIGNALR_DEMO_GUIDE.md)
```javascript
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](https://github.com/scottgal/LLMApi/blob/master/docs/SSE_STREAMING_MODES.md)
```javascript
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](https://github.com/scottgal/LLMApi/blob/master/docs/OPENAPI-FEATURES.md)
```bash
# 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](https://github.com/scottgal/LLMApi/blob/master/docs/TOOLS_ACTIONS.md)
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 .
```json
{
"Tools": [{
"Name": "getUserData",
"Type": "http",
"HttpConfig": {
"Endpoint": "https://api.production.com/users/{userId}",
"Headers": { "Authorization": "Bearer ${PROD_API_KEY}" }
}
}]
}
```
```bash
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
```csharp
// Real code from mostlylucid.net
builder.Services.AddHttpClient(
client => {
var baseUrl = builder.Configuration["TranslationService:BaseUrl"]
?? "http://localhost:5000"; // Mock during dev
client.BaseAddress = new Uri(baseUrl);
}
);
```
**appsettings.Development.jsonM SK2**
```json
{
"TranslationService": {
"BaseUrl": "http://localhost:5000" // Mock
}
}
```
**appsettings.Produktion.jsonM SK2**
```json
{
"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](https://github.com/scottgal/LLMApi/blob/master/docs/MULTIPLE_LLM_BACKENDS.md)
```bash
# 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](https://github.com/scottgal/LLMApi/blob/master/docs/RATE_LIMITING_BATCHING.md)
Testa hur din app hanterar hastighetsgränser:
```json
{
"EnableRateLimiting": true,
"RateLimitDelayRange": "500-2000"
}
```
### Fehlersimulation
```bash
# 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
```bash
# 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](https://github.com/scottgal/LLMApi/blob/master/mostlylucid.mockllmapi.Testing/README.md)
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
```bash
dotnet add package mostlylucid.mockllmapi.Testing
```
### Grundanvändning
```csharp
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();
```
### Flera slutpunkter
```csharp
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:**
```csharp
// 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:**
```csharp
// Simple error
.WithError(404)
// With custom message
.WithError(404, "User not found")
// With details
.WithError(422, "Validation failed", "Email address is invalid")
```
**Streaming:**
```csharp
// 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:**
```csharp
services.AddMockLlmHttpClient(
baseApiPath: "/api/mock",
configure: handler => handler
.ForEndpoint("/users", config => config
.WithShape(new { id = 0, name = "", email = "" }))
);
```
**Namerad klient:**
```csharp
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
```csharp
[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 = "john@example.com" };
var response = await client.PostAsJsonAsync("/users", newUser);
// Assert
response.EnsureSuccessStatusCode();
var created = await response.Content.ReadFromJsonAsync();
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](https://github.com/scottgal/LLMApi/blob/master/docs/OLLAMA_MODELS.md) 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
- **[Den stora byggnaden](https://github.com/scottgal/LLMApi)** - källa och överblick
- **[Konfigurationsreferens](https://github.com/scottgal/LLMApi/blob/master/docs/CONFIGURATION_REFERENCE.md)** - Alla inställningar
- **[API Kontextführer](https://github.com/scottgal/LLMApi/blob/master/docs/API-CONTEXTS.md)** - Kontextminnet djupdykning
- **[verktyg & Aksier](https://github.com/scottgal/LLMApi/blob/master/docs/TOOLS_ACTIONS.md)** - Extern API-integration
- **[OpenAPI: s egenskaper](https://github.com/scottgal/LLMApi/blob/master/docs/OPENAPI-FEATURES.md)** - Spec
- **[gRPC Support](https://github.com/scottgal/LLMApi/blob/master/docs/GRPC_SUPPORT.md)** - Protokollbuffer
- **[Dockerführer](https://github.com/scottgal/LLMApi/blob/master/docs/DOCKER_GUIDE.md)** - Beläggning av behållare
- **[Flera bakprogram](https://github.com/scottgal/LLMApi/blob/master/docs/MULTIPLE_LLM_BACKENDS.md)** - Multi
- **[Limitering av hastighet](https://github.com/scottgal/LLMApi/blob/master/docs/RATE_LIMITING_BATCHING.md)** - simulera gränser
- **[Testpaket](https://github.com/scottgal/LLMApi/blob/master/mostlylucid.mockllmapi.Testing/README.md)** - HttpClient
## 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?**
```bash
docker compose up -d
```
Det där' det är det . Ingen baksida krävs