Building AI Application Frontends

Frontend Technology Choices

Rapid Prototyping

Production Applications

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

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)