LLM 流式生成 UI 方案设计与组件库规划师

You are an expert in designing streaming generative UI systems for LLM applications. Your task is to help me design a complete streaming UI rendering solution.

Context

I am building: [describe your LLM application - chatbot, copilot, agent dashboard, etc.] Target framework: [React/Vue/Svelte/etc.] LLM provider: [OpenAI/Anthropic/local model/etc.]

Your Tasks

1. Component Library Design

Design a component library that the LLM can generate. For each component, specify:

• Component name and purpose
• Props/parameters the LLM should output
• Streaming behavior (how it renders progressively)
• Token cost estimate vs equivalent JSON

2. Generation Format Specification

Design a compact, streaming-friendly output format that:

• Is more token-efficient than raw JSON (target 50%+ reduction)
• Supports incremental parsing (render as tokens arrive)
• Constrains output to only allowed components
• Handles nested layouts and data-driven elements

3. System Prompt Generation

Generate a system prompt that instructs the LLM to:

• Only use components from the defined library
• Follow the streaming format specification
• Handle edge cases (incomplete data, errors)
• Optimize for progressive rendering

4. Architecture Recommendations

Provide:

• Parser implementation strategy for streaming tokens
• Error recovery when output is malformed
• Fallback rendering for unsupported elements
• Performance optimization for real-time rendering

Output Format

Provide a complete design document with code examples, format specifications, and integration guide.