Issue on docs

[JohnWS60]

Path: /mini-apps/resou# Mini App Context

Improve user experience by instantly displaying user profile data and customizing user flows based on where your mini app was opened

When your app is opened as a mini app, sdk.context provides 4 data objects:

• user: User profile data
• location: Where the mini app was opened
• client: Host platform (e.g. the Base app or another Farcaster client) and device data
• features: Availability and state of features in the current client

```ts MiniAppContextTypes.ts theme={null} export type MiniAppPlatformType = 'web' | 'mobile';

export type MiniAppContext = {
user: {
fid: number;
username?: string;
displayName?: string;
pfpUrl?: string;
};
location?: MiniAppLocationContext;
client: {
platformType?: MiniAppPlatformType;
clientFid: number;
added: boolean;
safeAreaInsets?: SafeAreaInsets;
notificationDetails?: MiniAppNotificationDetails;
};
features?: {
haptics: boolean;
cameraAndMicrophoneAccess?: boolean;
};
};

</Panel>

## Implementation

1. Install and import `@farcaster/miniapp-sdk`
2. Check if opened as a mini app using `sdk.isInMiniApp();`
3. If in a mini app, load the context object using `sdk.context`

In the example below we detect if the app was opened as a mini app, and if so, we return the user's username, fid, display name, and profile image.

```typescript app/profile/page.tsx theme={null}
"use client";
import { sdk } from "@farcaster/miniapp-sdk";
import { useEffect, useState } from "react";

export default function Profile() {
const [user, setUser] = useState(null);
const [isInMiniApp, setIsInMiniApp] = useState(false); 

useEffect(() => {
  const loadUserData = async () => {
    try {
      // Check if we're in a Mini App
      const miniAppStatus = await sdk.isInMiniApp();
      setIsInMiniApp(miniAppStatus);

      if (miniAppStatus) {
        // Get context and extract user info
        const context = await sdk.context;
        setUser(context.user);
      }
    } catch (error) {
      console.error("Error loading user data:", error);
    }
  };

  loadUserData();
}, []);

// Show message if not in Mini App
if (!isInMiniApp) {
  return (
    <div>
      <p>Please open this app in a Farcaster or Base client to see your profile.</p>
    </div>
  );
}

// Show user information
if (user) {
  return (
    <div>
      <h2>Welcome, {user.displayName || user.username}!</h2>
      <p>FID: {user.fid}</p>
      <p>Username: @{user.username}</p>
      {user.pfpUrl && (
        <img 
          src={user.pfpUrl} 
          alt="Profile" 
          width={64} 
          height={64} 
          style={{ borderRadius: '50%' }}
        />
      )}
    </div>
  );
}

return <div>Loading user profile...</div>;
}

Schema

User Object

Contains the user's profile information. This data shouldn't be used for authentication or sensitive actions because its passed by the application.

Unique Farcaster identifier for the user. Handle without @ symbol. User's chosen display name. Profile picture URL. User's biography text. User's location information. Google Places ID. Human-readable location description.

{
  "fid": 6841,
  "username": "deodad",
  "displayName": "Tony D'Addeo",
  "pfpUrl": "https://i.imgur.com/dMoIan7.jpg",
  "bio": "Building @warpcast and @farcaster",
  "location": {
    "placeId": "ChIJLwPMoJm1RIYRetVp1EtGm10",
    "description": "Austin, TX, USA"
  }
}

Location Object

Contains information about the context from which the Mini App was launched. This helps you understand how users discovered and accessed your app.

Location Types:

• cast_embed: Launched from a cast where your app is embedded
• cast_share: Launched when a user shared a cast to your app
• notification: Launched from a notification triggered by your app
• launcher: Launched directly from the client app catalog
• channel: Launched from within a specific Farcaster channel
• open_miniapp: Launched from another Mini App

CastEmbedLocationContext

Indicates the Mini App was launched from a cast where it is an embed. The embed URL. Cast information containing the embed.

{
  "type": "cast_embed",
  "embed": "https://myapp.example.com",
  "cast": {
    "author": {
      "fid": 3621,
      "username": "alice",
      "displayName": "Alice",
      "pfpUrl": "https://example.com/alice.jpg"
    },
    "hash": "0xa2fbef8c8e4d00d8f84ff45f9763b8bae2c5c544",
    "timestamp": 1749160866000,
    "text": "Check out this awesome mini app!",
    "embeds": ["https://myapp.example.com"],
    "channelKey": "farcaster"
  }
}

CastShareLocationContext

Indicates the Mini App was launched when a user shared a cast to your app. The cast that was shared to your app.

NotificationLocationContext

Indicates the Mini App was launched from a notification. Notification details.

<ParamField path="notification.notificationId" type="string" required>
  Unique notification identifier.
</ParamField>

<ParamField path="notification.title" type="string" required>
  Notification title.
</ParamField>

<ParamField path="notification.body" type="string" required>
  Notification body text.
</ParamField>

{
  "type": "notification",
  "notification": {
    "notificationId": "f7e9ebaf-92f0-43b9-a410-ad8c24f3333b",
    "title": "Yoinked!",
    "body": "horsefacts captured the flag from you."
  }
}

LauncherLocationContext

Indicates the Mini App was launched directly by the client app outside of a context.

ChannelLocationContext

Indicates the Mini App was launched from within a specific Farcaster channel. Channel details. Channel key identifier. Channel name. Channel profile image URL.

OpenMiniAppLocationContext

Indicates the Mini App was launched from another Mini App. The domain of the Mini App that opened the current app.

Client Object

Contains details about the Farcaster client running your Mini App. This data should be considered untrusted.

ClientContext

Platform where the app is running. Self-reported FID of the client (e.g., 9152 for Farcaster). Whether the user has added your Mini App to their client. Screen insets to avoid navigation elements that obscure the view.

<Expandable title="properties">
  <ParamField path="top" type="number" required>
    Top safe area inset in pixels.
  </ParamField>

  <ParamField path="bottom" type="number" required>
    Bottom safe area inset in pixels.
  </ParamField>

  <ParamField path="left" type="number" required>
    Left safe area inset in pixels.
  </ParamField>

  <ParamField path="right" type="number" required>
    Right safe area inset in pixels.
  </ParamField>
</Expandable>

Notification configuration if enabled.

<Expandable title="properties">
  <ParamField path="url" type="string" required>
    Endpoint for sending notifications.
  </ParamField>

  <ParamField path="token" type="string" required>
    Authentication token for notifications.
  </ParamField>
</Expandable>

{
  "platformType": "mobile",
  "clientFid": 9152,
  "added": true,
  "safeAreaInsets": {
    "top": 0,
    "bottom": 20,
    "left": 0,
    "right": 0
  },
  "notificationDetails": {
    "url": "https://api.farcaster.xyz/v1/frame-notifications",
    "token": "a05059ef2415c67b08ecceb539201cbc6"
  }
}

Features Object

Indicates which platform features are available and their current state in the client.

Whether haptic feedback is supported on the current platform. Whether camera and microphone permissions have been granted and stored for this mini app.

{
  "haptics": true,
  "cameraAndMicrophoneAccess": true
}

For more detailed capability detection, use the sdk.getCapabilities() method which returns specific SDK methods supported by the host.
rces/design-resources