Integrating free Deepseek v3 API in a React.js Application

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:

1. A React.js project set up. If not, create one using:

   npx create-react-app my-app
   cd my-app

1. Access to the Deepseek v3 API on RapidAPI.
2. 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.