← Back to recipes

Build a simple internal tool with Claude Code

operationsintermediateemerging

The problem

Your team keeps asking for small internal tools - a form that saves to a spreadsheet, a dashboard showing key stats, a calculator for grant budgets. These aren't complex enough to justify hiring a developer, but they're beyond what you can build yourself in Excel or Google Sheets.

The solution

Use Claude Code to build simple web-based tools entirely through conversation. Describe what you need, and Claude creates HTML/JavaScript applications that run in any browser. These can be hosted for free on GitHub Pages or run locally. Claude handles all the technical implementation - you provide the requirements.

What you get

A working web-based tool your team can access from any browser. Could be a form, dashboard, calculator, or simple workflow app. Hosted for free and accessible via a link you share with colleagues. Claude provides the source files so you can modify it later.

Before you start

  • Claude Code set up - this requires terminal/command line setup, Node.js, and API billing (see setup recipes). May need IT support if you're not comfortable with developer tools
  • A free GitHub account (for hosting)
  • Git installed and GitHub authentication configured (for deployment) - or use GitHub web interface to upload files manually
  • Clear idea of what the tool should do
  • Understanding of who will use it and what inputs/outputs they need

When to use this

  • You need a simple form, calculator, or dashboard
  • Excel or Google Sheets can't do what you need (conditional logic, better UI, shareable link)
  • The tool is for internal use by a small team
  • You've been putting off asking IT or a developer because it seems too small
  • You want something you can modify yourself later

When not to use this

  • The tool needs to store data securely (these are client-side only)
  • It's public-facing and needs to look highly polished
  • It needs to connect to sensitive databases or authentication systems
  • It handles personal data that needs GDPR compliance
  • A spreadsheet would actually do the job fine

Steps

  1. 1

    Define what the tool should do

    Write down the tool's purpose in one sentence. List the inputs (what users enter or select), the processing (what calculations or logic to apply), and the outputs (what users see as a result). Be specific: 'Calculate total grant budget given project costs and overheads' is better than 'budget tool'.

  2. 2

    Describe it to Claude Code

    Open Claude Code and describe your tool in detail. Include: what it does, who uses it, what inputs they provide, what outputs they expect, any specific calculations or rules. For example: 'Build a grant budget calculator for our fundraising team. They enter project costs in categories (staff, travel, equipment, other), an overhead percentage, and it calculates the total with a breakdown suitable for funder applications.'

  3. 3

    Review the first version

    Claude will create an HTML file. Ask Claude to open it in a browser or preview it. Test with realistic data. Does it calculate correctly? Is the interface clear? Note what needs changing: 'The overhead should be calculated on direct costs only, not the full total' or 'Add a field for match funding'.

  4. 4

    Iterate until it works

    Give Claude feedback and ask for changes. This might take several rounds. Common requests: add input validation, improve the layout, add help text, include a 'clear form' button, make it print nicely. Claude handles all changes - you just describe what you want.

  5. 5

    Test with real users

    Share the local file with a colleague or two. Watch them use it. Do they understand what to enter? Do they find bugs? Do they ask for features you hadn't thought of? Collect feedback before deploying.

  6. 6

    Deploy to GitHub Pages

    Ask Claude: 'Help me deploy this to GitHub Pages so my team can access it via a web link.' Claude will guide you through creating a repository, uploading the files, and enabling Pages hosting. You'll get a URL like your-charity.github.io/budget-calculator that anyone can access. Note: This assumes you have Git installed and authenticated locally - if you're not comfortable with command line tools, you can manually upload your HTML file to a GitHub repository via the web interface instead (GitHub > New Repository > Add File > Upload Files).

  7. 7

    Share with your team

    Send the link to your colleagues. Bookmark it for easy access. The tool runs entirely in the browser - no data is sent anywhere unless you specifically built that in. Users can even save the page for offline use.

  8. 8

    Plan for updates

    Keep the source files. When you need changes, open Claude Code and describe what to modify. Claude can read the existing files and update them. Redeploy by pushing to the same GitHub repository. Document any business logic so future changes are easier.

Example code

Example prompt for a grant budget calculator

A sample prompt for building a budget calculation tool.

Build a grant budget calculator for our fundraising team.

Requirements:
1. Input fields for:
   - Staff costs (salary, NI, pension)
   - Travel and subsistence
   - Equipment and materials
   - Venue and catering
   - Other direct costs
   - Each category needs a text description field and amount field

2. Calculations:
   - Total direct costs (sum of above)
   - Overhead/indirect costs (user enters a percentage, calculated on direct costs)
   - Match funding (user enters amount already secured)
   - Amount requested from funder (total minus match)

3. Output:
   - Clear summary table suitable for copy-pasting into applications
   - Breakdown by category with percentages
   - Warning if overhead exceeds 20% (many funders cap this)

4. Features:
   - Mobile-friendly (fundraisers often use phones)
   - Print button that formats nicely on one page
   - Clear/reset button
   - Fields save to browser storage so users don't lose work

Make it look clean and professional. Use your charity's typical blue colour scheme.

Example prompt for a volunteer hours tracker

A sample prompt for a simple data entry form. NOTE: This uses browser storage (localStorage) which is device-specific and has privacy implications - if multiple volunteers use the same shared office computer, they could see each other's names and hours. For shared devices, consider adding a simple PIN or exporting/clearing data after each session. Data is also lost if browser cache is cleared. For critical data, export to CSV regularly or consider a proper database solution.

Build a volunteer hours tracking form.

Requirements:
1. Input fields:
   - Volunteer name (dropdown list I can configure)
   - Date of volunteering
   - Hours worked (number, allow half hours)
   - Activity type (dropdown: admin, events, befriending, driving, gardening, other)
   - Notes (optional text field)

2. Features:
   - When submitted, append a row to a table showing all entries
   - Running total of hours per volunteer visible
   - Export button to download all entries as CSV
   - Data persists in browser storage between visits
   - Ability to delete individual entries (with confirmation)

3. Summary view:
   - Total hours this month
   - Hours by activity type (as simple bar chart)
   - Top 5 volunteers by hours

4. Admin:
   - Simple way to edit the volunteer name list (maybe a settings page)
   - Clear all data button (with strong confirmation warning)

Make it simple enough that volunteers could enter their own hours.

Tools

Claude Codeservice · paid
Visit →
GitHub Pagesplatform · free
Visit →

Resources

At a glance

Time to implement
days
Setup cost
free
Ongoing cost
free
Cost trend
stable
Organisation size
small, medium, large
Target audience
operations-manager, it-technical, data-analyst, fundraising

GitHub Pages hosting is completely free. The only ongoing cost is Claude API usage if you need to modify the tool later - typically a few pounds per session. Claude for Nonprofits 75% discount applies.