This content originally appeared on DEV Community and was authored by Andrew Atef
Integrating the Deepseek v3 API in a React.js Application
The Deepseek v3 API, available on RapidAPI, offers a powerful way to integrate natural language processing capabilities into your application. This guide demonstrates how to use the API in a React.js project to process messages and interact with the Deepseek chatbot.
Prerequisites
Before you begin, ensure you have the following:
- A React.js project set up. If not, create one using:
npx create-react-app my-app
cd my-app
- Access to the Deepseek v3 API on RapidAPI.
- Your API key for authentication.
Step 1: Install Axios
We recommend using Axios for HTTP requests in React.js. Install it by running:
npm install axios
Step 2: Set Up the API Request
Create a new file, deepseekService.js, in the src directory to handle the API requests. Here's the implementation:
import axios from 'axios';
const API_URL = 'https://deepseek-v3.p.rapidapi.com/chat';
const API_KEY = 'your-rapidapi-key';
export const fetchChatResponse = async (message) => {
const data = {
messages: [
{
role: 'user',
content: message,
},
],
};
const headers = {
'x-rapidapi-key': API_KEY,
'x-rapidapi-host': 'deepseek-v3.p.rapidapi.com',
'Content-Type': 'application/json',
};
try {
const response = await axios.post(API_URL, data, { headers });
return response.data;
} catch (error) {
console.error('Error fetching chat response:', error);
throw error;
}
};
Replace your-rapidapi-key with your actual API key from RapidAPI.
Step 3: Create a Chat Component
Create a Chat.js file in the src directory and implement the chat functionality:
import React, { useState } from 'react';
import { fetchChatResponse } from './deepseekService';
const Chat = () => {
const [userMessage, setUserMessage] = useState('');
const [chatResponse, setChatResponse] = useState('');
const [loading, setLoading] = useState(false);
const handleSendMessage = async () => {
if (!userMessage.trim()) return;
setLoading(true);
try {
const response = await fetchChatResponse(userMessage);
setChatResponse(response.messages[0]?.content || 'No response');
} catch (error) {
setChatResponse('An error occurred. Please try again.');
} finally {
setLoading(false);
}
};
return (
<div style={{ padding: '20px' }}>
<h1>Deepseek Chat</h1>
<textarea
rows="4"
cols="50"
value={userMessage}
onChange={(e) => setUserMessage(e.target.value)}
placeholder="Type your message here..."
/>
<br />
<button onClick={handleSendMessage} disabled={loading}>
{loading ? 'Sending...' : 'Send'}
</button>
<div style={{ marginTop: '20px' }}>
<h3>Response:</h3>
<p>{chatResponse}</p>
</div>
</div>
);
};
export default Chat;
Step 4: Integrate the Component
In your App.js file, import and use the Chat component:
import React from 'react';
import Chat from './Chat';
function App() {
return (
<div className="App">
<Chat />
</div>
);
}
export default App;
Step 5: Run the Application
Start your React application:
npm start
Open http://localhost:3000 in your browser. You should see the chat interface where you can send messages and receive responses from the Deepseek v3 API.
Conclusion
Integrating the Deepseek v3 API into your React.js application is a straightforward process that enhances user interaction with AI-powered chat capabilities. This guide walked you through setting up the API, creating a chat interface, and making API requests. You can now customize and expand this functionality based on your application's requirements.
This content originally appeared on DEV Community and was authored by Andrew Atef
Andrew Atef | Sciencx (2025-01-02T22:02:57+00:00) Integrating free Deepseek v3 API in a React.js Application. Retrieved from https://www.scien.cx/2025/01/02/integrating-free-deepseek-v3-api-in-a-react-js-application/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.