How to handle AI responses in product UI
stream=True in API calls for real-time updates and fallback UI for failures.model_behavior stream=True in your API call and update the UI incrementally to handle partial AI responses smoothly.Why this happens
AI responses can be large, delayed, or contain unexpected content, causing poor user experience if handled naively. For example, a synchronous API call that waits for the full response blocks the UI, leading to unresponsive interfaces. Additionally, AI outputs may include hallucinations or formatting issues that require validation before display.
Typical problematic code calls the API without streaming and directly injects raw AI text into the UI, causing delays and potential security risks.
from openai import OpenAI
import os
client = OpenAI(api_key=os.environ["OPENAI_API_KEY"])
response = client.chat.completions.create(
model="gpt-4o",
messages=[{"role": "user", "content": "Generate a long product description."}]
)
print(response.choices[0].message.content)A long product description text... (delayed response, UI blocks until complete)
The fix
Use streaming to receive partial AI outputs and update the UI incrementally, improving responsiveness. Sanitize and validate the AI text before rendering to prevent injection or formatting issues. Provide clear loading states and error messages with retry options.
from openai import OpenAI
import os
client = OpenAI(api_key=os.environ["OPENAI_API_KEY"])
stream = client.chat.completions.create(
model="gpt-4o",
messages=[{"role": "user", "content": "Generate a long product description."}],
stream=True
)
for chunk in stream:
delta = chunk.choices[0].delta.content or ""
# Update UI incrementally here, e.g., append delta to a text box
print(delta, end="", flush=True)Partial text streaming in real-time... More text... Final text.
Preventing it in production
Implement exponential backoff retries for transient API errors like rate limits. Validate AI responses for length, content safety, and formatting before UI rendering. Use fallback UI states for errors or empty responses. Log AI outputs and errors for monitoring and continuous improvement.
Consider user experience by showing typing indicators or progress bars during streaming. Also, cache frequent AI responses to reduce latency and cost.
Key Takeaways
- Use
stream=Trueto progressively update UI with partial AI responses. - Validate and sanitize AI outputs before rendering to ensure safety and formatting.
- Implement retries and fallback UI to handle API errors gracefully.