Vibe Code a Token Launchpad Prompt

Tools Used

1. Cursor (Using Claude-4-Sonnet)
2. Celo Composer MCP

Prompt

You are an expert full-stack developer tasked with creating a token launchpad application on the Celo blockchain. Build a complete dApp that allows users to easily create and deploy ERC-20 tokens with custom parameters.

Project Setup & Architecture

CRITICAL: Celo Composer MCP Integration

This is the CORE foundation of the entire application. Follow these steps exactly:

1. Initialize with Celo Composer MCP

   • Use the composer-kit-mcp from https://github.com/celo-org/composer-kit-mcp
   • Connect to Celo Composer using the MCP (Model Context Protocol) system
   • Reference the official documentation: https://docs.celo.org/build/mcp/composer-mcp

2. Select Farcaster Template

   • The MCP connects to Celo Composer templates
   • MUST select the "Farcaster" template from available Celo Composer options
   • This provides the base dApp structure for the token launchpad

3. Project Structure Setup

   • Let the Celo Composer Farcaster template generate the initial project structure
   • The template provides pre-configured Web3 setup, wallet integration foundations, and Celo network configuration
   • Build the token launchpad functionality ON TOP OF this generated template

Implementation Workflow

STEP 1: MCP Template Generation

# Initialize with composer-kit-mcp
npm install composer-kit-mcp
# Use MCP to connect to Celo Composer
# Select "Farcaster" template from available options
# Generate base dApp structure

STEP 2: Build Token Launchpad on Template Foundation

• The Farcaster template provides the Web3 foundation
• Add token creation forms and smart contract deployment logic
• Leverage existing wallet connection and Celo network setup
• Extend the template with token-specific functionality

Tech Stack Requirements

Foundation: Celo Composer Farcaster Template (via MCP)

• Base dApp structure from Celo Composer
• Pre-configured Celo network integration
• Existing Web3 wallet setup as foundation

Extended Stack:

• Frontend: Next.js with TypeScript, Tailwind CSS for styling (built on template)
• Blockchain: Celo network (already configured in template)
• Wallet Integration: Wagmi for wallet connections (extend template's wallet setup)
• Smart Contracts: ERC-20 deployment contracts (Thirdweb or OpenZeppelin standards)
• MCP Integration: Core dependency - composer-kit-mcp connecting to Celo Composer

Core Features to Implement

1. User Interface Components

Create a modern, intuitive interface with these key sections:

Landing Page

• Hero section explaining the token launchpad
• "Launch Your Token" CTA button
• Brief explanation of the process
• Celo network benefits highlighting

Token Creation Form
Design a step-by-step form that collects:

• Token Name (e.g., "My Awesome Token")
• Token Symbol (e.g., "MAT", max 6 characters)
• Token Description (multi-line textarea, max 280 characters)
• Total Supply (with decimal handling)
• Initial Distribution settings
• Token Logo Upload (optional)
• Social Links (optional: website, Twitter, Discord)

Validation & Preview

• Real-time form validation
• Token preview card showing how it will appear
• Gas fee estimation
• Deployment cost calculator

2. Smart Contract Integration

Contract Standards
Use either:

• Thirdweb ERC-20 contract standard (https://thirdweb.com/thirdweb.eth/TokenERC20/deploy)
• OpenZeppelin ERC-20 implementation
• Ensure contracts are Celo-optimized

Deployment Pipeline

• Contract compilation and verification
• Automatic deployment to Celo network
• Transaction status tracking
• Contract address generation and display

Features to Include

• Standard ERC-20 functionality (transfer, approve, allowance)
• Mintable tokens option
• Burnable tokens option
• Pausable functionality (optional)
• Ownership controls

3. Wallet Integration & Web3 Functionality

Wallet Connection

• Support for Celo wallets using Wagmi (Farcaster, Valora, MetaMask with Celo config, WalletConnect)
• Network switching to Celo
• Account balance display (CELO and cUSD)

Transaction Management

• Transaction signing flow
• Progress indicators during deployment
• Error handling and user feedback
• Transaction hash and explorer links

4. User Experience Flow

FOUNDATION: Built on Farcaster Template
The entire user journey leverages the Celo Composer Farcaster template's existing infrastructure:

Template-Provided Foundation:

• Pre-built wallet connection flow
• Celo network configuration
• Basic dApp UI structure
• Web3 transaction handling

Token Launchpad Extension Process:

1. Start from Template Base: User lands on Farcaster template-generated dApp
2. Navigate to Token Creation: Add token launchpad as new feature/page
3. Leverage Template's Wallet: Use existing wallet connection for transactions
4. Extend with Token Forms: Build token creation forms on template's UI foundation
5. Deploy via Template's Web3: Use template's smart contract interaction setup
6. Return to Template Context: Integrate results back into overall dApp experience

Step-by-Step Token Creation Process (Built on Template):

1. Connect wallet (using template's existing wallet integration)
2. Fill out token creation form (new UI built on template foundation)
3. Preview token details and confirm (leveraging template's UI patterns)
4. Approve transaction via template's Web3 setup
5. Monitor deployment progress using template's transaction handling
6. Display success page integrated with template's overall UX
7. Provide links to add token to wallet (using template's wallet integration)

Additional Features (Built on Template Foundation)

• Save token drafts using template's storage patterns
• Token deployment history integrated with template's user data
• Share token creation leveraging template's social integrations
• Export token information using template's data handling

Technical Implementation Details

CORE: MCP Integration with Celo Composer

// Primary MCP setup - THIS IS THE FOUNDATION
import { ComposerKit } from 'composer-kit-mcp';

// Initialize MCP connection to Celo Composer
const composerKit = new ComposerKit({
  network: 'celo',
  template: 'farcaster' // CRITICAL: Use Farcaster template
});

// The MCP provides the base dApp structure
// Token launchpad functionality builds on this foundation
const initializeApp = async () => {
  // Connect to Celo Composer via MCP
  await composerKit.initialize();
  
  // Get Farcaster template configuration
  const templateConfig = await composerKit.getTemplate('farcaster');
  
  // Use template's Web3 setup as foundation
  // Add token creation functionality on top
};

Token Creation Flow Integration

The token launchpad extends the Farcaster template with:

1. User Input Collection (builds on template's UI foundation)
2. Smart Contract Deployment (uses template's Web3 setup)
3. Token Launch Process (leverages template's Celo integration)

Smart Contract Deployment Architecture

// Built on top of Farcaster template's Web3 foundation
import { useContract, useContractWrite } from 'wagmi';

// Token factory contract for ERC-20 deployment
const TokenFactory = {
  address: 'CONTRACT_ADDRESS_ON_CELO',
  abi: [
    {
      name: 'createToken',
      type: 'function',
      inputs: [
        { name: 'name', type: 'string' },
        { name: 'symbol', type: 'string' },
        { name: 'totalSupply', type: 'uint256' },
        { name: 'description', type: 'string' }
      ],
      outputs: [{ name: 'tokenAddress', type: 'address' }]
    }
  ]
};

// Use template's wallet connection for deployment
const deployToken = async (tokenData) => {
  // Leverages Farcaster template's Web3 setup
  const { write } = useContractWrite({
    ...TokenFactory,
    functionName: 'createToken',
    args: [
      tokenData.name,
      tokenData.symbol,
      tokenData.totalSupply,
      tokenData.description
    ]
  });
  
  return write();
};

Form Validation Rules

• Token Name: 1-50 characters, alphanumeric and spaces
• Symbol: 2-6 characters, uppercase letters only
• Description: Max 280 characters
• Total Supply: Positive number, handle decimals properly
• All fields required except optional ones

Gas Optimization

• Batch operations where possible
• Use CREATE2 for predictable addresses
• Implement gas estimation
• Provide gas price options (fast, standard, slow)

Testing Requirements

Unit Tests

• Smart contract functionality
• Form validation logic
• Wallet integration
• Transaction handling

Integration Tests

• End-to-end token creation flow
• Celo network interaction
• MCP integration
• Error scenarios

User Testing

• Mobile responsiveness
• Wallet connection flows
• Transaction signing experience
• Error message clarity

Deployment & Configuration

Environment Setup

• Configure for Celo Alfajores testnet initially
• Mainnet configuration ready
• Environment variables for contract addresses
• MCP configuration settings

Security Considerations

• Input sanitization and validation
• Rate limiting for deployments
• Proper error handling
• Contract security best practices

Success Metrics & Analytics

Track:

• Number of tokens created
• Success rate of deployments
• User engagement metrics
• Gas costs and optimization opportunities

Additional Features (Nice to Have)

• Token analytics dashboard
• Community features (comments, ratings)
• Token marketplace integration
• Advanced tokenomics options (vesting, staking)
• Multi-language support
• Dark/light theme toggle

Documentation Requirements

Provide:

• User guide for token creation
• Developer documentation
• API documentation for MCP integration
• Troubleshooting guide
• FAQ section

Deliverables Expected

1. Complete Next.js application with all features
2. Smart contracts deployed and verified
3. Comprehensive testing suite
4. Documentation and user guides
5. Production-ready deployment configuration

Focus on creating a seamless, user-friendly experience that makes token creation accessible to non-technical users while maintaining security and reliability. The app should feel professional and trustworthy, encouraging users to launch their tokens on the Celo network.