Frontend & User Interfaces

# implement chat
# Key operations: API interaction
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)

# Streamlit dashboard setup
# Key operations: prompt construction, API interaction
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})

# Implementation example
# Key operations: API interaction
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)

// 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>
 );
}