DEV Community: Andrew Atef

Integrating free Deepseek v3 API in a React.js Application

Andrew Atef — Thu, 02 Jan 2025 22:02:57 +0000

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.

Building a React.js Site for an AI-Powered Upwork Proposal Generator

Andrew Atef — Mon, 30 Dec 2024 15:11:44 +0000

Building a React.js Site for an AI-Powered Upwork Proposal Generator

Freelancing platforms like Upwork have become pivotal for connecting clients with talented professionals. However, creating compelling proposals can be daunting for many freelancers. To help developers build tools that simplify this process, RapidAPI provides the "Upwork Proposal Generator - AI" API. With this article, we'll guide you through creating a React.js site that leverages this API, helping developers explore and integrate it into their projects.

Why Use the "Upwork Proposal Generator - AI" API?

This API simplifies the process of generating tailored proposals by providing an AI-powered endpoint that accepts specific input parameters, such as user expertise and project requirements. It then returns a professionally crafted proposal, saving time and increasing the chances of winning bids.

Key Features of the API:

Ease of Use: Only one endpoint is required to generate proposals.
Customizable Inputs: Provide your expertise and project details for personalized outputs.
RapidAPI Integration: Easily accessible via the RapidAPI platform.

Creating the React.js Site

Step 1: Setting Up the React.js Project

Install Node.js if you haven’t already.
Create a new React app:

   npx create-react-app upwork-proposal-generator

Navigate to the project folder:

   cd upwork-proposal-generator

Step 2: Install Axios and RapidAPI SDK

We’ll use axios for API calls:

npm install axios

Step 3: Create the Proposal Generator Component

Create a new file ProposalGenerator.js in the src directory and add the following code:

import React, { useState } from "react";
import axios from "axios";

const ProposalGenerator = () => {
  const [about, setAbout] = useState("");
  const [project, setProject] = useState("");
  const [response, setResponse] = useState("");
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    setLoading(true);
    try {
      const result = await axios.post("https://upwork-proposal-generator-ai.p.rapidapi.com/endpoint", {
        temperature: 0,
        About: about,
        Project: project,
      }, {
        headers: {
          "X-RapidAPI-Host": "upwork-proposal-generator-ai.p.rapidapi.com",
          "X-RapidAPI-Key": "YOUR_RAPIDAPI_KEY",
          "Content-Type": "application/json",
        },
      });
      setResponse(result.data.response);
    } catch (error) {
      setResponse("Error generating proposal. Please try again.");
    }
    setLoading(false);
  };

  return (
    <div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
      <h1>Upwork Proposal Generator</h1>
      <textarea
        placeholder="Describe yourself (About)"
        value={about}
        onChange={(e) => setAbout(e.target.value)}
        rows="5"
        cols="50"
        style={{ display: "block", margin: "10px 0", width: "100%" }}
      />
      <textarea
        placeholder="Describe the project"
        value={project}
        onChange={(e) => setProject(e.target.value)}
        rows="5"
        cols="50"
        style={{ display: "block", margin: "10px 0", width: "100%" }}
      />
      <button onClick={handleGenerate} disabled={loading} style={{ marginTop: "10px" }}>
        {loading ? "Generating..." : "Generate Proposal"}
      </button>
      <div style={{ marginTop: "20px" }}>
        <h3>Generated Proposal:</h3>
        <pre style={{ whiteSpace: "pre-wrap", wordWrap: "break-word" }}>{response}</pre>
      </div>
    </div>
  );
};

export default ProposalGenerator;

Step 4: Integrate the Component

Edit App.js to include the ProposalGenerator component:

import React from "react";
import ProposalGenerator from "./ProposalGenerator";

function App() {
  return (
    <div>
      <ProposalGenerator />
    </div>
  );
}

export default App;

Step 5: Run the Application

Start your development server:

npm start

Navigate to http://localhost:3000 in your browser to use the application.

Encourage Developers to Explore the API

The "Upwork Proposal Generator - AI" API is a fantastic tool for developers to create value-driven applications that automate proposal writing. By following the steps above, developers can easily build a React.js site that integrates this API, opening new opportunities for freelancers to craft winning proposals.

Why Choose the API for Your Projects?

Save Time: Automates the proposal-writing process.
Increase Efficiency: Ensures proposals are tailored and professional.
Easy Integration: Accessible via RapidAPI with minimal setup.

Start building your React.js application today and explore how the "Upwork Proposal Generator - AI" API can revolutionize freelancing for your users. Visit RapidAPI to access the API and start innovating!