> ## Documentation Index
> Fetch the complete documentation index at: https://docs.startale.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Mini App quickstart

> Build, sign, register, and launch a Startale Mini App in the local sandbox.

By the end of this guide you will have a working Mini App running inside the Startale Mini App sandbox, signed in with the host wallet.

## Prerequisites

* Node.js 20 or later, plus pnpm.
* An existing web application or a fresh Vite + React project.

If you do not have a project, scaffold one:

```bash theme={null}
pnpm create vite@latest my-miniapp --template react-ts
cd my-miniapp
pnpm install
```

## 1. Install the SDKs

```bash theme={null}
pnpm add @startale/app-sdk @farcaster/miniapp-sdk @farcaster/miniapp-wagmi-connector wagmi viem @tanstack/react-query
```

## 2. Configure wagmi with the Startale connector

```ts src/wagmi.ts theme={null}
import { startaleConnector } from '@startale/app-sdk'
import { http, createConfig } from 'wagmi'
import { soneium } from 'wagmi/chains'

export const config = createConfig({
  chains: [soneium],
  connectors: [startaleConnector()],
  transports: {
    [soneium.id]: http(),
  },
})
```

The Startale connector replaces the default Farcaster wallet. Inside the Startale App, connections route to the user's smart account.

## 3. Initialize the Farcaster SDK

```tsx src/App.tsx theme={null}
import { useEffect } from 'react'
import { sdk } from '@farcaster/miniapp-sdk'

export function App() {
  useEffect(() => {
    sdk.actions.ready()
  }, [])

  return <Game />
}
```

`sdk.actions.ready()` tells the host the Mini App has loaded.

## 4. Add the manifest

Create `public/.well-known/farcaster.json`. Once it is hosted, validate it at [app.startale.com/developers/manifest](https://app.startale.com/developers/manifest).

```json public/.well-known/farcaster.json theme={null}
{
  "frame": {
    "version": "1",
    "name": "My Mini App",
    "tagline": "Predict, win, claim",
    "subtitle": "Prediction markets on Soneium",
    "iconUrl": "https://my-miniapp.com/icon.webp",
    "homeUrl": "https://my-miniapp.com",
    "splashImageUrl": "https://my-miniapp.com/splash.png",
    "splashBackgroundColor": "#0c0c0f",
    "heroImageUrl": "https://my-miniapp.com/hero.webp",
    "primaryCategory": "games",
    "featuredBannerImageUrl": "https://my-miniapp.com/banner.webp",
    "projectWebsite": "https://my-miniapp.com",
    "socialLinks": {
      "twitter": "https://x.com/myminiapp"
    }
  }
}
```

See [Manifest](/miniapps/manifest) for every field, [Media specs](/miniapps/media-specs) for image requirements.

## 5. Sign the manifest (optional)

`accountAssociation` is part of the Farcaster spec and links your domain to a Farcaster account. The Startale App does not validate or use it at registration time, it is ignored. You can include it for compatibility with other Farcaster clients such as Warpcast.

If you need it, open the [Farcaster manifest tool](https://farcaster.xyz/~/developers/mini-apps/manifest), enter your hostname (no `https://` prefix), and follow the steps. Paste the resulting object into your manifest as a sibling of `frame`:

```json theme={null}
{
  "accountAssociation": {
    "header": "...",
    "payload": "...",
    "signature": "..."
  },
  "frame": {
    /* ... */
  }
}
```

## 6. Add the embed meta tag

In the `<head>` of every page you want shareable, add the tag below. Validate it at [app.startale.com/developers/embed](https://app.startale.com/developers/embed).

```html theme={null}
<meta name="fc:miniapp" content='{"version":"1","imageUrl":"https://my-miniapp.com/preview.png","button":{"title":"Open","action":{"type":"launch_frame","name":"My Mini App","url":"https://my-miniapp.com","splashImageUrl":"https://my-miniapp.com/splash.png","splashBackgroundColor":"#0c0c0f"}}}' />
```

See [Embed](/miniapps/embed) for the full schema.

## 7. Preview and test

Open [app.startale.com/developers/preview](https://app.startale.com/developers/preview) to preview your Mini App instantly without any local setup. For a fully local environment, clone and run the Startale [Mini App sandbox](https://github.com/StartaleGroup/miniapp-sandbox):

```bash theme={null}
git clone https://github.com/StartaleGroup/miniapp-sandbox.git
cd miniapp-sandbox
pnpm install
pnpm dev
```

Register your local Mini App in `src/pages/configMiniApps.ts`:

```ts theme={null}
export const MINI_APPS: MiniAppConfig[] = [
  { url: 'http://localhost:5173/' },
]
```

Start your Mini App dev server (`pnpm dev` in your project), open the sandbox at [localhost:3100](http://localhost:3100), and launch your Mini App.

## Where to next

<Columns cols={2}>
  <Card title="Read user context" icon="user" href="/miniapps/runtime-context">
    STAR Points and verified linked EOAs.
  </Card>

  <Card title="Wallet constraints" icon="wallet" href="/miniapps/wallet-integration">
    Which RPC methods are available inside the host.
  </Card>

  <Card title="Submit your project" icon="paper-plane" href="/miniapps/submission">
    QA, deadlines, and the intake form.
  </Card>

  <Card title="Sandbox details" icon="flask" href="/miniapps/sandbox">
    What the sandbox simulates and what it does not.
  </Card>
</Columns>
