Skip to content
Raindrop Developer Hub

Frontend-First Development with Claude Code + Raindrop MCP

The frontend-first development approach with Claude Code + Raindrop MCP transforms how you build applications. Instead of writing Product Requirements Documents (PRDs) yourself, you build the frontend first with detailed API comments, then let Claude analyze your frontend and automatically generate a comprehensive PRD that captures every specification.

This approach offers two major advantages:

  1. No Manual PRD Writing: Claude does all the work of creating detailed requirements by analyzing your working frontend code
  2. Fully Specified APIs: Your mock frontend ensures every API endpoint, request format, and response structure is completely defined before backend development begins

The Development Flow

This tutorial follows a four-phase approach:

  1. Frontend Development: Build a complete Astro todo app with detailed API placeholders
  2. Backend Planning: Use Raindrop MCP to analyze the frontend and auto-generate the PRD
  3. Backend Implementation: Let Raindrop MCP build the backend to your exact specifications
  4. Frontend Integration: Connect your frontend to the deployed backend

Part 1: Frontend Development Phase

We’ll build a todo application frontend that includes all the features and API calls needed, but with detailed comments instead of real backend calls.

Step 1.1: Create the Frontend Project

Start a new Claude Code session and use this prompt:

I want to build a todo application frontend using Astro with TypeScript. The app should include:


- User authentication (login/register/logout)
- Create, read, update, and delete todos
- Mark todos as complete/incomplete
- Filter todos (all, active, completed)
- Todo categories/tags
- User profile management


IMPORTANT: Do NOT implement any actual backend or API calls. Instead, for every place where I would need an API call, leave detailed comments that specify:
- The exact API endpoint URL and HTTP method
- Request headers needed
- Request body structure with types
- Expected response structure with status codes
- Error response formats


Make the UI fully functional with mock data so I can interact with it, but ensure every backend interaction point is clearly documented with the API specifications above.

Step 1.2: Finalize Frontend Specifications

Complete the frontend with this final prompt:

Let's do a final review and enhancement:


1. Go through every API comment and ensure they include:
   - Authentication requirements (JWT tokens, headers)
   - Rate limiting considerations
   - Pagination for list endpoints
   - Input validation requirements
   - Specific error codes and messages


2. Add any missing edge cases in the UI:
   - Empty states (no todos, no search results)
   - Network error handling
   - Offline functionality considerations
   - Loading states for all async operations


3. Create a summary document that lists every API endpoint needed, organized by feature area.


The goal is to have a frontend so thoroughly specified that a backend developer could implement the exact API without any additional questions.

Part 2: Backend Planning with Raindrop MCP

Now comes the magic - Claude will analyze your frontend and automatically create a comprehensive PRD.

Step 2.1: Start the Raindrop MCP Workflow

Use this prompt to start the Raindrop MCP workflow:

Perfect! Now I want to use the Raindrop MCP to build the backend for this frontend.


Please call the liquidmetal-staging:login MCP tool to start a new application development session, then continue with the flow. When asked for the PRD, use the frontend we just created as input - analyze all the API comments and specifications to create a comprehensive Product Requirements Document that captures exactly what the backend needs to support this frontend.

Step 2.2: What Happens During PRD Generation

Claude will act as an expert product manager, analyzing your frontend code and asking clarifying questions like:

  • “I see you need user authentication. Should this support social login providers?”
  • “Your todo categories - should users be able to create custom categories or use predefined ones?”
  • “For user profiles, what information should be editable vs read-only?”
  • “Should todo filtering be client-side or server-side for better performance?”

This ensures the PRD captures not just what’s obvious from your frontend, but also the underlying business logic and edge cases.

Part 3: Backend Implementation

Once the PRD is approved, the Raindrop MCP workflow automatically handles the complete backend implementation.

Step 3.1: Automated Backend Development

Continue with this prompt:

Excellent! The PRD looks comprehensive. Please continue with the Raindrop MCP workflow to implement the complete backend infrastructure. Make sure the API responses match exactly what the frontend expects based on the comments and specifications.

The workflow will automatically:

  • Design database schemas based on your frontend data requirements
  • Generate API endpoints with the exact request/response formats you specified
  • Set up authentication matching your frontend login flows
  • Deploy everything to live URLs

Part 4: Frontend Integration

Finally, we’ll connect your frontend to the real backend.

Step 4.1: Update Frontend to Use Real APIs

Once the backend is deployed, use this prompt:

Now that the backend is deployed and running, let's update the frontend to use the real API endpoints instead of the mock data and comments.


Please:
1. Replace all the API placeholder comments with actual fetch calls to the deployed endpoints
2. Update the API URLs to use the real deployed URLs from the Raindrop application
3. Add proper error handling for network requests
4. Implement the authentication flow using the real JWT tokens
5. Test all functionality end-to-end


Make sure to preserve all the UI functionality while connecting it to the live backend.

Step 4.2: Test Your Application

Now you can test your fully integrated application! Open the frontend in your browser and verify that everything works as expected. The Raindrop MCP workflow has already tested all the API endpoints during deployment, so you can focus on using your application and ensuring the user experience matches your vision.

Key Benefits

The frontend-first approach with Claude Code + Raindrop MCP saves you from writing PRDs yourself since Claude does all the work of analyzing your frontend and extracting comprehensive specifications. It also ensures you have fully specified APIs because your mock frontend captures every endpoint, request format, response structure, and edge case before any backend development begins - eliminating ambiguity and integration issues.

Next Steps

Once you’ve completed this tutorial, you can apply the same pattern to build any type of application:

  • E-commerce sites: Build the shopping cart and checkout flow first
  • Social applications: Create the user profiles and posting interface first
  • Dashboard applications: Design all the charts and data views first
  • AI applications: Mock the AI interactions and responses first

The frontend-first approach with Claude Code + Raindrop MCP works for any application where you can envision the user interface before the backend complexity.