elite-ai-assisted-coding.dev

AI-Powered FastHTML Development

Building Annotation Apps with Claude + FastHTML

$ claude-code "Let's build a RAG annotation tool"
🤖 Planning architecture...
🚀 Generating FastHTML code...
✓ App ready at localhost:5001

elite-ai-assisted-coding.dev

See It In Action

elite-ai-assisted-coding.dev

The Challenge

Building a RAG Annotation Tool

~ 7K Records

Domain experts need to annotate thousands of RAG results efficiently

Really fast annotation

Updates without any page refreshes so annotators can get through a lot quickly

Two-Page App

Query list view + Document annotation view

elite-ai-assisted-coding.dev

AI-Assisted Development Workflow

1

Context

.ruler/

2

Plan

plan.md

3

Generate

Claude Code

4

Test

MCP Server

elite-ai-assisted-coding.dev

LLM Context with .ruler

.ruler/
├── api_conventions_monsterui.md  # UI component guidelines
└── project_context.md            # FastHTML patterns

MonsterUI Components

Pre-configured component library with consistent styling

FastHTML Patterns

Best practices for routing, database operations, and HTMX

elite-ai-assisted-coding.dev

Auto-Distribute to Any AI Agent

elite-ai-assisted-coding.dev

Start with a Clear Plan

elite-ai-assisted-coding.dev

AI Validates Against Real Data

elite-ai-assisted-coding.dev

Iterating on the Plan

elite-ai-assisted-coding.dev

Live Testing with MCP Server

# mcp_server.py
@mcp.tool
async def start_app():
    """Starts the fasthtml application with browser automation"""
    
@mcp.tool
async def get_console_logs():
    """Captures browser console for debugging"""

@mcp.tool
async def navigate_to(path: str = "/") -> str:
    """Navigate the browser to a specific path in the application."""

@mcp.tool
async def click_element(selector: str):
    """Interacts with the UI programmatically"""
                

Claude can now do simple testing a human would do like navigate around and click things, and see browser console logs.

elite-ai-assisted-coding.dev