> ## Documentation Index
> Fetch the complete documentation index at: https://base-a060aa97-eb-mini-app-ia-overhaul.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# What are Mini Apps?

> Overview and implementation guide for Mini Apps in Base App

Mini Apps are lightweight web applications that run natively within clients like Base App. Users instantly access mini apps without downloads, benefit from seamless wallet interactions, and discover apps directly in the social feed. This benefits app developers by creating viral loops for user acquisition and engagement.

## What is a Mini App?

A Mini App is composed of:

<CardGroup cols={2}>
  <Card title="Your Existing Web Application" icon="globe">
    Your current web app works as-is
  </Card>

  <Card title="MiniKitProvider Wrapper" icon="code">
    Simple wrapper component integration
  </Card>

  <Card title="Manifest File" icon="file">
    Single farcaster.json configuration file
  </Card>

  <Card title="Standard Deployment" icon="rocket">
    Deploy to any hosting platform (Vercel, Netlify, etc.)
  </Card>
</CardGroup>

**No rebuilding, architectural changes, or complex integrations are required.**

## Code Implementation

<Tabs>
  <Tab title="Before (Standard Web App)">
    ```jsx
    function App() {
      return (
        <div>
          <MyExistingComponent />
          <AnotherComponent />
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="After (Mini App Implementation)">
    ```jsx
    import { MiniKitProvider } from '@coinbase/onchainkit/minikit';

    function App() {
    return (
    <MiniKitProvider projectId="your-id">
    <MyExistingComponent /> {/* Existing components unchanged */}
    <AnotherComponent /> {/* Existing components unchanged */}
    </MiniKitProvider>
    );
    }

    ```

    **Changes Required**: Two import lines and one wrapper component. All existing components remain unchanged.
  </Tab>
</Tabs>

## Implementation Examples

<Tabs>
  <Tab title="Simple Example with MiniKit">
    ```shell
    npx create-onchain --mini
    cd my-miniapp
    npm run dev
    ```
  </Tab>

  <Tab title="Non-React Implementation (Vue, Svelte, Vanilla JS)">
    ```shell
    npm create @farcaster/mini-app
    cd my-miniapp
    npm run dev
    ```
  </Tab>
</Tabs>

<Check>
  **Result**: Functional Mini App with wallet integration, transaction
  capabilities, and social features.
</Check>

## Pre-Solved Development Challenges

<AccordionGroup>
  <Accordion title="Common Engineering Concerns">
    * Complex wallet integration processes
    * Authentication flow implementation
    * Mobile responsiveness requirements
    * Cross-platform compatibility issues
    * User onboarding friction
  </Accordion>

  <Accordion title="MiniKit Automated Solutions">
    * **Mobile Optimization**: Automatic handling of safe areas and responsive design
    * **Platform Compatibility**: Operates across Farcaster, Coinbase Wallet, and web browsers
    * **User Context**: Immediate access to user identification
  </Accordion>
</AccordionGroup>

## Manifest File Configuration

Mini Apps require one configuration file located at `/.well-known/farcaster.json` in your project root. This file instructs clients how to display your application.

### Sample Manifest Structure

```json
{
  "accountAssociation": {
    "header": "eyJmaWQiOjgxODAyNi...",
    "payload": "eyJkb21haW4iOiJleGFtcGxlLmNvbSJ9",
    "signature": "MHhmOGQ1YzQyMmU3ZTZlMWNhMzU1..."
  },
  "frame": {
    "version": "1",
    "name": "Your App Name",
    "subtitle": "Short tagline",
    "description": "Detailed description of what your app does",
    "iconUrl": "https://yourapp.com/icon.png",
    "homeUrl": "https://yourapp.com",
    "splashImageUrl": "https://yourapp.com/splash.png",
    "splashBackgroundColor": "#000000",
    "heroImageUrl": "https://yourapp.com/hero.png",
    "tagline": "One-line value proposition",
    "screenshotUrls": [
      "https://yourapp.com/screenshot1.png",
      "https://yourapp.com/screenshot2.png"
    ],
    "primaryCategory": "games",
    "tags": ["multiplayer", "strategy", "onchain"],,
    // use only while testing
    "noindex": true,
    "webhookUrl": "https://yourapp.com/api/webhook"
  }
}
```

<Warning>
  While testing your Mini App, add "noindex": true to your manifest this
  prevents the app from being indexed during development.
</Warning>

## Categories and Discovery

### Primary Categories

<CardGroup cols={3}>
  <Card title="games" icon="gamepad">
    Gaming and entertainment applications
  </Card>

  <Card title="social" icon="users">
    Social networking and communication tools
  </Card>

  <Card title="finance" icon="dollar-sign">
    DeFi, trading, and payment applications
  </Card>

  <Card title="utility" icon="wrench">
    Tools and productivity applications
  </Card>

  <Card title="productivity" icon="briefcase">
    Task management and organization tools
  </Card>

  <Card title="developer-tools" icon="code">
    Development utilities
  </Card>

  <Card title="art-creativity" icon="palette">
    Creative and artistic applications
  </Card>
</CardGroup>

### Account Association (Domain Verification)

Domain ownership verification is required. Generate your manifest using:

<Tabs>
  <Tab title="MiniKit Method">
    ```shell
    npx create-onchain --manifest
    ```
  </Tab>

  <Tab title="Alternative Farcaster Tool">
    You can use the [Farcaster manifest tool](https://farcaster.xyz/~/developers/mini-apps/manifest) for generation.
  </Tab>
</Tabs>

### Image Requirements

<AccordionGroup>
  <Accordion title="iconUrl">
    200x200px PNG/JPG format
  </Accordion>

  <Accordion title="splashImageUrl">
    200x200px PNG/JPG (displayed during app loading)
  </Accordion>

  <Accordion title="heroImageUrl">
    1200x628px PNG/JPG (for featured placement)
  </Accordion>

  <Accordion title="screenshotUrls">
    App store screenshots in various sizes
  </Accordion>
</AccordionGroup>

## Deployment Process

The deployment process remains identical to standard web applications:

<Steps>
  <Step title="Build Application">
    `npm run build` (standard process)
  </Step>

  <Step title="Add Configuration">`public/.well-known/farcaster.json`</Step>

  <Step title="Deploy">
    Use any hosting platform (Vercel, Netlify, custom servers)
  </Step>

  <Step title="Browser Testing">Functions as standard web application</Step>

  <Step title="Farcaster Testing">
    <Card title="Test with Farcaster Tools" icon="test-tube" href="https://farcaster.xyz/~/developers/mini-apps/manifest">
      Validate your Mini App configuration
    </Card>
  </Step>
</Steps>

No special hosting, new infrastructure, or complex setup procedures required.

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Do we need to rebuild our entire application?">
    No. Wrap your existing application in `<MiniKitProvider>`. Implementation complete.
  </Accordion>

  <Accordion title="Will this break our current web application?">
    No. Mini Apps function in regular browsers. The same codebase works across all
    platforms.
  </Accordion>

  <Accordion title="Do we need blockchain expertise?">
    No. Integration complexity is similar to Stripe implementation.
  </Accordion>

  <Accordion title="What about user data and privacy?">
    Maintain current practices. You control data, backend systems, and privacy
    policies.
  </Accordion>

  <Accordion title="What is the performance impact?">
    Minimal impact. MiniKit SDK is approximately 50KB. Application performance
    remains unchanged.
  </Accordion>

  <Accordion title="We don't use React/Next.js. Is this compatible?">
    Yes. The Farcaster SDK supports Vue, Angular, Svelte, and any web framework.
  </Accordion>
</AccordionGroup>

## Technical Resources

<CardGroup cols={2}>
  <Card title="Live Code Examples" icon="github" href="https://github.com/base/demos/tree/master/minikit">
    View working implementation examples
  </Card>

  <Card title="MiniKit" icon="book" href="https://docs.base.org/base-app/build-with-minikit/overview">
    MiniKit documentation and overview
  </Card>

  <Card title="Mini Apps Guide" icon="compass" href="https://docs.base.org/base-app/mini-apps">
    Comprehensive guide to Mini Apps
  </Card>

  <Card title="Debug Guide" icon="alert-triangle" href="https://docs.base.org/base-app/build-with-minikit/debugging">
    Debugging MiniKit and Mini Apps
  </Card>

  <Card title="Debug Tools" icon="bug" href="https://farcaster.xyz/~/developers/mini-apps/debug">
    Validate and test your Mini App
  </Card>

  <Card title="Farcaster SDK" icon="package" href="https://miniapps.farcaster.xyz/docs/getting-started">
    Farcaster Mini Apps SDK documentation
  </Card>

  <Card title="Onchainkit" icon="puzzle-piece" href="https://docs.base.org/builderkits/onchainkit/getting-started">
    OnchainKit components and guides
  </Card>
</CardGroup>