Enhancing Next js Application with Claude Ai

// 1
npx create-next-app@latest my-claude-app
cd my-claude-app

// 2
npm install axios

// utils/claudeService.js
import axios from 'axios';

const CLAUDE_API_URL = 'https://api.anthropic.com/v1';
const API_KEY = process.env.CLAUDE_API_KEY;

export const fetchClaudeResponse = async (prompt) => {
  try {
    const response = await axios.post(
      `${CLAUDE_API_URL}/chat`,
      {
        prompt,
        model: 'claude-2',
        max_tokens: 1000,
        temperature: 0.7
      },
      {
        headers: {
          Authorization: `Bearer ${API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    return response.data;
  } catch (error) {
    console.error('Error fetching response from Claude AI:', error);
    throw error;
  }
};

// 1
CLAUDE_API_KEY=your_api_key_here

// 2
npm run dev

// pages/chat.js
import { useState } from 'react';
import { fetchClaudeResponse } from '../utils/claudeService';

export default function Chat() {
  const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);

  const handleSend = async () => {
    if (!input.trim()) return;

    const userMessage = { sender: 'user', text: input };
    setMessages((prev) => [...prev, userMessage]);
    setInput('');

    try {
      const response = await fetchClaudeResponse(input);
      const botMessage = { sender: 'bot', text: response.text };
      setMessages((prev) => [...prev, botMessage]);
    } catch (error) {
      setMessages((prev) => [...prev, { sender: 'bot', text: 'Error fetching response.' }]);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Chat with Claude AI</h1>
      <div style={{ border: '1px solid #ccc', padding: '10px', marginBottom: '10px', height: '300px', overflowY: 'scroll' }}>
        {messages.map((msg, index) => (
          <div key={index} style={{ textAlign: msg.sender === 'user' ? 'right' : 'left' }}>
            <strong>{msg.sender === 'user' ? 'You' : 'Claude'}:</strong> {msg.text}
          </div>
        ))}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type your message here..."
        style={{ width: '80%', marginRight: '10px' }}
      />
      <button onClick={handleSend}>Send</button>
    </div>
  );
}