Day 04 of 07

Make it talk - connect your chatbot to Claude

Goal: Today you replace the placeholder reply with a real Claude response. Your chat widget sends messages to your Netlify Function, the function passes them to Claude, and Claude answers in the chat window.

What to do

Replace chatbot.js with the full connected version

Open chatbot.js. Select all and delete everything. Paste the complete replacement below. This version sends messages to your Netlify Function and shows real Claude replies:

// Chatbot widget - connected to Claude via Netlify Function

const chatButton   = document.getElementById('chatbot-button')
const chatWindow   = document.getElementById('chatbot-window')
const chatClose    = document.getElementById('chatbot-close')
const chatInput    = document.getElementById('chatbot-input')
const chatSend     = document.getElementById('chatbot-send')
const chatMessages = document.getElementById('chatbot-messages')

chatButton.addEventListener('click', () => {
  chatWindow.classList.remove('hidden')
  chatInput.focus()
})

chatClose.addEventListener('click', () => {
  chatWindow.classList.add('hidden')
})

function addMessage(text, role) {
  const msg = document.createElement('div')
  msg.className = 'chat-message ' + role
  msg.textContent = text
  chatMessages.appendChild(msg)
  chatMessages.scrollTop = chatMessages.scrollHeight
  return msg
}

async function sendMessage() {
  const text = chatInput.value.trim()
  if (!text || chatSend.disabled) return

  addMessage(text, 'user')
  chatInput.value = ''
  chatSend.disabled = true

  const thinking = addMessage('Thinking...', 'bot')

  try {
    const res = await fetch('/.netlify/functions/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message: text }),
    })

    const data = await res.json()
    thinking.textContent = data.reply || 'Sorry, I could not get a response. Please try again.'
  } catch {
    thinking.textContent = 'Sorry, something went wrong. Please try again.'
  } finally {
    chatSend.disabled = false
    chatInput.focus()
  }
}

chatSend.addEventListener('click', sendMessage)
chatInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') sendMessage()
})

Commit, push, and wait for deploy

Go to GitHub Desktop. You should see chatbot.js as a modified file. Commit message: Connect chatbot to Claude. Commit to main then push origin. Watch your Netlify dashboard and wait for the green Published status before testing.

Test on your live site

Open your live Netlify URL in a browser. Click the chat button. Type "Hello! Who are you?" and press Send. You should see Thinking... briefly, then a real Claude response. Try a second message. Try pressing Enter instead of clicking Send.

Take a screenshot

Screenshot your live chatbot with a real Claude response visible in the chat window. This is proof that you built a working AI chatbot. Save it because you will share it on Day 7.

Expected result

Your live website has a working AI chatbot. Type a message, press Send, and Claude replies within a few seconds. Your API key stays inside your Netlify Function and never appears in the browser.

Key takeaway

A visitor message travels from your website to Netlify to Claude and back in a few seconds. That whole path is what you built.

Day 3 Day 5