This server provides a complete development workflow for building Base mini apps with 10 specialized tools covering everything from initial setup to deployment and optimization.
Core Development Tools:
Generate complete Base mini app manifests with all required fields including app name, description, category, domain, and tags
Create starter code for Next.js, Vanilla JS, or React apps with MiniKit integration and optional features like authentication and wallet connectivity
Get step-by-step deployment guides for platforms like Vercel, Netlify, or custom deployments with domain configuration
Validate mini app requirements against Base's featured placement standards using app URLs and manifest files
Implement Base Account features including sponsored gas, batch transactions, passkey authentication, and capabilities detection
Generate social sharing metadata with embed previews, button text, and image optimization for better discoverability
Design & Development Support:
Access comprehensive design guidelines covering colors, typography, spacing, navigation, components, and app icons
Debug development issues with specialized guides for discovery problems, embed rendering, wallet connections, manifest errors, and mobile testing
Check Base App compatibility for wallet integration, navigation, notifications, actions, and other features
Optimize search and discovery with strategies for search indexing, category optimization, metadata enhancement, and ranking improvement
The server offers a production-ready workflow with official Base documentation integration, TypeScript implementation, and proper error handling to solve real developer pain points in Base mini app creation.
Provides deployment instructions and configuration guidance for hosting Base mini apps on Netlify platform
Generates starter code for Base mini apps using Next.js framework with MiniKit integration, including authentication and wallet connection features
Generates React-based starter code for Base mini apps with component integration and Base-specific functionality
Provides step-by-step deployment guides specifically for deploying Base mini apps to Vercel platform with domain configuration
Base Mini App Builder MCP Server
A powerful TypeScript MCP (Model Context Protocol) server that actually builds Base mini apps from start to finish. This isn't just documentation - it creates real, working Next.js projects with all the files you need!
๐ What This MCP Actually Does
This MCP builds real mini apps by:
โ Creates complete Next.js projects with all necessary files
โ Generates working code with OnchainKit, TailwindCSS, TypeScript
โ Sets up Coinbase Developer API integration
โ Creates Base mini app manifests automatically
โ Provides interactive web UI for easy configuration
โ Handles deployment to Vercel/Netlify
โ Validates requirements for Base featured placement
๐ ๏ธ MCP Tools
Core Building Tools
create_mini_app_project- Creates complete Next.js project with all filesgenerate_manifest- Generates and saves Base mini app manifestinstall_dependencies- Installs all required packagesstart_development_server- Starts the Next.js dev serverdeploy_mini_app- Deploys to Vercel/Netlifyvalidate_mini_app- Validates Base requirementsopen_mini_app_builder- Opens interactive web interface
๐ Prerequisites
Node.js 18.0.0 or higher
yarn package manager
Cursor IDE with MCP support
Coinbase Developer API Key (get from https://portal.cdp.coinbase.com/)
Base Account (for testing mini apps)
๐ ๏ธ Installation & Setup
1. Clone and Install Dependencies
2. Build the TypeScript Server
3. Configure Cursor MCP
Add this to your Cursor MCP configuration file (~/.cursor/mcp.json):
Important: Replace the path with your actual project directory path.
4. Restart Cursor
Restart Cursor IDE to load the new MCP server.
๐ How to Create a Base Mini App
Method 1: Using MCP Tools Directly
Step 1: Create Your Mini App Project
Step 2: Install Dependencies
Step 3: Start Development Server
Step 4: Generate Manifest
Method 2: Using Interactive Web Builder
Step 1: Open the Builder Interface
Step 2: Fill Out the Form
Open
mini-app-builder.htmlin your browserEnter your project details:
Project Name: Your app name
Description: What your app does
Category: Choose from the dropdown
Features: Select what you want
Coinbase API Key: Your developer key
Click "Create Mini App"
Step 3: Follow the Generated Instructions
The builder will show you the exact commands to run next.
๐งช Testing Commands
Quick Health Check
Expected Output: โ All 10 tests pass
Build and Start Server
Expected Output: Server starts and shows "Base Mini App Builder MCP server running on stdio"
Test MCP Protocol
Expected Output: JSON response with all 10 tools listed
๐ฏ How to Use in Cursor
1. Open Cursor IDE
Make sure your MCP configuration is loaded.
2. Access MCP Tools
In Cursor, you can now use the Base Mini App Builder tools:
Core Development:
Generate Manifest: Create a complete Base mini app manifest
Generate Code: Get starter code for Next.js or Vanilla JS
Deployment Guide: Get step-by-step deployment instructions
Validate Requirements: Check if your app meets Base standards
Base Account Guide: Learn about sponsored gas and batch transactions
Embed Metadata: Create social sharing metadata
Design & Development:
Design Guidelines: Get comprehensive design guidelines for colors, typography, spacing, navigation
Debugging Guide: Complete debugging guide for development issues
Base App Compatibility: Check feature support and compatibility status
Search Discovery Guide: Optimize your app for search and discovery
3. Example Workflow
Use
generate_mini_app_manifestto create your app manifestUse
generate_mini_app_codeto get starter codeUse
get_design_guidelinesto ensure proper design implementationUse
get_base_deployment_guideto deploy your appUse
validate_mini_app_requirementsto ensure complianceUse
get_base_account_guideto implement Base Account featuresUse
generate_embed_metadatafor social sharingUse
get_search_discovery_guideto optimize discoverabilityUse
get_debugging_guideif you encounter issuesUse
get_base_app_compatibilityto check feature support
๐ง Development Commands
๐ Project Structure
๐จ MCP Tools Detailed
1. generate_mini_app_manifest
Purpose: Creates a complete Base mini app manifest with all required fields.
Input Parameters:
app_name(string): Name of your mini app (max 32 chars)description(string): App description (max 170 chars)category(string): Primary category (games, social, finance, etc.)domain(string): Your app domain (e.g., myapp.vercel.app)tags(array): Search tags (max 5, lowercase, no spaces)
Output: Complete manifest JSON with next steps and image requirements.
2. generate_mini_app_code
Purpose: Generates starter code for Base mini apps with MiniKit integration.
Input Parameters:
app_type(string): Type of mini app (nextjs, vanilla, react)features(array): Features to include (authentication, wallet_connect, etc.)app_name(string): Name of your app
Output: Complete starter code with setup instructions.
3. get_base_deployment_guide
Purpose: Provides step-by-step deployment guide for Base mini apps.
Input Parameters:
platform(string): Deployment platform (vercel, netlify, custom)has_domain(boolean): Whether you have a custom domain
Output: Detailed deployment instructions with troubleshooting.
4. validate_mini_app_requirements
Purpose: Checks if your mini app meets Base featured placement requirements.
Input Parameters:
app_url(string): URL to your mini appmanifest_url(string, optional): URL to your manifest file
Output: Comprehensive requirements checklist with validation tools.
5. get_base_account_guide
Purpose: Provides guides for implementing Base Account features.
Input Parameters:
feature(string, optional): Specific feature (sponsored_gas, batch_transactions, passkey_auth, capabilities_detection)
Output: Detailed implementation guides with code examples.
6. generate_embed_metadata
Purpose: Generates embed metadata for social sharing of your mini app.
Input Parameters:
app_name(string): Name of your appapp_url(string): URL of your appimage_url(string, optional): Preview image URL (3:2 aspect ratio)button_text(string, optional): Button text (max 32 chars)
Output: HTML meta tags and Next.js metadata for social sharing.
7. get_design_guidelines
Purpose: Get comprehensive design guidelines for Base mini apps.
Input Parameters:
category(string, optional): Design category to focus on (colors, typography, spacing, navigation, components, app_icon, all)
Output: Detailed design guidelines with implementation examples and best practices.
8. get_debugging_guide
Purpose: Get comprehensive debugging guide for Base mini app development issues.
Input Parameters:
issue_type(string, optional): Type of issue to debug (discovery, embed_rendering, wallet_connection, manifest, mobile_testing, all)
Output: Step-by-step debugging solutions with code examples and troubleshooting checklists.
9. get_base_app_compatibility
Purpose: Get Base App compatibility information and feature support status.
Input Parameters:
feature(string, optional): Specific feature to check compatibility for (wallet_integration, navigation, notifications, actions, all)
Output: Compatibility status, implementation examples, and workarounds for unsupported features.
10. get_search_discovery_guide
Purpose: Get guide for optimizing Base mini app search and discovery.
Input Parameters:
focus_area(string, optional): Area to focus on for discovery optimization (search_indexing, category_optimization, metadata_optimization, ranking, all)
Output: Optimization strategies, best practices, and implementation guides for better discoverability.
๐ Why This MCP Will Win the Hackathon
1. Solves Real Developer Problems
Base developers need this exact workflow
Eliminates manual manifest creation
Provides production-ready code generation
Integrates official Base documentation
2. Demonstrates MCP Excellence
10 specialized tools with clear purposes
Proper TypeScript implementation
Clean, maintainable code
Comprehensive error handling
Full Base documentation integration
3. Base Ecosystem Focus
100% aligned with Base mini app development
Uses official Base documentation
Implements Base Account features
Follows Base best practices
4. Production Ready
Actually functional, not just a demo
Comprehensive testing suite
Real developer value
Ready for immediate use
5. Hackathon Alignment
Addresses MCP innovation requirements
Demonstrates advanced capabilities
Shows real-world application
Provides measurable value
๐ค Live Presentation Commands (3 Minutes)
Pre-Presentation Setup (Do before going on stage)
Live Demo Commands (Run these on stage)
1. Show MCP Server is Running (15 seconds)
Expected Output: Base Mini App Builder MCP server running on stdio
2. Test MCP Protocol Communication (15 seconds)
Expected Output: JSON response showing all 10 tools listed
3. Run Complete Test Suite (30 seconds)
Expected Output:
Alternative: Quick Health Check (If time is tight)
Presentation Flow (2 minutes)
"Let me show you this working" (15 seconds)
Run
yarn startShow "Base Mini App Builder MCP server running on stdio"
"Here are all 10 tools working" (30 seconds)
Run
yarn testShow all tests passing
Explain what each tool does
"This demonstrates MCP protocol communication" (15 seconds)
Run the echo command
Show JSON response with all tools
"Ready for developers to use" (30 seconds)
Explain how developers would use this in Cursor
Show the value proposition
๐ Demo Flow (5 Minutes)
1. Show the Tools (1 minute)
Open Cursor and demonstrate the 10 available tools
Explain each tool's purpose and value
Highlight the comprehensive Base documentation integration
2. Generate a Manifest (1 minute)
Use
generate_mini_app_manifestwith sample dataShow the complete manifest JSON output
Explain the next steps
3. Create Starter Code (1 minute)
Use
generate_mini_app_codefor Next.jsShow the generated code with MiniKit integration
Explain the setup instructions
4. Deploy Guide (1 minute)
Use
get_base_deployment_guidefor VercelShow the step-by-step deployment process
Highlight Base-specific requirements
5. Show Design Guidelines (1 minute)
Use
get_design_guidelinesto show comprehensive design systemDemonstrate debugging capabilities with
get_debugging_guideShow Base App compatibility information
๐ง Troubleshooting
Common Issues
1. MCP Server Not Loading
Check your
~/.cursor/mcp.jsonconfigurationEnsure the path to
dist/server.jsis correctRestart Cursor IDE
2. Build Errors
Run
yarn installto ensure all dependencies are installedCheck Node.js version (requires 18.0.0+)
Run
yarn run buildto compile TypeScript
3. Test Failures
Run
yarn testto see detailed error messagesCheck that all dependencies are installed
Ensure TypeScript compilation is successful
Getting Help
Check the test output for specific error messages
Verify your MCP configuration in Cursor
Ensure all file paths are correct
Check that Node.js version meets requirements
๐ Resources
๐ Ready to Present!
Your Base Mini App Builder MCP server is 100% functional and ready for the Cursor Denver MCP Hackathon presentation. The Cursor team will be impressed by:
Complete Base mini app workflow
Production-ready code generation
Official Base documentation integration
Real developer value
MCP innovation and excellence
You've got this! ๐
local-only server
The server can only run on the client's local machine because it depends on local resources.
Tools
Enables developers to build Base mini apps from start to finish with 10 specialized tools for generating manifests, starter code, deployment guides, design guidelines, and debugging assistance. Integrates official Base documentation to streamline the complete development workflow for Base ecosystem mini applications.
- ๐ What This MCP Actually Does
- ๐ ๏ธ MCP Tools
- ๐ Prerequisites
- ๐ ๏ธ Installation & Setup
- ๐ How to Create a Base Mini App
- ๐งช Testing Commands
- ๐ฏ How to Use in Cursor
- ๐ง Development Commands
- ๐ Project Structure
- ๐จ MCP Tools Detailed
- ๐ Why This MCP Will Win the Hackathon
- ๐ค Live Presentation Commands (3 Minutes)
- ๐ Demo Flow (5 Minutes)
- ๐ง Troubleshooting
- ๐ Resources
- ๐ Ready to Present!