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

function Message({ role, content }) {
  return (
    <div className={`message ${role}`}>
      <div className="avatar">{role === "user" ? "👤" : "🤖"}</div>
      <div className="content">
        <ReactMarkdown>{content}</ReactMarkdown>
      </div>
    </div>
  );
}

Streaming Response

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

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)