How to Integrate Claude API into React Apps

1.npm install @anthropic-ai/sdk

1.// backend/server.js
2.import Anthropic from '@anthropic-ai/sdk';
3.import express from 'express';
4.import cors from 'cors';
5.
6.const app = express();
7.app.use(cors()); // Enable CORS for React frontend
8.app.use(express.json());
9.
10.const client = new Anthropic({
11.  apiKey: process.env.ANTHROPIC_API_KEY,
12.});
13.
14.app.post('/api/chat', async (req, res) => {
15.  try {
16.    const { message } = req.body;
17.
18.    const response = await client.messages.create({
19.      model: 'claude-sonnet-4-5-20250929',
20.      max_tokens: 1024,
21.      messages: [{ role: 'user', content: message }],
22.    });
23.
24.    res.json({ response: response.content[0].text });
25.  } catch (error) {
26.    res.status(500).json({ error: error.message });
27.  }
28.});
29.
30.app.listen(3001, () => console.log('Server running on port 3001'));

1.import { useState } from 'react';
2.
3.function ChatWithClaude() {
4.  const [message, setMessage] = useState('');
5.  const [response, setResponse] = useState('');
6.  const [loading, setLoading] = useState(false);
7.
8.  const sendMessage = async () => {
9.    setLoading(true);
10.    try {
11.      const res = await fetch('/api/chat', {
12.        method: 'POST',
13.        headers: { 'Content-Type': 'application/json' },
14.        body: JSON.stringify({ message }),
15.      });
16.
17.      const data = await res.json();
18.      setResponse(data.response);
19.    } catch (error) {
20.      console.error('Error:', error);
21.    } finally {
22.      setLoading(false);
23.    }
24.  };
25.
26.  return (
27.    <div>
28.      <input
29.        value={message}
30.        onChange={(e) => setMessage(e.target.value)}
31.        placeholder="Ask Claude..."
32.      />
33.      <button onClick={sendMessage} disabled={loading}>
34.        {loading ? 'Thinking...' : 'Send'}
35.      </button>
36.      {response && <p>{response}</p>}
37.    </div>
38.  );
39.}

1.// Backend with streaming
2.app.post('/api/chat-stream', async (req, res) => {
3.  const { message } = req.body;
4.
5.  res.setHeader('Content-Type', 'text/event-stream');
6.  res.setHeader('Cache-Control', 'no-cache');
7.  res.setHeader('Connection', 'keep-alive');
8.
9.  const stream = await client.messages.create({
10.    model: 'claude-sonnet-4-5-20250929',
11.    max_tokens: 1024,
12.    messages: [{ role: 'user', content: message }],
13.    stream: true,
14.  });
15.
16.  for await (const event of stream) {
17.    if (event.type === 'content_block_delta') {
18.      res.write(`data: ${JSON.stringify(event.delta)}\n\n`);
19.    }
20.  }
21.
22.  res.end();
23.});

1.const sendMessage = async () => {
2.  setLoading(true);
3.  setError(null);
4.
5.  try {
6.    const res = await fetch('/api/chat', {
7.      method: 'POST',
8.      headers: { 'Content-Type': 'application/json' },
9.      body: JSON.stringify({ message }),
10.    });
11.
12.    if (!res.ok) {
13.      throw new Error(`HTTP error! status: ${res.status}`);
14.    }
15.
16.    const data = await res.json();
17.    setResponse(data.response);
18.  } catch (error) {
19.    setError('Failed to get response. Please try again.');
20.    console.error('Error:', error);
21.  } finally {
22.    setLoading(false);
23.  }
24.};

1.# .env
2.ANTHROPIC_API_KEY=your-api-key-here