Build a Calculator App with Claude Code on AWS Bedrock

Following Along with this Tutorial

1. Using the Jupyter Notebook: Access the complete notebook with code examples on the AWS Samples Anthropic on AWS GitHub repository. The notebook contains the same steps we'll cover here, with additional code cells you can execute.
2. Following this Community Post: All steps are documented here in this post, and you can apply them directly in your terminal with Claude Code.

Setting Up Your Environment

Project Documentation Setup

Project Initialization with /init

1. Scan your repository structure
2. Examine existing documentation (like our calculator.md file)
3. Look for configurations, patterns, and project organization
4. Generate a comprehensive CLAUDE.md guide for your project

Understanding the /init Command in Action

1. It scans your repository structure, identifying files and their relationships
2. It examines existing documentation (like the calculator.md file we've created)
3. It looks for configuration files, coding patterns, and project organization
4. It checks for existing guidelines (like Cursor rules or Copilot instructions)

• Practical build and run commands tailored to your project
• Code style guidelines specific to your technology stack
• Architecture recommendations that match your existing patterns
• Documentation standards to maintain consistency

Building the Calculator Web Application

1. An HTML file for the calculator structure
2. CSS for styling and responsive design
3. JavaScript for calculator functionality

Accepting and Reviewing Code Additions from Claude Code

Permission System

• Claude Code uses a human in the loop permission system for safety
• File modifications require explicit approval by default
• You'll be prompted to confirm before changes are made, unless you've accepted the file modification 'don't ask again' prompt

Best Practices for Code Review

1. Carefully examine suggested changes before approving them
2. Understand what the code does - ask Claude to explain if needed
3. Check for edge cases that might not have been considered
4. Verify security implications of any code that handles sensitive data
5. Test the changes after they're applied to ensure they work as expected

Approval Options

• Yes: Approve this specific action once
• Yes, don't ask again: Approve this type of action for the remainder of the session
• No: Reject the suggested change

⚠️ IMPORTANT ⚠️: You should always use the Yes option and avoid using "Yes, don't ask again" to ensure that all code, file changes, and commands generated by Claude are strictly reviewed by a human. This human-in-the-loop review process is critical for maintaining security and code quality. 👁️ 🔒

Testing Our Calculator Web Application

Opening the Calculator

1. Navigate to the sandbox directory where the calculator files were created
2. Open the calculator.html file in your web browser
   • You can do this by double-clicking the file or right-clicking and selecting "Open with" your preferred browser

Testing Functionality

• Basic arithmetic operations (addition, subtraction, multiplication, division)
• Clear functionality (C button)
• Delete functionality (DEL button)
• Test the responsive design by resizing your browser window

Potential Enhancements

• Scientific calculator functions
• Calculation history
• Theme switching
• Bracket support for complex expressions

Managing Context with the /compact Command

How /compact Works:

• Summarizes your conversation history into a concise format
• Preserves the essential information while reducing token count
• Maintains context awareness without the full conversation history
• Executed directly in the Claude Code terminal with the command /compact

Benefits of Using /compact:

• Maintains Coherence: Unlike /clear, preserves the important parts of your conversation history
• Enhances Temporal Coherence: Helps Claude better understand the timeline and sequence of your interactions
• Improves Context Referencing: Makes it easier for Claude to accurately reference and recall information from earlier in the conversation
• Reduces Token Usage: Significantly lowers the number of tokens consumed, helping manage costs
• Improves Performance: With less context to process, Claude can respond more quickly
• Extends Conversation Length: Allows you to have longer, more productive sessions without hitting context limits

Prompt Caching and /compact:

• With Prompt Caching: When prompt caching is enabled in Bedrock, the cost benefits of /compact are less significant since you're not charged for repeated prompts
• Primary Benefit Shift: With prompt caching, /compact becomes more valuable for maintaining conversation coherence rather than cost management
• Still Recommended: Even with prompt caching enabled, using /compact regularly helps Claude maintain a clearer understanding of your conversation flow and project context

When to Use /compact:

• After completing a major task or milestone
• When you notice Claude's responses slowing down
• Before starting a new, related subtask
• When Claude seems to be confusing the order of past events or instructions
• When transitioning between different aspects of your project
• Periodically during long coding sessions (regardless of prompt caching status)

Enhancing Projects with Claude Code: Adding Scientific Calculator Functions

Testing Your Enhanced Calculator

1. Open the calculator.html file in your web browser
2. Try out the basic arithmetic operations (addition, subtraction, multiplication, division)
3. Test the newly added scientific functions (sin, cos, tan, log, etc.)
4. Verify that all calculations produce the expected results
5. Check that the UI displays correctly on your device

Monitoring Your Costs with Claude Code

Claude Code Pricing on Amazon Bedrock

Tracking Your Costs:

• During a session: Use the /cost command to see current token usage and estimated costs
• Session summary: View a cost summary automatically displayed when exiting Claude Code

Strategies to Reduce Token Usage:

• Compact conversations: Use /compact when your context gets large
• Write specific queries: Avoid vague requests that trigger unnecessary file scanning
• Break down complex tasks: Split large tasks into focused interactions
• Clear history between tasks: Use /clear to reset context when switching topics

Conclusion: Unleashing the Power of Claude Code with Amazon Bedrock

• Understand and navigate complex codebases
• Generate, edit, and debug code across multiple files
• Answer detailed questions about architecture and implementation
• Execute commands and perform real actions in your development environment
• Maintain context awareness throughout extended coding sessions

Key Benefits of Claude Code on Bedrock:

• Enterprise Security: Keep your code interactions within your AWS infrastructure
• Cost Management: Track and optimize token usage with built-in tools
• Seamless Integration: Leverage your existing AWS Bedrock allocation and billing
• Developer Experience: Work directly from your terminal with minimal setup
• Context Management: Maintain productive sessions with /compact and other commands

Next Steps:

1. Start Small: Begin with focused tasks to build familiarity with Claude Code
2. Establish Workflows: Develop patterns for effective collaboration with the AI
3. Monitor Usage: Keep an eye on costs and optimize with /compact and other strategies
4. Share Knowledge: Document effective prompts and approaches with your team
5. Stay Updated: Claude Code is actively developing with regular improvements