feat(a2ui): use pexels to generate images

packages/genui/a2ui-playground/src/pages/AIChatPage.tsx

@@ -337,6 +337,7 @@ async function readA2UIResponse(
   onText: (text: string) => void,
   onMessages: (messages: unknown[]) => void,
   onUsage?: (usage: TokenUsage) => void,
+  options: { publishPartialMessages?: boolean } = {},
 ): Promise<unknown[]> {
   const contentType = response.headers.get('content-type') ?? '';
   if (!contentType.includes('text/event-stream')) {
@@ -360,6 +361,7 @@ async function readA2UIResponse(
   let buffer = '';
   let generatedText = '';
   let latestMessages: unknown[] = [];
+  const publishPartialMessages = options.publishPartialMessages ?? true;
 
   while (true) {
     const { done, value } = await reader.read();
@@ -376,6 +378,7 @@ async function readA2UIResponse(
         if (typeof deltaData.text === 'string') {
           generatedText += deltaData.text;
           onText(generatedText);
+          if (!publishPartialMessages) continue;
           const completed = parseCompletedArrayItems(generatedText);
           if (completed.length > latestMessages.length) {
             latestMessages = completed;
@@ -417,12 +420,12 @@ const SUGGESTED_PROMPTS: Array<{ label: string; text: string }> = [
   {
     label: '🌤️ Weather with Refresh',
     text:
-      'Create a weather card for San Francisco showing sunny, 22°C, humidity 60%, and a "Refresh" button. When the user taps Refresh, update the card with slightly different weather data to simulate a live fetch.',
+      'Create a weather card for San Francisco showing sunny, a photo, 22°C, humidity 60%, and a "Refresh" button. When the user taps Refresh, update the card with slightly different weather data to simulate a live fetch.',
   },
   {
     label: '🛍️ Product card with Buy',
     text:
-      'Create a product card for a limited-edition sneaker. Include name, price ($189), a short description, and a "Buy Now" button. When tapped, show an order confirmation with a fake order number and estimated delivery.',
+      'Create a product card for a limited-edition sneaker. Include name, a photo, price ($189), a short description, and a "Buy Now" button. When tapped, show an order confirmation with a fake order number and estimated delivery.',
   },
   {
     label: '⚡ Quiz card with actions',
@@ -726,6 +729,7 @@ export function AIChatPage(
               totalTokens: prev.totalTokens + usage.totalTokens,
             }));
           },
+          { publishPartialMessages: false },
         );
 
         if (finalMessages.length === 0) {

packages/genui/server/AGENTS.md

@@ -32,6 +32,16 @@ export OPENAI_MODEL="..."
 - `OPENAI_BASE_URL` selects the OpenAI-compatible API endpoint.
 - `OPENAI_MODEL` selects the model used by the A2UI agent.
 
+Image components are resolved after A2UI validation. To enable query-matched
+stock images, provide a Pexels API key:
+
+```bash
+export PEXELS_API_KEY="..."
+```
+
+When `PEXELS_API_KEY` is absent or Pexels returns no result, the server falls
+back to a deterministic Picsum URL.
+
 The server fails fast at startup (via `instrumentation.ts`) when any of
 these are missing in production. In development, a warning is logged
 instead so the playground keeps working.

packages/genui/server/agent/a2ui-prompt.ts

@@ -123,6 +123,9 @@ function buildHardRules(catalogId: string): string {
 16. For UI that should change after a button tap, keep the initial response in
     the pre-action state. Put confirmation, success, or result details in the
     action response instead of showing them before the action happens.
+17. For Image.url, provide a short English image search query such as
+    "fresh pasta on a table" or "city skyline at night". Do NOT invent photo
+    CDN URLs. The server resolves Image.url values through its image provider.
 `;
 }