Skip to content

Commit 6e22ce6

Browse files
garrytrindergarrytrinder
committed
Refactor Dev Proxy output for improved clarity and update links to OpenAI documentation
1 parent 14150a7 commit 6e22ce6

File tree

1 file changed

+55
-50
lines changed

1 file changed

+55
-50
lines changed

‎src/pages/index.astro‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,17 @@ import Layout from '../layouts/Layout.astro';
4949
<span class="w-3 h-3 rounded-full bg-green-500/70"></span>
5050
<span class="ml-2 text-xs" style="color: var(--text-faint);">terminal</span>
5151
</div>
52-
<div class="p-4 sm:p-5 space-y-2 overflow-x-auto">
53-
<p style="color: var(--text-faint);"><span style="color: var(--text-muted);">$</span> devproxy</p>
54-
<p class="text-purple-400"> Listening on 127.0.0.1:8000...</p>
55-
<p class="whitespace-nowrap" style="color: var(--text-faint);"> <span class="text-green-400">200</span> GET https://api.contoso.com/users</p>
56-
<p class="whitespace-nowrap" style="color: var(--text-faint);"> <span class="text-red-400">429</span> GET https://api.contoso.com/data <span style="color: var(--text-faint);">← throttled</span></p>
57-
<p class="whitespace-nowrap" style="color: var(--text-faint);"> <span class="text-yellow-400">500</span> POST https://api.contoso.com/items <span style="color: var(--text-faint);">← server error</span></p>
52+
<div class="p-4 sm:p-5 space-y-1 overflow-x-auto">
53+
<p style="color: var(--text-faint);"><span style="color: var(--text-muted);">&#x276F;</span> devproxy</p>
54+
<p class="whitespace-nowrap">&nbsp;&nbsp;<span class="text-blue-400">info</span>&nbsp;&nbsp;&nbsp;&nbsp;Dev Proxy listening on 127.0.0.1:8000...</p>
55+
<p class="mt-2"></p>
56+
<p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;<span style="color: var(--text-secondary);">req</span>&nbsp;&nbsp;&nbsp;&nbsp;GET https://api.contoso.com/posts</p>
57+
<p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;skip&nbsp;&nbsp;&nbsp;GenericRandomErrorPlugin: Pass through</p>
58+
<p class="whitespace-nowrap">&nbsp;&nbsp;<span class="px-1 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">pass</span>&nbsp;&nbsp;&nbsp;Passed through</p>
59+
<p class="mt-2"></p>
60+
<p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;<span style="color: var(--text-secondary);">req</span>&nbsp;&nbsp;&nbsp;&nbsp;GET https://api.contoso.com/posts</p>
61+
<p class="whitespace-nowrap" style="color: var(--text-faint);">&nbsp;&nbsp;skip&nbsp;&nbsp;&nbsp;RetryAfterPlugin: Request not throttled</p>
62+
<p class="whitespace-nowrap">&nbsp;&nbsp;<span class="px-1 rounded text-xs font-semibold bg-red-500/20 text-red-400">oops</span>&nbsp;&nbsp;&nbsp;<span style="color: var(--text-faint);">GenericRandomErrorPlugin: 429 429</span></p>
5863
</div>
5964
</div>
6065
</div>
@@ -91,12 +96,14 @@ import Layout from '../layouts/Layout.astro';
9196
</a>
9297
</div>
9398
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
94-
<p style="color: var(--text-faint);">// No backend? No problem.</p>
95-
<p class="mt-2"><span class="text-green-400">GET</span> <span style="color: var(--text-secondary);">/products</span> <span style="color: var(--text-faint);">→ list</span></p>
96-
<p><span class="text-blue-400">POST</span> <span style="color: var(--text-secondary);">/products</span> <span style="color: var(--text-faint);">→ create</span></p>
97-
<p><span class="text-yellow-400">PUT</span> <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ update</span></p>
98-
<p><span class="text-red-400">DEL</span> <span style="color: var(--text-secondary);">/products/:id</span> <span style="color: var(--text-faint);">→ delete</span></p>
99-
<p class="mt-4 text-purple-400">// Zero lines of server code.</p>
99+
<p style="color: var(--text-faint);">// customers-api.json &mdash; CrudApiPlugin</p>
100+
<p class="mt-2 truncate" style="color: var(--text-secondary);"><span class="text-purple-400">"baseUrl"</span>: <span class="text-green-400">"https://api.contoso.com/customers"</span></p>
101+
<p class="mt-3"><span class="text-green-400">getAll</span> <span style="color: var(--text-faint);">GET &nbsp;&nbsp;&nbsp;/customers</span></p>
102+
<p><span class="text-green-400">getOne</span> <span style="color: var(--text-faint);">GET &nbsp;&nbsp;&nbsp;/customers/&#123;id&#125;</span></p>
103+
<p><span class="text-blue-400">create</span> <span style="color: var(--text-faint);">POST &nbsp;&nbsp;/customers</span></p>
104+
<p><span class="text-yellow-400">merge</span> &nbsp;<span style="color: var(--text-faint);">PATCH &nbsp;/customers/&#123;id&#125;</span></p>
105+
<p><span class="text-red-400">delete</span> <span style="color: var(--text-faint);">DELETE /customers/&#123;id&#125;</span></p>
106+
<p class="mt-4 text-purple-400">// Defined in JSON. Zero server code.</p>
100107
</div>
101108
</div>
102109

@@ -113,13 +120,13 @@ import Layout from '../layouts/Layout.astro';
113120
</a>
114121
</div>
115122
<div class="md:order-1 rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
116-
<p style="color: var(--text-faint);">// Your app makes a normal API call</p>
117-
<p class="truncate" style="color: var(--text-secondary);">fetch(<span class="text-green-400">'https://api.contoso.com/orders'</span>)</p>
118-
<p class="mt-4 text-purple-400">// Dev Proxy intercepts and returns</p>
119-
<p><span class="text-red-400">500</span> <span style="color: var(--text-faint);">Internal Server Error</span></p>
120-
<p><span class="text-yellow-400">429</span> <span style="color: var(--text-faint);">Too Many Requests</span></p>
121-
<p><span class="text-red-400">503</span> <span style="color: var(--text-faint);">Service Unavailable</span></p>
122-
<p class="mt-4 text-purple-400">// Does your app handle it?</p>
123+
<p style="color: var(--text-faint);">// errors-contoso-api.json</p>
124+
<p class="mt-2 truncate" style="color: var(--text-secondary);"><span class="text-purple-400">"url"</span>: <span class="text-green-400">"https://api.contoso.com/*"</span></p>
125+
<p class="mt-3" style="color: var(--text-secondary);"><span class="text-purple-400">"responses"</span>:</p>
126+
<p>&nbsp;&nbsp;<span class="text-red-400">500</span> <span style="color: var(--text-faint);">Internal Server Error</span></p>
127+
<p>&nbsp;&nbsp;<span class="text-yellow-400">429</span> <span style="color: var(--text-faint);">Too Many Requests</span></p>
128+
<p>&nbsp;&nbsp;<span class="text-red-400">503</span> <span style="color: var(--text-faint);">Service Unavailable</span></p>
129+
<p class="mt-4 text-purple-400">// Random errors at configured failure rate.</p>
123130
</div>
124131
</div>
125132

@@ -129,20 +136,19 @@ import Layout from '../layouts/Layout.astro';
129136
<p class="text-sm font-semibold tracking-widest uppercase text-purple-400 mb-4">AI / LLM Testing</p>
130137
<h3 class="text-3xl md:text-4xl font-bold mb-6 leading-tight">Build & test AI apps without burning tokens.</h3>
131138
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
132-
Simulate responses from OpenAI, Azure OpenAI, and other language model APIs. Test error handling, content filtering, and rate limits without real API costs.
139+
Route OpenAI and Azure OpenAI API calls to a local language model during development. Get real responses while building your AI-powered apps&thinsp;&mdash;&thinsp;without spending tokens.
133140
</p>
134-
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-errors-from-language-model-apis" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
141+
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
135142
Learn more &rarr;
136143
</a>
137144
</div>
138145
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
139-
<p style="color: var(--text-faint);">// Your app calls an LLM API</p>
140-
<p class="truncate" style="color: var(--text-secondary);">POST <span class="text-green-400">/openai/deployments/chat/completions</span></p>
141-
<p class="mt-4 text-purple-400">// Dev Proxy simulates failures</p>
142-
<p><span class="text-red-400">429</span> <span style="color: var(--text-faint);">Rate limit exceeded</span></p>
143-
<p><span class="text-yellow-400">400</span> <span style="color: var(--text-faint);">Content filter triggered</span></p>
144-
<p><span class="text-red-400">500</span> <span style="color: var(--text-faint);">Model unavailable</span></p>
145-
<p class="mt-4 text-purple-400">// Save costs. Ship with confidence.</p>
146+
<p style="color: var(--text-faint);">// Your app calls OpenAI</p>
147+
<p class="truncate" style="color: var(--text-secondary);">POST <span class="text-green-400">/v1/chat/completions</span></p>
148+
<p class="mt-4 text-purple-400">// Dev Proxy routes to local LLM</p>
149+
<p style="color: var(--text-faint);"> &rarr; <span class="text-green-400">Ollama</span> (llama3.2)</p>
150+
<p class="mt-3"><span class="text-green-400">200</span> <span style="color: var(--text-faint);">&#123;</span> <span class="text-purple-400">"choices"</span>: [&#123; <span class="text-purple-400">"message"</span>: ... &#125;] <span style="color: var(--text-faint);">&#125;</span></p>
151+
<p class="mt-4 text-purple-400">// Real responses. Zero API costs.</p>
146152
</div>
147153
</div>
148154

@@ -158,30 +164,27 @@ import Layout from '../layouts/Layout.astro';
158164
Learn more &rarr;
159165
</a>
160166
</div>
161-
<div class="md:order-1 rounded-2xl border p-6 md:p-8" style="background: var(--bg-secondary); border-color: var(--border-primary);">
162-
<div class="space-y-3">
167+
<div class="md:order-1 rounded-2xl border p-6 md:p-8 font-mono text-sm" style="background: var(--bg-secondary); border-color: var(--border-primary);">
168+
<p style="color: var(--text-faint);">RateLimit-Limit: <span class="text-purple-400">3</span></p>
169+
<div class="space-y-2 mt-3">
163170
<div class="flex items-center justify-between">
164-
<span class="text-sm font-mono" style="color: var(--text-muted);">Request 1</span>
165-
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">200 OK</span>
171+
<span style="color: var(--text-muted);">GET /api/orders</span>
172+
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">Remaining: 2</span>
166173
</div>
167174
<div class="flex items-center justify-between">
168-
<span class="text-sm font-mono" style="color: var(--text-muted);">Request 2</span>
169-
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">200 OK</span>
175+
<span style="color: var(--text-muted);">GET /api/orders</span>
176+
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">Remaining: 1</span>
170177
</div>
171178
<div class="flex items-center justify-between">
172-
<span class="text-sm font-mono" style="color: var(--text-muted);">Request 3</span>
173-
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-500/20 text-green-400">200 OK</span>
179+
<span style="color: var(--text-muted);">GET /api/orders</span>
180+
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">Remaining: 0</span>
174181
</div>
175182
<div class="w-full h-px my-2" style="background: var(--border-primary);"></div>
176183
<div class="flex items-center justify-between">
177-
<span class="text-sm font-mono" style="color: var(--text-muted);">Request 4</span>
178-
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">429 Throttled</span>
184+
<span style="color: var(--text-muted);">GET /api/orders</span>
185+
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-red-500/20 text-red-400">429 Too Many Requests</span>
179186
</div>
180-
<div class="flex items-center justify-between">
181-
<span class="text-sm font-mono" style="color: var(--text-muted);">Request 5</span>
182-
<span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-500/20 text-yellow-400">429 Throttled</span>
183-
</div>
184-
<p class="text-xs mt-3 font-mono text-purple-400">Retry-After: 30s</p>
187+
<p class="text-xs mt-3 text-purple-400">Retry-After: 30</p>
185188
</div>
186189
</div>
187190
</div>
@@ -194,17 +197,19 @@ import Layout from '../layouts/Layout.astro';
194197
<p class="text-lg leading-relaxed mb-6" style="color: var(--text-muted);">
195198
Run Dev Proxy as part of your CI/CD pipeline to catch API integration issues before they reach production. Works with GitHub Actions, Azure DevOps, and more.
196199
</p>
197-
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-in-ci-cd-overview" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
200+
<a href="https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-with-github-actions" target="_blank" rel="noopener" class="text-purple-400 hover:text-purple-300 font-medium transition-colors">
198201
Learn more &rarr;
199202
</a>
200203
</div>
201204
<div class="rounded-2xl border p-6 md:p-8 font-mono text-sm overflow-hidden" style="background: var(--bg-secondary); border-color: var(--border-primary);">
202205
<p style="color: var(--text-faint);"># .github/workflows/test.yml</p>
203206
<p style="color: var(--text-secondary);"><span class="text-purple-400">steps</span>:</p>
204-
<p style="color: var(--text-secondary);"> - <span class="text-purple-400">name</span>: Install Dev Proxy</p>
205-
<p style="color: var(--text-secondary);"> <span class="text-purple-400">run</span>: <span class="text-green-400">bash install.sh</span></p>
206-
<p style="color: var(--text-secondary);"> - <span class="text-purple-400">name</span>: Run tests with proxy</p>
207-
<p style="color: var(--text-secondary);"> <span class="text-purple-400">run</span>: <span class="text-green-400">devproxy &amp; npm test</span></p>
207+
<p style="color: var(--text-secondary);"> - <span class="text-purple-400">name</span>: Setup Dev Proxy</p>
208+
<p style="color: var(--text-secondary);"> <span class="text-purple-400">uses</span>: <span class="text-green-400">dev-proxy-tools/actions/setup@v1</span></p>
209+
<p style="color: var(--text-secondary);"> - <span class="text-purple-400">name</span>: Run tests</p>
210+
<p style="color: var(--text-secondary);"> <span class="text-purple-400">run</span>: <span class="text-green-400">npm test</span></p>
211+
<p style="color: var(--text-secondary);"> - <span class="text-purple-400">name</span>: Stop Dev Proxy</p>
212+
<p style="color: var(--text-secondary);"> <span class="text-purple-400">uses</span>: <span class="text-green-400">dev-proxy-tools/actions/stop@v1</span></p>
208213
<p class="mt-3" style="color: var(--text-faint);">✓ 42 passed, 0 failed</p>
209214
</div>
210215
</div>
@@ -251,9 +256,9 @@ import Layout from '../layouts/Layout.astro';
251256
{[
252257
{ title: 'Mock an API that doesn\'t exist yet', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-crud-api' },
253258
{ title: 'Test my app handles API errors', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/test-my-app-with-random-errors' },
254-
{ title: 'Simulate LLM API failures', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-errors-from-language-model-apis' },
259+
{ title: 'Simulate OpenAI with a local LLM', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-openai' },
255260
{ title: 'Simulate rate limiting responses', time: '10 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/simulate-rate-limit-api-responses' },
256-
{ title: 'Automate API testing in CI/CD', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-in-ci-cd-overview' },
261+
{ title: 'Automate API testing in CI/CD', time: '15 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/use-dev-proxy-with-github-actions' },
257262
{ title: 'Discover what APIs my app calls', time: '5 min', href: 'https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/discover-urls-to-watch' },
258263
].map((scenario) => (
259264
<a

0 commit comments

Comments
 (0)