Frontend & User Interfaces

1. Framework Comparison

2. Gradio Chat Interface

import gradio as gr
from openai import OpenAI

client = OpenAI()

def chat(message, history):
    """Gradio chat handler with streaming."""
    messages = [{"role": "system", "content": "You are a helpful assistant."}]
    for user_msg, bot_msg in history:
        messages.append({"role": "user", "content": user_msg})
        messages.append({"role": "assistant", "content": bot_msg})
    messages.append({"role": "user", "content": message})

    stream = client.chat.completions.create(
        model="gpt-4o-mini", messages=messages, stream=True
    )
    partial = ""
    for chunk in stream:
        delta = chunk.choices[0].delta.content or ""
        partial += delta
        yield partial

demo = gr.ChatInterface(
    fn=chat,
    title="LLM Chat Demo",
    description="Streaming chat powered by GPT-4o-mini",
    examples=["Explain RAG in simple terms", "Write a haiku about ML"],
)
demo.launch(share=True)

3. Streamlit Chat Application

import streamlit as st
from openai import OpenAI

st.title("Streamlit LLM Chat")
client = OpenAI()

# Initialize chat history in session state
if "messages" not in st.session_state:
    st.session_state.messages = []

# Display existing messages
for msg in st.session_state.messages:
    with st.chat_message(msg["role"]):
        st.markdown(msg["content"])

# Handle new input
if prompt := st.chat_input("Ask anything..."):
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.markdown(prompt)

    with st.chat_message("assistant"):
        stream = client.chat.completions.create(
            model="gpt-4o-mini",
            messages=st.session_state.messages,
            stream=True,
        )
        response = st.write_stream(
            chunk.choices[0].delta.content or ""
            for chunk in stream
        )
    st.session_state.messages.append({"role": "assistant", "content": response})

4. Chainlit for Conversational AI

import chainlit as cl
from openai import AsyncOpenAI

client = AsyncOpenAI()

@cl.on_chat_start
async def start():
    cl.user_session.set("history", [])
    await cl.Message(content="Hello! How can I help you today?").send()

@cl.on_message
async def on_message(message: cl.Message):
    history = cl.user_session.get("history")
    history.append({"role": "user", "content": message.content})

    msg = cl.Message(content="")
    await msg.send()

    stream = await client.chat.completions.create(
        model="gpt-4o-mini", messages=history, stream=True
    )

    full_response = ""
    async for chunk in stream:
        token = chunk.choices[0].delta.content or ""
        full_response += token
        await msg.stream_token(token)

    await msg.update()
    history.append({"role": "assistant", "content": full_response})
    cl.user_session.set("history", history)

5. Vercel AI SDK with Next.js

// app/api/chat/route.ts (Next.js API route)
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are a helpful assistant.",
    messages,
  });

  return result.toDataStreamResponse();
}

// app/page.tsx (React component)
"use client";
import { useChat } from "@ai-sdk/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
    </div>
  );
}