Free tools Windows power users keep installed
One-click scans. No signup required.
To build a chat app with the DeepSeek API, put the interactive chat in a React client component and send its messages to a Next.js App Router route. That server route calls DeepSeek and returns the answer—either all at once or as a stream. Keep DEEPSEEK_API_KEY on the server, never in browser code.
How the app fits together
The implementation has three parts: a client-side chat interface, a Next.js Route Handler, and a server-side request to DeepSeek. The browser sends the conversation to your own app; the route can validate it, call the provider, and send a response back. This keeps credentials out of the browser and gives you a place to control incoming requests.
- React client: collects the user’s message, displays the conversation, and manages pending or streaming output.
- Next.js route: accepts a POST request from the client and uses a server-only environment variable for authentication.
- DeepSeek API: receives the chat messages and returns a completion.
Choose a response style
| Approach | How it works | Trade-off |
|---|---|---|
| Complete response | The route waits for the full completion, then returns it to the browser. | Simpler to implement and handle; the user sees the answer after generation finishes. |
| Streaming | The route forwards output as it arrives, and the UI appends each piece to the current answer. | Shows progress sooner, but requires incremental response handling in both the route and the client. |
DeepSeek’s chat completion API supports streaming, but a streaming response is made of chunks; code expecting one finished response body will not display it incrementally. Start with a complete response if simplicity matters, and add streaming when incremental output improves the experience.
Set up the project and keep the key private
- Create or open a Next.js project using the App Router. The example paths below assume the project uses the default
appdirectory. - Store your key in a server-side environment variable named
DEEPSEEK_API_KEY. Do not name itNEXT_PUBLIC_DEEPSEEK_API_KEY: Next.js makes variables with theNEXT_PUBLIC_prefix available to browser JavaScript. - Read the variable only in the server route. Do not import the provider SDK or use the secret in the client component.
Next.js describes Route Handlers this way: “Route Handlers allow you to create custom request handlers for a given route using the Web Request and Response APIs.” See the Next.js Route Handlers guide for the current conventions.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
Create the server route
Create app/api/chat/route.ts and export a POST handler. The route receives the browser’s conversation, calls DeepSeek’s POST /chat/completions endpoint, and returns a result. DeepSeek’s OpenAI-compatible base URL is https://api.deepseek.com; its official quick start shows configuring the OpenAI SDK with that base URL and process.env.DEEPSEEK_API_KEY.
Use the current model identifier from DeepSeek’s models and pricing reference, rather than assuming an older tutorial’s name is still current. For the complete-response version, the key flow is:
- Parse the incoming JSON and confirm it contains a non-empty messages array with supported roles and content.
- Check that
DEEPSEEK_API_KEYis set; return a server error if it is missing rather than making an unauthenticated request. - Send the messages to the chat completions endpoint with the selected model and streaming disabled.
- Return the completion content to the browser as JSON, and handle provider or network errors without exposing the secret.
For streaming, enable the provider’s stream option and forward chunks through a response stream instead of waiting for one completed result. The client must read that stream and update the visible assistant message as data arrives. Consult the DeepSeek API quick start for the request format and current SDK example.
Build the interactive React chat
The component that owns the input, conversation state, submit event, pending state, or browser stream reader must be a client component. Add 'use client' at the top of its file. React uses this directive to mark a client component entry point; the provider request itself should remain in the route.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches- Keep messages in component state and render them in order, distinguishing user and assistant roles.
- On submit, prevent the browser’s default form action, add the user’s message to the conversation, and disable or otherwise guard repeated submissions while the request is pending.
- POST the conversation to
/api/chatas JSON. Handle non-success responses visibly instead of treating them as assistant text. - For a complete response, append the returned assistant content when the request resolves. For streaming, create or update an assistant message as chunks arrive.
- Restore the input and pending state after success or failure so the user can continue the conversation.
Keep UI state and secrets on the correct sides of the boundary: the browser needs the messages and rendered answer, while only the server route needs the DeepSeek credential.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Select a model and understand API costs
Model identifiers and prices change. The following values are DeepSeek API Docs’ published weekday peak rates, accessed 2026-09-30, in US dollars per million tokens. Input prices shown are for a cache miss; output is billed separately. Off-peak rates are half the listed peak rates, during weekdays outside the stated peak windows.
| Model identifier | Peak input, cache miss | Peak output |
|---|---|---|
deepseek-flash (DeepSeek-V4.1-Flash) |
$0.30 per million tokens | $1.20 per million tokens |
deepseek-v4-pro (DeepSeek-V4-Pro-0813) |
$1.32 per million tokens | $3.96 per million tokens |
DeepSeek lists weekday peak windows as 01:00–04:00 and 06:00–10:00 UTC. These are a dated pricing snapshot, not fixed rates; check the live pricing page before estimating current usage. Your cost depends on input and output token counts, cached-input treatment, model, and when requests occur. Choose based on the capability your app needs and its usage—not on a blanket claim that one model is best.
The current models page identifies deepseek-flash and deepseek-v4-pro. It also says the legacy names deepseek-v4-flash and deepseek-v4-flash-vision-exp remain accepted but route to the newer Flash model. Verify identifiers against the current DeepSeek models reference when configuring the app.
Quick Recap
Best Value
Common implementation mistakes
- Putting the key in client code: a browser request to DeepSeek exposes the credential. Send requests through your server route instead.
- Using a public environment variable for the key: any
NEXT_PUBLIC_variable may be inlined into browser JavaScript at build time. Use a server-only name. - Expecting a stream to be a finished JSON answer: streamed output arrives in chunks. Process and display those chunks, or disable streaming and handle one complete response.
- Copying an outdated model name: model aliases can change or route elsewhere. Check DeepSeek’s current model reference before deployment.
- Assuming token costs are fixed: rates vary by model, cached input, and time window, and DeepSeek may update them. Recheck the live pricing table when budgeting.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
