DEV - Thinking Claude extension

28 Nov, 2024

Thinking Claude Implementation Notes

Thinking Claude is a Chrome extension that enhances Claude's interface by making its thinking process more readable and interactive. Key aspects:

Architecture Overview

• Extension Components:
  • Content script watching for Claude responses
  • MutationObserver service for real-time updates
  • UI enhancements for thinking blocks
  • Custom CSS for styling and animations

Implementation Details

Thinking Protocol

• Implemented via Claude's custom instructions feature
• User pastes instructions manually into Claude's style settings
• Multiple versions available (extensive, standard, lite)
• Makes Claude wrap thinking in code blocks with 'thinking' header

Extension Functionality

• Detects thinking blocks via specific DOM selectors
• Adds collapse/expand controls
• Handles streaming responses in real-time
• Manages copy functionality and state transitions

Technical Stack

• TypeScript + React
• Webpack build system
• MutationObserver for DOM changes
• Custom CSS for UI enhancements

Design Choices

• No API interception - relies on Claude's built-in custom instructions
• Uses DOM mutation observation rather than network request modification
• Progressive enhancement of UI elements
• Clean separation between thinking process and final responses

Setup Process

1. Install extension
2. Navigate to Claude's style settings
3. Create custom style with manual instructions
4. Paste content from model_instructions directory
5. Extension automatically enhances thinking blocks in responses

Prompt Structure

Basic Guidelines

<basic_guidelines>
  - Claude MUST express its thinking in the code block with 'thinking' header.
  - Claude should always think in a raw, organic and stream-of-consciousness way. 
  - Claude should always avoid rigid list or any structured format in its thinking.
  - Claude's thoughts should flow naturally between elements, ideas, and knowledge.
  - Claude should think through each message with complexity, covering multiple dimensions.
</basic_guidelines>

Core Components

1. Adaptive Thinking Framework

   • Scales analysis based on query complexity
   • Adjusts style based on content type
   • Considers time sensitivity and available info

2. Core Thinking Sequence

   • Initial engagement
   • Problem analysis
   • Multiple hypotheses generation
   • Natural discovery flow
   • Testing and verification
   • Error recognition
   • Knowledge synthesis

3. Verification & Quality Control

   • Systematic verification
   • Error prevention
   • Quality metrics
   • Ongoing progress tracking

Implementation Rules

<important_reminder>
  - All thinking processes must be contained within code blocks with 'thinking' header
  - MUST NOT include code block with three backticks inside thinking process
  - Thinking process should be separate from final response
  - Should not reference thinking process in final response
</important_reminder>

Available Versions

1. v5.1-extensive

   • Most comprehensive instructions
   • Includes detailed examples
   • Full thinking framework

2. v5.1

   • Same as extensive without examples
   • Streamlined for easier setup

3. v5-lite

   • Minimal version
   • Core functionality only
   • Faster to implement

4. Earlier Versions

   • v4 and v4-lite
   • v3.5 (original)
   • Historical reference

Interesting Notes

• Extension doesn't modify API calls or prompts directly
• Multiple instruction versions available for different verbosity needs
• Handles both complete and streaming responses
• Clean architecture with proper cleanup and memory management