How to Build Your Own AI Chatbot Using DeepSeek API for FREE (2026 Guide)

Do you want to build your own version of ChatGPT but don't want to pay $20/month for OpenAI's API?

You are in luck. With the new DeepSeek V3.1 API, you can create a powerful AI assistant for 100% free. In this tutorial, I will show you how to build a fully functional AI Chatbot in just 5 minutes using simple HTML and JavaScript. No advanced coding skills required!

Step 1: Get Your Free API Key

Before we code, you need a "Key" to talk to DeepSeek's brain.

Go to the DeepSeek Developer Platform (or use OpenRouter for the free tier) 🚀.
Sign up with your Google account.
Navigate to "API Keys" and click "Create New Key".
Copy the key (It starts with sk-...). Keep it safe!

Step 2: The Magic Code (Copy & Paste)

Create a new file on your computer named index.html. Open it with Notepad or VS Code and paste the code below.

Note: Replace 'YOUR_API_KEY_HERE' with the key you just copied.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Free AI Chatbot 2026</title>
    <style>
        body { font-family: 'Arial', sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f4f4f9; }
        .chat-container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        #chat-box { height: 400px; overflow-y: scroll; border-bottom: 2px solid #ddd; margin-bottom: 20px; padding: 10px; }
        .message { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .user { background-color: #007bff; color: white; text-align: right; margin-left: 20%; }
        .ai { background-color: #e9ecef; color: black; text-align: left; margin-right: 20%; }
        input { width: 75%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; }
        button:hover { background-color: #218838; }
    </style>
</head>
<body>

<div class="chat-container">
    <h2 style="text-align:center;">🤖 My DeepSeek Bot</h2>
    <div id="chat-box"></div>
    <div style="display: flex; gap: 10px;">
        <input type="text" id="userInput" placeholder="Ask me anything...">
        <button onclick="sendMessage()">Send</button>
    </div>
</div>

<script>
    async function sendMessage() {
        const inputField = document.getElementById('userInput');
        const chatBox = document.getElementById('chat-box');
        const message = inputField.value;

        if (!message) return;

        // Show User Message
        chatBox.innerHTML += `<div class="message user"><strong>You:</strong> ${message}</div>`;
        inputField.value = '';

        // Call DeepSeek API
        try {
            const response = await fetch('https://api.deepseek.com/chat/completions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer YOUR_API_KEY_HERE' // 🔴 PASTE YOUR KEY HERE
                },
                body: JSON.stringify({
                    model: "deepseek-chat",
                    messages: [{"role": "user", "content": message}]
                })
            });

            const data = await response.json();
            const aiReply = data.choices[0].message.content;

            // Show AI Message
            chatBox.innerHTML += `<div class="message ai"><strong>Bot:</strong> ${aiReply}</div>`;
            
        } catch (error) {
            chatBox.innerHTML += `<div class="message ai" style="color:red;">Error: Check Console</div>`;
            console.error(error);
        }
        
        // Auto-scroll to bottom
        chatBox.scrollTop = chatBox.scrollHeight;
    }
</script>

</body>
</html>

Step 3: How to Run It?

Save the file.
Double-click index.html to open it in Chrome/Edge.
Type a message like "Write a poem about coding" and hit Send.
Watch your AI write it instantly!

Is This Safe? (Important)

Since this is a client-side code (HTML), your API key is visible in the source code.

Safe for: Personal use on your own computer.
Not Safe for: Publishing on a public website (hackers can steal your key).
Solution: For a public site, you should use a backend (Node.js/Python) to hide the key 🔐.

Conclusion

You just built your own AI tool! Now you don't need to visit ChatGPT every time.

Want to learn how to host this online for free? Let me know in the comments!