Calling the Claude API from React

Connect your React chat app to the Claude API. Handle async requests, loading states, and errors in a React component.

~1 hour Hands-on Precision AI Academy

Today's Objective

Learn the core concepts of Calling the Claude API from React and apply them in practical exercises.

API Architecture: Never Call AI APIs Directly From the Browser

Your API key would be visible to anyone who opened DevTools. Always route AI API calls through a backend proxy — even a simple one.

bash

# Install a simple Express server
npm install express cors
npm install -D nodemon

javascript — server.js

const express = require('express');
const cors = require('cors');

const app = express();
app.use(cors({ origin: 'http://localhost:5173' }));
app.use(express.json());

const Anthropic = require('@anthropic-ai/sdk');
const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

app.post('/api/chat', async (req, res) => {
  const { messages } = req.body;

  try {
    const response = await client.messages.create({
      model: 'claude-3-haiku-20240307',
      max_tokens: 1024,
      messages: messages,  // array of {role, content}
    });
    res.json({ content: response.content[0].text });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3001, () => console.log('API server on :3001'));

bash

# In a .env file (git-ignored)
ANTHROPIC_API_KEY=sk-ant-...

# Run the server
node server.js

Calling the API From React

jsx

async function sendMessage(userText) {
  const userMsg = { role: 'user', content: userText };
  setMessages(prev => [...prev, userMsg]);
  setIsLoading(true);
  setError(null);

  try {
    const response = await fetch('http://localhost:3001/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        messages: [...messages, userMsg]  // send full history
      })
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const data = await response.json();
    setMessages(prev => [...prev, {
      id: Date.now(),
      role: 'assistant',
      content: data.content
    }]);
  } catch (err) {
    setError('Failed to get response. Try again.');
  } finally {
    setIsLoading(false);  // always clear loading, even on error
  }
}

⚠️

Pass the full message history. Claude is stateless — it doesn't remember previous messages unless you send them. Always include the full messages array including the new user message.

Loading State UI

jsx

function TypingIndicator() {
  return (
    
      
        
      
    
  );
}

// In the messages render:
{messages.map(msg => )}
{isLoading && }
{error && {error}
}

useCallback and Performance

jsx

import { useState, useCallback } from 'react';

// Without useCallback, sendMessage recreates on every render
// ChatInput would re-render unnecessarily
const sendMessage = useCallback(async (userText) => {
  // ... the function body
}, [messages]);  // only recreate when messages changes

Day 2 Checkpoint

Before moving on, confirm understanding of these key concepts:

What is the core concept introduced in this lesson?
How does the main technique or tool work in practice?
What common mistakes should be avoided?
How would this apply in a real-world project?
What is the next logical step to build on this knowledge?

Calling the Claude API from React

Today's Objective

API Architecture: Never Call AI APIs Directly From the Browser

Calling the API From React

Loading State UI

useCallback and Performance

Supporting References & Reading

Go deeper with these external resources.

Day 2 Checkpoint