Introduction
In this tutorial, you'll learn how to build a simple AI-powered chat application using Anthropic's Claude API. This tutorial is designed for beginners with no prior experience in AI development. You'll create a basic chatbot that can answer questions about technology, using Claude's powerful language model through a simple web interface. By the end of this tutorial, you'll understand how to integrate AI into web applications and how to work with AI APIs in general.
Prerequisites
- A basic understanding of HTML, CSS, and JavaScript
- A free account on Anthropic's website to get an API key
- A code editor like VS Code or any text editor
- Node.js installed on your computer (for running the server)
- Basic knowledge of how to open terminal/command prompt
Step-by-Step Instructions
Step 1: Get Your Anthropic API Key
Before you can start building, you need access to Anthropic's AI models. Visit https://console.anthropic.com/ and create a free account if you don't already have one.
1.1 Navigate to the API Keys Section
Once logged in, go to the "API Keys" section in your account dashboard. This is where you'll find your secret API key that allows your applications to communicate with Claude.
1.2 Copy Your API Key
Click on the "Create API Key" button and copy the generated key. Keep this key secure - it's like a password for accessing Anthropic's AI services. Never share it publicly or commit it to version control systems.
Step 2: Set Up Your Project Directory
First, create a new folder on your computer for this project. Name it something like "claude-chatbot".
2.1 Create the Project Structure
Inside your project folder, create these files:
- index.html
- style.css
- script.js
- server.js
2.2 Initialize Node.js Project
Open your terminal in the project folder and run:
npm init -yThis creates a package.json file that will manage your project dependencies.
Step 3: Install Required Dependencies
Install the necessary Node.js packages for our chatbot to work:
3.1 Install Express and Axios
Express will help us create a web server, and Axios will handle HTTP requests to Anthropic's API:
npm install express axiosStep 4: Create the HTML Interface
Open your index.html file and paste this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claude AI Chatbot</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<h1>Claude AI Chatbot</h1>
<div id="chat-history"></div>
<div class="input-area">
<input type="text" id="user-input" placeholder="Ask me anything...">
<button id="send-btn">Send</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Step 5: Style Your Chat Interface
Open your style.css file and add these styles:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.chat-container {
max-width: 600px;
margin: 0 auto;
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
}
#chat-history {
height: 400px;
overflow-y: scroll;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.message {
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #e3f2fd;
text-align: right;
}
.ai-message {
background-color: #f5f5f5;
}
.input-area {
display: flex;
gap: 10px;
}
#user-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
#send-btn {
padding: 10px 20px;
background-color: #2196f3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#send-btn:hover {
background-color: #1976d2;
}Step 6: Set Up the JavaScript Logic
Open your script.js file and add this code:
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
const chatHistory = document.getElementById('chat-history');
// Function to add messages to chat
function addMessage(text, isUser) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');
messageDiv.textContent = text;
chatHistory.appendChild(messageDiv);
chatHistory.scrollTop = chatHistory.scrollHeight;
}
// Function to send message to backend
async function sendMessage() {
const message = userInput.value;
if (!message) return;
addMessage(message, true);
userInput.value = '';
try {
const response = await fetch('/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message }),
});
const data = await response.json();
addMessage(data.response, false);
} catch (error) {
console.error('Error:', error);
addMessage('Error: Could not get response from AI', false);
}
}
// Event listeners
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});Step 7: Create the Backend Server
Open your server.js file and paste this code:
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3000;
// Middleware
app.use(express.json());
app.use(express.static('.'));
// Replace with your actual Anthropic API key
const ANTHROPIC_API_KEY = 'your-api-key-here';
// Chat endpoint
app.post('/chat', async (req, res) => {
try {
const { message } = req.body;
// Call Anthropic's API
const response = await axios.post('https://api.anthropic.com/v1/messages', {
model: 'claude-3-haiku-20240307',
max_tokens: 1000,
messages: [
{
role: 'user',
content: message
}
]
}, {
headers: {
'anthropic-version': '2023-06-01',
'content-type': 'application/json',
'x-api-key': ANTHROPIC_API_KEY
}
});
// Send the AI response back to the client
res.json({
response: response.data.content[0].text
});
} catch (error) {
console.error('Error calling Anthropic API:', error.response.data);
res.status(500).json({
response: 'Sorry, I encountered an error processing your request.'
});
}
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});7.1 Add Your API Key
Replace 'your-api-key-here' in the server.js file with the API key you copied earlier.
Step 8: Run Your Chatbot
8.1 Start the Server
In your terminal, run:
node server.jsYou should see "Server running at http://localhost:3000" in your terminal.
8.2 Open Your Chatbot
Open your web browser and go to http://localhost:3000. You should see your chat interface.
8.3 Test Your Chatbot
Try asking questions like "What is artificial intelligence?" or "How does machine learning work?" The AI should respond with helpful answers.
Summary
In this tutorial, you've learned how to create a simple AI-powered chatbot using Anthropic's Claude API. You've built a complete web application with HTML, CSS, JavaScript, and Node.js that can communicate with AI models. This demonstrates how enterprise customers can leverage existing AI budgets to build custom applications using third-party tools and services, similar to how Anthropic's marketplace allows customers to spend their AI budget on various AI-powered solutions.
Key concepts covered include setting up API access, creating a web interface, building a backend server, and handling HTTP requests between frontend and AI services. This foundation can be extended to build more complex AI applications that integrate with various AI platforms and services.
