Arjun Claude - Web UI for Claude AI with Thinking Feature

February 25, 2025 ยท View on GitHub

A powerful web interface for Anthropic's Claude AI that includes temperature control, thinking feature visualization, and cost tracking.

Features

  • Clean, modern web interface for interacting with Claude
  • Temperature slider (0-1) to control response randomness
  • Thinking budget slider (0-12000 tokens) to enable and control Claude's thinking process
  • Real-time display of Claude's thinking process
  • Detailed metrics including:
    • Input and output token usage
    • Response time
    • Cost per request (based on Claude 3 Sonnet pricing)
    • Cumulative cost tracking
  • Conversation history management
  • Mobile-responsive design

Requirements

  • Python 3.8 or higher
  • Anthropic API key (Claude 3 Sonnet)

Installation

  1. Clone this repository:

    git clone https://github.com/arjunrao87/arjun-claude.git
cd arjun-claude

  2. Install the required dependencies:

    pip install -r requirements.txt

  3. Set up your API key using one of these methods:

    Option 1: Create a .env file (recommended for development)

    # Create a .env file in the root directory
echo "ANTHROPIC_API_KEY=your_api_key_here" > .env

    Option 2: Set environment variable (recommended for production)

    # Linux/macOS
export ANTHROPIC_API_KEY=your_api_key_here

# Windows
set ANTHROPIC_API_KEY=your_api_key_here

Usage

  1. Start the application:

    python app.py

  2. Open your web browser and navigate to http://localhost:8080

  3. Adjust the sliders to your preference:

    • Temperature: Controls randomness in responses (0 = deterministic, 1 = more random)
    • Thinking Budget: Number of tokens allocated for Claude's thinking process (0 = disabled, minimum 1024 when enabled)

  4. Type your message and press Enter or click Send

  5. View Claude's response in the chat window and its thinking process in the right panel, along with detailed metrics

Cost Tracking Features

This application includes built-in cost tracking based on Claude 3 Sonnet pricing:

  • $3 per million input tokens
  • $15 per million output tokens

The metrics section displays:

  • Input tokens used
  • Output tokens used
  • Response time
  • Input cost for the current request
  • Output cost for the current request
  • Total cost for the current request
  • Cumulative cost since the application started

You can reset the conversation history using the "Reset Chat" button, and the cumulative cost will continue to track across all sessions until the application is restarted.

How the Thinking Feature Works

The thinking feature allows you to see Claude's internal reasoning process before it provides its final answer. This can be useful for:

  • Understanding how Claude approaches complex problems
  • Debugging unexpected responses
  • Educational purposes to see AI reasoning in action
  • Improving prompt engineering by seeing how Claude interprets your queries

The thinking budget slider controls how many tokens Claude can use for its thinking process. Higher values allow for more detailed thinking but may increase response time and API costs.

API Usage and Costs

Using the thinking feature will consume additional tokens from your Anthropic API quota. The number of tokens used will depend on:

  1. The length of your messages
  2. The thinking budget you set
  3. The length of Claude's responses

Be mindful of your API usage limits and costs when using this feature.

License

MIT

Acknowledgments