## Table of Contents - [Introduction](#introduction) - [Why Choose Claude AI?](#why-choose-claude-ai) - [Prerequisites](#prerequisites) - [Getting Your Anthropic API Key](#getting-your-anthropic-api-key) - [Setting Up n8n](#setting-up-n8n) - [Building Your First Claude Workflow](#building-your-first-claude-workflow) - [Integrating with N8.Chat](#integrating-with-n8chat) - [Advanced Prompt Engineering](#advanced-prompt-engineering) - [Context Management](#context-management) - [Function Calling and Tools](#function-calling-and-tools) - [Rate Limits and Cost Optimization](#rate-limits-and-cost-optimization) - [Security Best Practices](#security-best-practices) - [Real-World Use Cases](#real-world-use-cases) - [Troubleshooting](#troubleshooting) - [Conclusion](#conclusion) ## Introduction Claude AI by Anthropic is one of the most capable and reliable AI models available today. With its impressive context window, nuanced understanding, and strong safety features, Claude is an excellent choice for powering conversational experiences on your website. In this comprehensive guide, you'll learn how to connect Claude AI to your website using n8n automation and N8.Chat. By the end, you'll have a fully functional AI chatbot that can handle customer inquiries, provide product recommendations, and deliver personalized experiences at scale. No coding experience required - we'll walk through everything step by step. ## Why Choose Claude AI? ### Claude vs Other AI Models **Claude Advantages**: 1. **Longer Context Window**: Claude 3 supports up to 200K tokens (roughly 150,000 words) - perfect for analyzing entire product catalogs or documentation 2. **Better Instruction Following**: Claude is known for closely following complex instructions and maintaining character consistency 3. **Strong Safety**: Built-in guardrails reduce harmful outputs and ensure appropriate responses 4. **Honest Uncertainty**: Claude admits when it doesn't know something instead of making up answers 5. **Nuanced Understanding**: Excellent at understanding context, tone, and subtle requirements **Claude Models Available**: - **Claude 3.5 Sonnet**: Best balance of intelligence and speed - recommended for chat - **Claude 3 Opus**: Most capable, best for complex tasks - **Claude 3 Haiku**: Fastest and cheapest, good for simple queries ### When to Use Claude Claude excels at: - Customer support with complex product catalogs - Content-rich websites (blogs, documentation, knowledge bases) - Nuanced conversations requiring context awareness - Brand voice consistency - Tasks requiring careful instruction following - E-commerce with detailed product information ## Prerequisites Before getting started, you'll need: 1. **Website**: WordPress, Shopify, or any website where you can add JavaScript 2. **n8n Instance**: Self-hosted or n8n Cloud account ([get n8n](https://n8n.io)) - see our [setup guide](/docs/n8n-setup) 3. **Anthropic Account**: For Claude API access 4. **N8.Chat**: Free or paid plan ([get N8.Chat](/)) - compare with [other solutions](/compare) 5. **Basic Understanding**: Of webhooks and API concepts (we'll explain everything) **Estimated Setup Time**: 30 minutes **Cost**: Claude API starts at $0.25 per million input tokens ## Getting Your Anthropic API Key ### Step 1: Create Anthropic Account 1. Go to [console.anthropic.com](https://console.anthropic.com) 2. Click "Sign Up" 3. Verify your email address 4. Complete account setup ### Step 2: Add Payment Method Claude API is pay-as-you-go: 1. Navigate to "Billing" in the console 2. Click "Add Payment Method" 3. Enter your credit card details 4. Set up billing alerts (recommended: $50/month threshold) **Note**: Anthropic charges only for actual usage. No monthly minimums. ### Step 3: Generate API Key 1. Click on "API Keys" in the left sidebar 2. Click "Create Key" 3. Give it a descriptive name: "N8.Chat Website Integration" 4. **Important**: Copy the key immediately (you won't see it again) 5. Store it securely (we'll add it to n8n next) **Your API key looks like**: `sk-ant-api03-xxx...` ### Step 4: Test Your API Key Quick test using curl: ```bash curl https://api.anthropic.com/v1/messages \ -H "Content-Type: application/json" \ -H "x-api-key: YOUR_API_KEY" \ -H "anthropic-version: 2023-06-01" \ -d '{ "model": "claude-3-5-sonnet-20241022", "max_tokens": 1024, "messages": [ {"role": "user", "content": "Hello, Claude!"} ] }' ``` If you get a response, you're ready to proceed! ## Setting Up n8n ### Option 1: n8n Cloud (Easiest) 1. Go to [n8n.cloud](https://n8n.cloud) 2. Sign up for a free trial 3. Your instance will be ready in seconds 4. Skip to "Creating Your First Workflow" ### Option 2: Self-Hosted (More Control) **Using Docker** (recommended): ```bash # Pull the latest n8n image docker pull n8nio/n8n # Run n8n docker run -it --rm \ --name n8n \ -p 5678:5678 \ -v ~/.n8n:/home/node/.n8n \ n8nio/n8n ``` Access n8n at `http://localhost:5678` **Using npm**: ```bash # Install n8n globally npm install n8n -g # Start n8n n8n start ``` ### Configure n8n for Production For production use, configure: 1. **Environment Variables**: ```bash export N8N_HOST=yourdomain.com export N8N_PROTOCOL=https export WEBHOOK_URL=https://yourdomain.com/ ``` 2. **Secure with HTTPS**: Use a reverse proxy (Nginx, Caddy) with SSL certificate 3. **Set up Authentication**: Configure user accounts in n8n settings ## Building Your First Claude Workflow Let's build a simple workflow that receives a message, sends it to Claude, and returns the response. ### Workflow Architecture ``` [Webhook Trigger] → [Claude AI Node] → [Respond to Webhook] ``` ### Step 1: Create New Workflow 1. In n8n, click "New Workflow" 2. Name it "Claude Chat Integration" 3. Save the workflow ### Step 2: Add Webhook Trigger 1. Click the "+" button 2. Search for "Webhook" 3. Select "Webhook" node 4. Configure: - **HTTP Method**: POST - **Path**: `/chat` - **Response Mode**: "Respond to Webhook" 5. Copy the webhook URL (you'll need this later) The webhook URL looks like: ``` https://your-n8n.com/webhook/chat ``` ### Step 3: Add Anthropic Claude Node 1. Click "+" after the Webhook node 2. Search for "Anthropic" 3. Select "Anthropic Chat Model" 4. Click "Create New Credentials" 5. Paste your Anthropic API key 6. Save credentials Configure the Claude node: - **Model**: claude-3-5-sonnet-20241022 - **Prompt**: `{{ $json.body.message }}` - **Max Tokens**: 1024 - **Temperature**: 0.7 **Temperature Guide**: - 0.0-0.3: Focused, deterministic (good for facts) - 0.4-0.7: Balanced (recommended for chat) - 0.8-1.0: Creative, varied (good for content generation) ### Step 4: Add Response Node 1. The Webhook node already handles responses 2. In the Webhook node settings, set: - **Response Data**: "First Entry JSON" Your workflow is ready! Click "Execute Workflow" to activate. ### Step 5: Test the Workflow Test with curl: ```bash curl -X POST https://your-n8n.com/webhook/chat \ -H "Content-Type: application/json" \ -d '{"message": "Hello! What can you help me with?"}' ``` You should get a response from Claude! ## Integrating with N8.Chat Now let's connect this workflow to your website using N8.Chat. ### Install N8.Chat Widget **For WordPress**: 1. Install the N8.Chat plugin from WordPress directory 2. Activate it 3. Go to Settings > N8.Chat **For Shopify**: 1. Install N8.Chat from Shopify App Store 2. Configure in your Shopify admin **For Any Website**: Add this code before ``: ```html ``` ### Configure N8.Chat Settings In N8.Chat settings: 1. **Webhook URL**: Paste your n8n webhook URL 2. **AI Provider**: Select "Custom (n8n)" 3. **Model Display Name**: "Claude AI" 4. **Enable Context**: Yes (we'll implement this next) 5. **Max Context Messages**: 10 ### Enhanced Workflow for Chat Context Update your n8n workflow to maintain conversation context: **Updated Workflow**: ``` [Webhook Trigger] → [Extract Conversation ID] → [Load Previous Messages from Database] → [Format Messages for Claude] → [Claude AI Node] → [Save Message to Database] → [Respond to Webhook] ``` **Implementation**: Add a **Code** node to format messages: ```javascript // Get conversation history const conversationId = $json.body.conversationId; const currentMessage = $json.body.message; const previousMessages = $json.body.history || []; // Format for Claude API const messages = [ ...previousMessages.map(msg => ({ role: msg.role, content: msg.content })), { role: 'user', content: currentMessage } ]; return { json: { conversationId, messages } }; ``` Update the Claude node to use the formatted messages: - **Messages**: `{{ $json.messages }}` ## Advanced Prompt Engineering The key to a great Claude chatbot is effective prompt engineering. ### System Prompts Add a system message to define Claude's behavior: ```javascript const systemPrompt = `You are a helpful customer service assistant for AcmeStore, an online retailer of premium outdoor gear. Your personality: - Friendly and professional - Knowledgeable about outdoor equipment - Focused on helping customers make the right choice - Concise but thorough in responses Your capabilities: - Answer questions about products - Help with order tracking (ask for order number) - Provide sizing and fit guidance - Share care and maintenance tips Guidelines: - Keep responses under 150 words unless more detail is requested - Always be honest if you don't know something - Suggest specific products when relevant - Ask clarifying questions when needed - Never make up product specifications If a customer needs human support, politely transfer them to the support team.`; const messages = [ { role: 'system', content: systemPrompt }, ...conversationHistory, { role: 'user', content: currentMessage } ]; ``` ### Dynamic Prompts Based on Context Adjust prompts based on the page or situation: ```javascript let contextualPrompt = baseSystemPrompt; // Add product context if on product page if ($json.pageUrl.includes('/products/')) { const productInfo = await getProductInfo($json.productId); contextualPrompt += `\n\nThe customer is viewing: ${productInfo.name}\nPrice: ${productInfo.price}\nDescription: ${productInfo.description}`; } // Add cart context if items in cart if ($json.cartItems && $json.cartItems.length > 0) { const cartSummary = $json.cartItems.map(item => `${item.name} (${item.quantity})` ).join(', '); contextualPrompt += `\n\nCustomer's cart: ${cartSummary}\nCart total: $${$json.cartTotal}`; } // Add user info if logged in if ($json.userEmail) { const orderHistory = await getOrderHistory($json.userEmail); contextualPrompt += `\n\nReturning customer. Previous orders: ${orderHistory.count}`; } ``` ### Prompt Templates for Common Scenarios Create reusable prompt templates: **Product Recommendation**: ``` The customer is looking for [product category]. Based on our catalog: [Product 1]: [Brief description] - $[price] [Product 2]: [Brief description] - $[price] [Product 3]: [Brief description] - $[price] Ask about their specific needs (use case, budget, experience level) and recommend the best fit. Be genuinely helpful, not pushy. ``` **Order Support**: ``` The customer has a question about order #[order_number]. Order details: - Status: [status] - Ordered: [date] - Items: [items] - Tracking: [tracking_number] Provide a clear, reassuring update. If there's a delay, acknowledge it and explain next steps. ``` ## Context Management Managing conversation context is crucial for natural interactions. ### Conversation Memory Implement short-term and long-term memory: **Short-term (Current Conversation)**: ```javascript // Store last 10 messages in conversation const conversationMemory = { id: conversationId, messages: messages.slice(-20), // Last 10 exchanges (user + assistant) createdAt: Date.now(), expiresAt: Date.now() + (30 * 60 * 1000) // 30 minutes }; await saveToRedis(conversationId, conversationMemory); ``` **Long-term (User Preferences)**: ```javascript // Store user preferences permanently const userProfile = { email: userEmail, preferences: { favoriteCategories: ['hiking', 'camping'], priceRange: 'mid-tier', preferredBrands: ['Patagonia', 'Arc\'teryx'] }, orderHistory: await getOrderHistory(userEmail) }; await saveToDatabase('user_profiles', userProfile); ``` ### Context Window Management Claude 3.5 Sonnet has a 200K token context window, but you should optimize usage: ```javascript // Truncate context intelligently function manageContext(messages, maxTokens = 8000) { // Always keep system prompt const systemMsg = messages.find(m => m.role === 'system'); let conversationMsgs = messages.filter(m => m.role !== 'system'); // Estimate tokens (rough: 1 token ≈ 4 characters) let estimatedTokens = JSON.stringify(messages).length / 4; // Remove oldest messages if over limit while (estimatedTokens > maxTokens && conversationMsgs.length > 2) { conversationMsgs.shift(); // Remove oldest conversationMsgs.shift(); // Remove its response estimatedTokens = JSON.stringify([systemMsg, ...conversationMsgs]).length / 4; } return [systemMsg, ...conversationMsgs]; } ``` ### Semantic Context Retrieval For large knowledge bases, use semantic search: ```javascript // When customer asks a question const question = $json.message; // Find relevant documentation const relevantDocs = await semanticSearch(question, { collection: 'product_docs', limit: 3 }); // Add to context const enhancedPrompt = ` Relevant information from our knowledge base: ${relevantDocs.map(doc => doc.content).join('\n\n')} Now answer the customer's question: ${question} `; ``` ## Function Calling and Tools Claude supports function calling for dynamic actions. ### Define Available Functions ```javascript const tools = [ { name: 'get_order_status', description: 'Retrieves the current status of a customer order', input_schema: { type: 'object', properties: { order_number: { type: 'string', description: 'The order number (e.g., "12345")' } }, required: ['order_number'] } }, { name: 'search_products', description: 'Searches the product catalog', input_schema: { type: 'object', properties: { query: { type: 'string', description: 'Search query (e.g., "waterproof hiking boots")' }, max_price: { type: 'number', description: 'Maximum price filter' } }, required: ['query'] } }, { name: 'check_inventory', description: 'Checks if a product is in stock', input_schema: { type: 'object', properties: { product_id: { type: 'string', description: 'The product ID' } }, required: ['product_id'] } } ]; ``` ### Implement Function Execution ```javascript // In your n8n workflow const response = await callClaude({ model: 'claude-3-5-sonnet-20241022', messages: messages, tools: tools, max_tokens: 1024 }); // Check if Claude wants to use a function if (response.stop_reason === 'tool_use') { const toolUse = response.content.find(c => c.type === 'tool_use'); // Execute the requested function let functionResult; switch (toolUse.name) { case 'get_order_status': functionResult = await getOrderStatus(toolUse.input.order_number); break; case 'search_products': functionResult = await searchProducts(toolUse.input.query, toolUse.input.max_price); break; case 'check_inventory': functionResult = await checkInventory(toolUse.input.product_id); break; } // Send result back to Claude const finalResponse = await callClaude({ model: 'claude-3-5-sonnet-20241022', messages: [ ...messages, response, { role: 'user', content: [ { type: 'tool_result', tool_use_id: toolUse.id, content: JSON.stringify(functionResult) } ] } ], max_tokens: 1024 }); return finalResponse.content[0].text; } ``` ## Rate Limits and Cost Optimization ### Understanding Claude Pricing **Claude 3.5 Sonnet** (recommended): - Input: $3 per million tokens - Output: $15 per million tokens **Rough Translation**: - 1,000 chat messages: ~$0.50-$2.00 - Average cost per conversation: $0.01-$0.05 ### Cost Optimization Strategies **1. Cache System Prompts** Claude supports prompt caching: ```javascript const systemPrompt = { role: 'system', content: largeSystemPrompt, cache_control: { type: 'ephemeral' } }; // Cached content is 90% cheaper on subsequent calls ``` **2. Shorter Responses** Limit output tokens for simple queries: ```javascript if (isSimpleQuery(message)) { maxTokens = 256; // Short answer } else { maxTokens = 1024; // Detailed answer } ``` **3. Fallback to Haiku** Use Claude Haiku for simple queries: ```javascript const model = queryComplexity > 0.7 ? 'claude-3-5-sonnet-20241022' : 'claude-3-haiku-20240307'; ``` **4. Response Caching** Cache answers to common questions: ```javascript const cacheKey = `answer:${hashQuestion(message)}`; const cachedAnswer = await redis.get(cacheKey); if (cachedAnswer) { return cachedAnswer; } const answer = await callClaude(message); await redis.set(cacheKey, answer, 'EX', 3600); // Cache 1 hour ``` ### Rate Limits Anthropic rate limits (as of 2024): - **Tier 1**: 50 requests/min, 40,000 tokens/min - **Tier 2**: 1,000 requests/min, 80,000 tokens/min - **Tier 3+**: Higher limits available Implement rate limiting in n8n: ```javascript const rateLimiter = new RateLimiter({ tokensPerInterval: 50, interval: 'minute' }); await rateLimiter.removeTokens(1); // Proceed with API call ``` ## Security Best Practices ### API Key Security **Never expose your API key**: ```javascript // ❌ WRONG - Don't do this const apiKey = 'sk-ant-api03-xxx'; // Hardcoded // ✅ CORRECT - Use environment variables const apiKey = process.env.ANTHROPIC_API_KEY; ``` In n8n, store credentials securely in the credentials manager. ### Input Validation Sanitize user input: ```javascript function sanitizeInput(message) { // Remove potential injection attempts message = message.replace(/