Claude Chat with Memory

A web-based chat application that integrates with Anthropic's Claude API and includes a persistent memory feature. The memory system allows Claude to remember information across conversations using a local filesystem-based storage.

Features

• 💬 Interactive Chat Interface - Clean, modern web UI for chatting with Claude
• 🧠 Persistent Memory - Claude can remember information across the conversation
• 📁 Filesystem-based Storage - Memory stored in local files for easy inspection
• 🔄 Context Management - Automatic context management to optimize token usage
• 📊 Memory Status Display - Real-time view of what's stored in memory
• 🎨 Modern UI - Responsive design with typing indicators and smooth animations

Prerequisites

• Node.js 18.0.0 or higher
• An Anthropic API key (get one at console.anthropic.com)

Installation

1. Clone or download this project

   cd chat-app

2. Install dependencies

   npm install

3. Configure environment variables

   cp .env.example .env

   Edit the .env file and add your Anthropic API key:

   ANTHROPIC_API_KEY=your_actual_api_key_here
   

4. Start the server

   npm start

   Or for development with auto-restart:

   npm run dev

5. Open the application Navigate to http://localhost:3000 in your browser

Usage

Basic Chat

• Type your message in the input field at the bottom
• Press Enter or click Send to send your message
• Claude will respond with memory capabilities enabled

Memory Features

• Tell Claude to remember something: "Remember that I work at FNBO"
• Ask Claude to recall information: "What do you know about me?"
• The memory is persistent and stored in ./memory/memories/ directory
• View current memory status in the left sidebar

Memory Operations

The memory system supports several operations:

• Create - Store new information
• View - Read stored memories
• Edit - Modify existing memories
• Delete - Remove memories
• Organize - Structure memories in directories

Example Interactions

You: Remember that my favorite programming language is TypeScript
Claude: I'll remember that your favorite programming language is TypeScript.

You: Remember that I'm working on a React project for my startup
Claude: I've noted that you're working on a React project for your startup.

You: What do you remember about me?
Claude: I remember that you work at FNBO, your favorite programming language is TypeScript, 
        and you're working on a React project for your startup.

Project Structure

chat-app/
├── server.js           # Express server with Anthropic API integration
├── public/
│   └── index.html      # Frontend chat interface
├── memory/
│   └── memories/       # Directory where memories are stored
├── package.json        # Node.js dependencies
├── .env.example        # Environment variables template
└── README.md          # This file

Memory System Details

The memory system uses a local filesystem implementation that:

• Stores memories as files in the ./memory/memories/ directory
• Supports hierarchical organization with folders
• Validates all paths to prevent directory traversal
• Provides CRUD operations for memory management

Memory Tool Commands

The system implements these memory operations:

• view - Display file or directory contents
• create - Create new memory files
• str_replace - Edit specific text in files
• insert - Add text at specific line positions
• delete - Remove files or directories
• rename - Rename files or directories

Configuration

Environment Variables

• ANTHROPIC_API_KEY - Required. Your Anthropic API key
• MODEL - Optional. Claude model to use (default: claude-sonnet-4-20250514)
• PORT - Optional. Server port (default: 3000)

Context Management

The application includes automatic context management that:

• Clears old tool uses when token limit is approached
• Keeps the most recent tool interactions
• Excludes important tools from being cleared
• Optimizes token usage for longer conversations

API Endpoints

• POST /api/chat - Send a message to Claude

  • Body: { message: string, conversationId: string }
  • Response: { response: string, conversationId: string }

• GET /api/memory/status - Get current memory system status

  • Response: { status: string, content: string }

• POST /api/conversation/clear - Clear conversation history

  • Body: { conversationId: string }
  • Response: { success: boolean }

Troubleshooting

Common Issues

1. "Failed to process message" error

   • Check that your API key is correct in the .env file
   • Ensure you have credits in your Anthropic account
   • Check the server console for detailed error messages

2. Memory not persisting

   • Verify the ./memory/memories/ directory exists and is writable
   • Check file permissions on the memory directory
   • Look for error messages in the Memory Status panel

3. Connection refused

   • Make sure the server is running (npm start)
   • Check that port 3000 is not in use by another application
   • Try accessing http://localhost:3000 instead of http://127.0.0.1:3000

Debug Mode

To see detailed logs, you can modify the server to include more console.log statements or use Node's debug mode:

NODE_ENV=development npm start

Security Considerations

• API Key: Never commit your .env file with your actual API key
• Path Validation: The memory system validates all paths to prevent directory traversal attacks
• CORS: Configure CORS settings appropriately for production use
• Input Sanitization: User inputs are escaped in the frontend to prevent XSS

Customization

Changing the Model

Edit the .env file to use a different Claude model:

MODEL=claude-opus-4-1-20250805

Modifying the UI

The entire UI is contained in public/index.html. You can:

• Change colors in the CSS section
• Modify the layout structure
• Add new features to the interface

Extending Memory Capabilities

The memory system in server.js can be extended to:

• Add new memory operations
• Implement different storage backends (database, cloud storage)
• Add memory search capabilities
• Implement memory categorization

License

This project is provided as an example implementation. Feel free to modify and use it according to your needs.

Support

For issues related to:

• The Anthropic API: Visit support.anthropic.com
• API Documentation: Check docs.anthropic.com
• This implementation: Review the code or create an issue in your repository

Acknowledgments

Built using:

• Anthropic Claude API
• Express.js
• Node.js native filesystem APIs
• Modern web technologies (HTML5, CSS3, JavaScript ES6+)