frontend
**Building AI Application Frontends**
**Frontend Technology Choices**
**Rapid Prototyping**
| Tool | Language | Best For |
|------|----------|----------|
| Streamlit | Python | Quick demos, data apps |
| Gradio | Python | ML model demos |
| Panel | Python | Dashboards |
| Chainlit | Python | Chat interfaces |
**Production Applications**
| Framework | Language | Best For |
|-----------|----------|----------|
| Next.js | TypeScript | Full-stack web apps |
| React | TypeScript | SPA, custom UI |
| Vue | TypeScript | Flexible, progressive |
| Svelte | TypeScript | Performance-focused |
**Chat Interface Patterns**
**Message Component**
```jsx
function Message({ role, content }) {
return (
{content}
);
}
```
**Streaming Response**
```jsx
async function handleSubmit(prompt) {
const response = await fetch("/api/chat", {
method: "POST",
body: JSON.stringify({ prompt }),
});
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
// Append chunk to message display
appendToMessage(new TextDecoder().decode(value));
}
}
```
**UX Best Practices for AI Apps**
**Loading States**
| State | UI Pattern |
|-------|------------|
| Thinking | Typing indicator, "Generating..." |
| Streaming | Show tokens as they arrive |
| Error | Clear error message, retry option |
| Timeout | Cancel button, timeout message |
**User Trust**
- Show confidence indicators when appropriate
- Provide sources/citations for claims
- Allow easy feedback (thumbs up/down)
- Clear AI disclosure ("AI-generated response")
**Accessibility**
- Keyboard navigation for all interactions
- Screen reader support for dynamic content
- High contrast themes
- Respect reduced motion preferences
**Streamlit Quick Start**
```python
import streamlit as st
from openai import OpenAI
st.title("🤖 Chat Assistant")
if "messages" not in st.session_state:
st.session_state.messages = []
for msg in st.session_state.messages:
st.chat_message(msg["role"]).write(msg["content"])
if prompt := st.chat_input("How can I help?"):
st.session_state.messages.append({"role": "user", "content": prompt})
st.chat_message("user").write(prompt)
client = OpenAI()
response = client.chat.completions.create(
model="gpt-4o", messages=st.session_state.messages
)
reply = response.choices[0].message.content
st.session_state.messages.append({"role": "assistant", "content": reply})
st.chat_message("assistant").write(reply)
```
{role === "user" ? "👤" : "🤖"}