Skip to main content
Glama

Base Mini App Builder MCP Server

by Mr-Web3

Base Mini App Builder MCP Server

A powerful TypeScript MCP (Model Context Protocol) server designed specifically for the Cursor Denver MCP Hackathon that helps developers build Base mini apps from start to finish.

๐Ÿ† Hackathon Alignment

This MCP server directly addresses the hackathon's core objectives:

  • MCP Innovation: Demonstrates advanced MCP server capabilities with 6 specialized tools

  • Base Ecosystem: 100% focused on Base mini app development workflow

  • Developer Experience: Solves real pain points in Base mini app creation

  • Production Ready: Actually functional, not just a demo

  • Documentation Integration: Leverages official Base documentation for accuracy

๐Ÿš€ What This MCP Does

The Base Mini App Builder MCP provides a complete development workflow for Base mini apps through 10 specialized tools:

Core Development Tools

  1. generate_mini_app_manifest - Creates complete Base mini app manifests

  2. generate_mini_app_code - Generates Next.js/Vanilla starter code with MiniKit

  3. get_base_deployment_guide - Provides step-by-step deployment instructions

  4. validate_mini_app_requirements - Checks Base featured placement requirements

  5. get_base_account_guide - Guides for Base Account features (sponsored gas, batch transactions)

  6. generate_embed_metadata - Creates social sharing embed metadata

Design & Development Tools

  1. get_design_guidelines - Comprehensive design guidelines (colors, typography, spacing, navigation)

  2. get_debugging_guide - Complete debugging guide for development issues

  3. get_base_app_compatibility - Base App compatibility and feature support status

  4. get_search_discovery_guide - Search and discovery optimization strategies

๐Ÿ“‹ Prerequisites

  • Node.js 18.0.0 or higher

  • npm or yarn

  • Cursor IDE with MCP support

  • Base Account (for testing mini apps)

๐Ÿ› ๏ธ Installation & Setup

1. Clone and Install Dependencies

git clone <your-repo-url> cd denver-cursor-hackathon npm install

2. Build the TypeScript Server

npm run build

3. Configure Cursor MCP

Add this to your Cursor MCP configuration file (~/.cursor/mcp.json):

{ "mcpServers": { "base-mini-app-builder": { "command": "node", "args": ["/Users/jtaylor/Desktop/denver-cursor-hackathon/dist/server.js"], "env": {} } } }

Important: Replace the path with your actual project directory path.

4. Restart Cursor

Restart Cursor IDE to load the new MCP server.

๐Ÿงช Testing Commands

Quick Health Check

npm test

Expected Output: โœ… All 10 tests pass

Build and Start Server

npm run build npm start

Expected Output: Server starts and shows "Base Mini App Builder MCP server running on stdio"

Test MCP Protocol

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | npm start

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

  1. Use generate_mini_app_manifest to create your app manifest

  2. Use generate_mini_app_code to get starter code

  3. Use get_design_guidelines to ensure proper design implementation

  4. Use get_base_deployment_guide to deploy your app

  5. Use validate_mini_app_requirements to ensure compliance

  6. Use get_base_account_guide to implement Base Account features

  7. Use generate_embed_metadata for social sharing

  8. Use get_search_discovery_guide to optimize discoverability

  9. Use get_debugging_guide if you encounter issues

  10. Use get_base_app_compatibility to check feature support

๐Ÿ”ง Development Commands

# Install dependencies npm install # Build TypeScript to JavaScript npm run build # Start the MCP server npm start # Run in development mode npm run dev # Run tests npm test # Watch for changes npm run watch

๐Ÿ“ Project Structure

denver-cursor-hackathon/ โ”œโ”€โ”€ dist/ # Compiled JavaScript โ”‚ โ”œโ”€โ”€ server.js # Main MCP server โ”‚ โ””โ”€โ”€ simple-test.js # Test runner โ”œโ”€โ”€ docs/ # Base Documentation โ”‚ โ”œโ”€โ”€ auth.md โ”‚ โ”œโ”€โ”€ baseAccount.md โ”‚ โ”œโ”€โ”€ baseAppCap.md โ”‚ โ”œโ”€โ”€ colors.md โ”‚ โ”œโ”€โ”€ components.md โ”‚ โ”œโ”€โ”€ context.md โ”‚ โ”œโ”€โ”€ createMiniApp.md โ”‚ โ”œโ”€โ”€ dataGrowth.md โ”‚ โ”œโ”€โ”€ debug.md โ”‚ โ”œโ”€โ”€ embedsPreviews.md โ”‚ โ”œโ”€โ”€ launchChecklist.md โ”‚ โ”œโ”€โ”€ links.md โ”‚ โ”œโ”€โ”€ manifest.md โ”‚ โ”œโ”€โ”€ migrate.md โ”‚ โ”œโ”€โ”€ navigation.md โ”‚ โ”œโ”€โ”€ requirements.md โ”‚ โ”œโ”€โ”€ searchNdiscovery.md โ”‚ โ”œโ”€โ”€ signManifest.md โ”‚ โ”œโ”€โ”€ socialGraph.md โ”‚ โ”œโ”€โ”€ spacing.md โ”‚ โ””โ”€โ”€ typography.md โ”œโ”€โ”€ server.ts # Main MCP server implementation โ”œโ”€โ”€ simple-test.ts # Test suite โ”œโ”€โ”€ package.json # Dependencies and scripts โ”œโ”€โ”€ tsconfig.json # TypeScript configuration โ””โ”€โ”€ README.md # This file

๐ŸŽจ 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 app

  • manifest_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 app

  • app_url (string): URL of your app

  • image_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)

# 1. Navigate to project directory cd /Users/jtaylor/Desktop/denver-cursor-hackathon # 2. Build the TypeScript code npm run build # 3. Test that everything works npm test

Live Demo Commands (Run these on stage)

1. Show MCP Server is Running (15 seconds)

npm start

Expected Output: Base Mini App Builder MCP server running on stdio

2. Test MCP Protocol Communication (15 seconds)

echo '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}' | npm start

Expected Output: JSON response showing all 10 tools listed

3. Run Complete Test Suite (30 seconds)

npm test

Expected Output:

โœ… All 10 tests pass โœ… generate_mini_app_manifest: PASS โœ… generate_mini_app_code: PASS โœ… get_base_deployment_guide: PASS โœ… validate_mini_app_requirements: PASS โœ… get_base_account_guide: PASS โœ… generate_embed_metadata: PASS โœ… get_design_guidelines: PASS โœ… get_debugging_guide: PASS โœ… get_base_app_compatibility: PASS โœ… get_search_discovery_guide: PASS

Alternative: Quick Health Check (If time is tight)

npm run build && npm test

Presentation Flow (2 minutes)

  1. "Let me show you this working" (15 seconds)

    • Run npm start

    • Show "Base Mini App Builder MCP server running on stdio"

  2. "Here are all 10 tools working" (30 seconds)

    • Run npm test

    • Show all tests passing

    • Explain what each tool does

  3. "This demonstrates MCP protocol communication" (15 seconds)

    • Run the echo command

    • Show JSON response with all tools

  4. "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_manifest with sample data

  • Show the complete manifest JSON output

  • Explain the next steps

3. Create Starter Code (1 minute)

  • Use generate_mini_app_code for Next.js

  • Show the generated code with MiniKit integration

  • Explain the setup instructions

4. Deploy Guide (1 minute)

  • Use get_base_deployment_guide for Vercel

  • Show the step-by-step deployment process

  • Highlight Base-specific requirements

5. Show Design Guidelines (1 minute)

  • Use get_design_guidelines to show comprehensive design system

  • Demonstrate debugging capabilities with get_debugging_guide

  • Show Base App compatibility information

๐Ÿ”ง Troubleshooting

Common Issues

1. MCP Server Not Loading

  • Check your ~/.cursor/mcp.json configuration

  • Ensure the path to dist/server.js is correct

  • Restart Cursor IDE

2. Build Errors

  • Run npm install to ensure all dependencies are installed

  • Check Node.js version (requires 18.0.0+)

  • Run npm run build to compile TypeScript

3. Test Failures

  • Run npm test to see detailed error messages

  • Check that all dependencies are installed

  • Ensure TypeScript compilation is successful

Getting Help

  1. Check the test output for specific error messages

  2. Verify your MCP configuration in Cursor

  3. Ensure all file paths are correct

  4. 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! ๐Ÿš€

Deploy Server
-
security - not tested
A
license - permissive license
-
quality - not tested

local-only server

The server can only run on the client's local machine because it depends on local resources.

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.

  1. ๐Ÿ† Hackathon Alignment
    1. ๐Ÿš€ What This MCP Does
      1. Core Development Tools
        1. Design & Development Tools
          1. ๐Ÿ“‹ Prerequisites
            1. ๐Ÿ› ๏ธ Installation & Setup
              1. 1. Clone and Install Dependencies
              2. 2. Build the TypeScript Server
              3. 3. Configure Cursor MCP
              4. 4. Restart Cursor
            2. ๐Ÿงช Testing Commands
              1. Quick Health Check
              2. Build and Start Server
              3. Test MCP Protocol
            3. ๐ŸŽฏ How to Use in Cursor
              1. 1. Open Cursor IDE
              2. 2. Access MCP Tools
              3. 3. Example Workflow
            4. ๐Ÿ”ง Development Commands
              1. ๐Ÿ“ Project Structure
                1. ๐ŸŽจ MCP Tools Detailed
                  1. 1. generate_mini_app_manifest
                  2. 2. generate_mini_app_code
                  3. 3. get_base_deployment_guide
                  4. 4. validate_mini_app_requirements
                  5. 5. get_base_account_guide
                  6. 6. generate_embed_metadata
                  7. 7. get_design_guidelines
                  8. 8. get_debugging_guide
                  9. 9. get_base_app_compatibility
                  10. 10. get_search_discovery_guide
                2. ๐Ÿ† Why This MCP Will Win the Hackathon
                  1. 1. Solves Real Developer Problems
                  2. 2. Demonstrates MCP Excellence
                  3. 3. Base Ecosystem Focus
                  4. 4. Production Ready
                  5. 5. Hackathon Alignment
                3. ๐ŸŽค Live Presentation Commands (3 Minutes)
                  1. Pre-Presentation Setup (Do before going on stage)
                  2. Live Demo Commands (Run these on stage)
                  3. Alternative: Quick Health Check (If time is tight)
                  4. Presentation Flow (2 minutes)
                4. ๐Ÿš€ Demo Flow (5 Minutes)
                  1. 1. Show the Tools (1 minute)
                  2. 2. Generate a Manifest (1 minute)
                  3. 3. Create Starter Code (1 minute)
                  4. 4. Deploy Guide (1 minute)
                  5. 5. Show Design Guidelines (1 minute)
                5. ๐Ÿ”ง Troubleshooting
                  1. Common Issues
                  2. Getting Help
                6. ๐Ÿ“š Resources
                  1. ๐ŸŽ‰ Ready to Present!

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/Mr-Web3/BaseKit-MCP'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server