How to Integrate DeepSeek with Next.js Using the OpenAI SDK, TypeScript, and Tailwind CSS

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js (v16 or later)
• npm or yarn
• A DeepSeek API key

Step 1: Set Up a New Next.js Project

First, let's create a new Next.js project with TypeScript and Tailwind CSS.

npx create-next-app@latest deepseek-nextjs --typescript

Select the following default options to get started with ESLint, Tailwind, App Router and Turbopack.

✔ Would you like to use ESLint? … No / **Yes**
✔ Would you like to use Tailwind CSS? … No / **Yes**
✔ Would you like your code inside a `src/` directory? … No / **Yes**
✔ Would you like to use App Router? (recommended) … No / **Yes**
✔ Would you like to use Turbopack for `next dev`? … No / **Yes**
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
****✔ What import alias would you like configured? … **@/***
Creating a new Next.js app 

Once this completes, cd into the folder and lets get started.

cd deepseek-nextjs

Step 2: Install OpenAI SDK

Install the OpenAI SDK:

npm install openai

Step 3: Create an API Route

Next.js allows you to create API routes within the app/api directory. Let's create a new API route to handle DeepSeek requests.

Create a new file app/api/competitions/route.ts:

import { NextResponse } from 'next/server';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.DEEPSEEK_API_KEY,
  baseURL: process.env.DEEPSEEK_API_URL,
});

export async function POST(req: Request) {
  try {
    const { prompt } = await req.json();

    if (!prompt) {
      return NextResponse.json({ message: 'Prompt is required' }, { status: 400 });
    }

    const response = await openai.completions.create({
      model: 'deepseek-chat', // or use deepseek-reasoner here
      prompt: prompt,
      max_tokens: 150,
    });

    return NextResponse.json({ response: response.choices[0].text }, { status: 200 });
  } catch (error) {
    console.error(error);
    return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
  }
}

Step 4: Create a Frontend Component

Now, let's create a simple frontend component to interact with our API.

Create a new file components/DeepSeekForm.tsx:

'use client';
import { useState } from 'react';

export default function DeepSeekForm() {
  const [prompt, setPrompt] = useState('');

  const [loading, setLoading] = useState(false);

  const [chatHistory, setChatHistory] = useState<
    Array<{
      text: string;
      isMessage: boolean;
      timestamp: number;
    }>
  >([]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    setLoading(true);
    setChatHistory((prev) => [
      ...prev,
      { text: prompt, isMessage: true, timestamp: Date.now() },
    ]);
    setPrompt('');

    const res = await fetch('/api/deepseek', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ prompt }),
    });

    const data = await res.json();

    setLoading(false);
    setChatHistory((prev) => [
      ...prev,
      { text: data.response, isMessage: false, timestamp: Date.now() + 1 },
    ]);
  };

  return (
    <div className='p-6 w-full max-w-lg mx-auto bg-white rounded-xl shadow-md space-y-4'>
      <div className='space-y-4 mb-4 max-h-96 overflow-y-auto'>
        {chatHistory
          .sort((a, b) => a.timestamp - b.timestamp)
          .map((chat, index) => (
            <div
              key={index}
              className={`flex ${
                chat.isMessage ? 'justify-end' : 'justify-start'
              }`}
            >
              <div
                className={`p-3 rounded-lg max-w-xs ${
                  chat.isMessage
                    ? 'bg-blue-500 text-white'
                    : 'bg-gray-200 text-black'
                }`}
              >
                {chat.text}
              </div>
            </div>
          ))}
      </div>

      <form onSubmit={handleSubmit} className='space-y-4 text-black'>
        <textarea
          className='w-full p-2 border rounded-md'
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder='Enter your prompt'
        />
        <button
          type='submit'
          className='w-full px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 justify-center flex items-center'
        >
          {loading ? (
            <div className='animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full' />
          ) : (
            'Submit'
          )}
        </button>
      </form>
    </div>
  );
}

Step 5: Use the Component in a Page

Finally, let's use the DeepSeekForm component in a page.

Edit app/page.tsx:

import type { NextPage } from 'next';
import DeepSeekForm from '@/components/DeepSeekForm';

const Home: NextPage = () => {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <DeepSeekForm />
    </div>);
};

export default Home;

Step 6: Add Environment Variables

Create a .env.local file in the root of your project and add your DeepSeek API key:

DEEPSEEK_API_KEY=[your_api_key_here]
DEEPSEEK_API_URL=https://api.deepseek.com

Step 7: Run the Application

Start your Next.js application:

npm run dev

Visit http://localhost:3000 in your browser, and you should see the form. Enter a prompt, submit it, and you'll receive a response from DeepSeek.

Conclusion

In this tutorial, we've successfully integrated DeepSeek with a Next.js application using the OpenAI SDK. We used TypeScript for type safety and Tailwind CSS for styling. This setup can be extended further to build more complex applications leveraging the power of DeepSeek. Go forth and call yourself an AI engineer now.

Finished project github link 🔗