AI Feature Integration — Frontend Handbook | DevExCode

The second way AI touches your work is the features you build into the app: chatbots, summarizers, smart categorization. From the frontend's perspective these are normal data interactions — you send some text to an endpoint and render the result — but with two twists: the call must never expose a provider key, and responses are often best streamed token by token.

A simple feature like an expense categorizer is just a POST to your own backend with the text to classify; the backend calls the LLM and returns a category. The frontend never touches the model or its key directly. This keeps the secret server-side and lets the backend apply guardrails (rate limits, prompt construction, input validation, content filtering) in one trusted place.

Chatbot-style features feel much faster when you stream the response instead of waiting for the full answer. The frontend reads the response body as a stream via the Streams API: get a reader from response.body, decode each chunk with a TextDecoder, and append it to state as tokens arrive. The UI updates incrementally — setResponse(prev => prev + chunk) — so the user sees text appear progressively, the same experience as a typing assistant.

The security pattern is the headline rule: never call an LLM provider directly from the browser with a secret key, because anything in the bundle is public. Route every AI call through your backend, which holds the key and enforces guardrails. This is true whichever provider you use — for example, calling Anthropic's Claude (such as claude-opus-4-8) belongs on the server, with the frontend talking only to your own /api/ai/* endpoints.

Worked Code

Building an AI feature: expense categorizer

TypeScript

// Building an AI feature: expense categorizer
async function categorizeExpense(description: string): Promise<string> {
  // ALWAYS proxy through your backend — never expose API keys
  const response = await api.post('/api/ai/categorize', {
    description,
  });
  return response.data.category; // 'meals' | 'travel' | 'other'
}

Streaming AI responses (for chatbot-like features)

TypeScript

// Streaming AI responses (for chatbot-like features)
async function streamAIResponse(
  question: string,
  onChunk: (text: string) => void
) {
  const response = await fetch('/api/ai/ask', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ question }),
  });

  const reader = response.body!.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    onChunk(decoder.decode(value));
  }
}

Usage in component (append tokens as they arrive)

TSX

// Usage in component
function AIChatPanel() {
  const [response, setResponse] = useState('');

  const ask = async (question: string) => {
    setResponse('');
    await streamAIResponse(question, (chunk) => {
      setResponse(prev => prev + chunk); // append as tokens arrive
    });
  };

  return <div className="whitespace-pre-wrap">{response}</div>;
}

Interview-Ready Q&A

From the frontend, you treat it as a normal request to your own backend: POST the input text to an endpoint like /api/ai/categorize and render the returned result. The backend is what actually calls the model (for example Anthropic's Claude, claude-opus-4-8) using the secret key it holds. This keeps the key off the client, and it lets the backend build the prompt, validate input, rate-limit, and filter output. The frontend stays thin — it never imports a provider SDK or knows the model name.

Worked Code

Interview-Ready Q&A

References & Further Reading