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

# Cursor AI prompts

> One-shot prompts for implementing Phantom SDK integrations in Cursor AI

## Overview

Use these prompts with [Cursor AI](https://cursor.com/) to implement Phantom wallet integration. Copy the prompt for your preferred SDK and paste it into Cursor.

<Tip>
  For the best experience, install the [Phantom Cursor plugin](/resources/cursor-plugin). It bundles MCP servers, subagents, skills, and rules so Cursor can scaffold complete Phantom integrations, follow best practices automatically, and execute wallet operations — all without manual prompts.
</Tip>

<Tip>
  For better results with manual prompts, add the [Phantom Connect SDK MCP server](/resources/mcp-server) to Cursor. This gives your AI assistant access to Phantom documentation for more accurate answers.
</Tip>

## React SDK prompt

<Accordion title="View React SDK prompt">
  ```text theme={null}
  Implement Phantom React SDK integration for Solana with the following requirements:

  INSTALLATION:
  1. Install the SDK: npm install @phantom/react-sdk
  2. Install Solana dependencies: npm install @solana/web3.js

  SETUP:
  1. Create App.tsx that wraps your application with PhantomProvider:
     - Import: PhantomProvider, useConnect, useSolana, useAccounts, useDisconnect from "@phantom/react-sdk"
     - Import: AddressType from "@phantom/browser-sdk"
     - Configure PhantomProvider with:
       * providerType: "embedded"
       * addressTypes: [AddressType.solana]
       * appId: "[YOUR_APP_ID]"
       * authOptions: {
           authUrl: "https://connect.phantom.app/login",
           redirectUrl: "[YOUR_REDIRECT_URL]"
         }

  WALLET CONNECTION COMPONENT:
  1. Create a component that uses useConnect() and useAccounts() hooks
  2. useConnect() returns: { connect, isConnecting }
  3. Call connect() to initiate connection, returns: { addresses }
  4. useAccounts() returns the connected Solana addresses array
  5. Display "Connect Wallet" button when not connected
  6. Display connected Solana address when connected
  7. Add a disconnect button using useDisconnect() hook

  MESSAGE SIGNING COMPONENT:
  1. Create component that uses useSolana() hook
  2. Get Solana interface: const { solana } = useSolana()
  3. Sign message: await solana.signMessage("Your message here")
  4. Returns signature object with the signed message
  5. Display signature to user in a readable format
  6. Add copy-to-clipboard functionality for signature

  TRANSACTION COMPONENT:
  1. Import required Solana libraries:
     - Import Transaction, SystemProgram, PublicKey from @solana/web3.js
  2. Create transfer transaction:
     - Use SystemProgram.transfer() to create a SOL transfer
     - Set fromPubkey, toPubkey, and lamports (1 SOL = 1,000,000,000 lamports)
  3. Sign and send transaction:
     - await solana.signAndSendTransaction(transaction)
     - Returns { hash } with transaction signature
  4. Display transaction hash with link to Solana explorer
  5. Add input fields for recipient address and amount in SOL
  6. Validate inputs before sending

  REQUIREMENTS:
  - Use TypeScript with proper types
  - Add try-catch error handling for all async operations
  - Show loading states during connection and transactions
  - Display error messages to users with helpful context
  - Add null checks before accessing addresses
  - Style with Tailwind CSS for modern UI
  - Add helpful comments explaining Solana-specific concepts
  - Format addresses with truncation (show first 4 and last 4 characters)
  - Convert lamports to SOL for user display (divide by 1,000,000,000)

  The SDK automatically handles wallet connection UI, authentication flow, and transaction confirmation.
  ```
</Accordion>

<Accordion title="What to replace in the prompt">
  * **\[YOUR\_APP\_ID]**: Replace with your App ID from [Phantom Portal](/phantom-portal/get-app-id)
  * **\[YOUR\_REDIRECT\_URL]**: Replace with your authentication callback URL (must be allowlisted in Phantom Portal)
</Accordion>

## React Native SDK prompt

<Accordion title="View React Native SDK prompt">
  ```text theme={null}
  Implement Phantom React Native SDK integration for Solana mobile apps with the following requirements:

  INSTALLATION:
  1. Install SDK: npm install @phantom/react-native-sdk
  2. Install Solana dependency: npm install @solana/web3.js
  3. Install peer dependencies:
     - For Expo: npx expo install expo-secure-store expo-web-browser expo-auth-session expo-router
     - Required polyfill: npm install react-native-get-random-values

  POLYFILL SETUP (CRITICAL):
  Add this import at the VERY TOP of your app entry point (index.js, App.tsx, or _layout.tsx):
    // MUST be the first import - before any other imports
    import "react-native-get-random-values";
    
    import { PhantomProvider } from "@phantom/react-native-sdk";
    // ... other imports

  APP CONFIGURATION:
  Configure app.json with your custom URL scheme:
    {
      "expo": {
        "name": "My Solana Wallet App",
        "slug": "my-solana-wallet-app",
        "scheme": "[YOUR_SCHEME]",
        "plugins": ["expo-router", "expo-secure-store", "expo-web-browser", "expo-auth-session"]
      }
    }

  PROVIDER SETUP:
  Wrap your app with PhantomProvider in App.tsx or _layout.tsx:
    import { PhantomProvider, AddressType } from "@phantom/react-native-sdk";
    
    export default function App() {
      return (
        <PhantomProvider
          config={{
            providerType: "embedded",
            appId: "[YOUR_APP_ID]",
            scheme: "[YOUR_SCHEME]",
            addressTypes: [AddressType.solana],
            authOptions: {
              redirectUrl: "[YOUR_SCHEME]://phantom-auth-callback",
            },
            appName: "My Solana Wallet App",
          }}
        >
          <YourAppContent />
        </PhantomProvider>
      );
    }

  WALLET SCREEN COMPONENT:
  Create a component using hooks from "@phantom/react-native-sdk":
  1. Import: useConnect, useAccounts, useSolana, useDisconnect
  2. Use React Native components: View, Button, Text, Alert, StyleSheet from "react-native"
  3. Connect flow:
     - const { connect, isConnecting, error } = useConnect()
     - await connect({ provider: "google" })  // or "apple"
     - const { addresses, isConnected } = useAccounts()
  4. Display Solana address when connected (truncate for mobile: show first 4 and last 4 chars)
  5. Add disconnect button using useDisconnect()
  6. Show wallet balance if needed

  MESSAGE SIGNING:
  Implement message signing for authentication:
    - const { solana } = useSolana()
    - const signature = await solana.signMessage("Sign in to MyApp")
    - signature.signature contains the signature string
    - Show success Alert with truncated signature
    - Use for login or authentication flows

  TRANSACTION SCREEN:
  Build a transfer screen with @solana/web3.js:
  1. Import Transaction, SystemProgram, PublicKey from @solana/web3.js
  2. Create TextInput fields for:
     - Recipient address (validate it's a valid Solana address)
     - Amount in SOL (convert to lamports: amount * 1,000,000,000)
  3. Build transaction:
     - Create transfer with SystemProgram.transfer()
     - Set fromPubkey, toPubkey, lamports
  4. Send transaction:
     - await solana.signAndSendTransaction(transaction)
     - Returns { hash } with transaction signature
  5. Show success Alert with link to Solana Explorer
  6. Handle errors with user-friendly messages

  REQUIREMENTS:
  - Use TypeScript with proper types
  - Handle all errors with try-catch and Alert.alert
  - Show loading states during connection and transactions
  - Use StyleSheet for component styling
  - Add pull-to-refresh for balance updates
  - Format SOL amounts properly (show 2-4 decimal places)
  - Truncate addresses for mobile display
  - Add haptic feedback for actions
  - Test thoroughly on both iOS and Android
  - Implement proper null checks for addresses
  - Add helpful comments explaining Solana concepts

  The SDK handles OAuth flow automatically with system browser and deep link redirect back to your app.
  ```
</Accordion>

<Accordion title="What to replace in the prompt">
  * **\[YOUR\_APP\_ID]**: Replace with your App ID from [Phantom Portal](/phantom-portal/get-app-id)
  * **\[YOUR\_SCHEME]**: Replace with your custom URL scheme (for example, `myapp`)
</Accordion>

## Browser SDK prompt

<Accordion title="View Browser SDK prompt">
  ```text theme={null}
  Implement Phantom Browser SDK integration for Solana with the following requirements:

  INSTALLATION:
  1. Install SDK: npm install @phantom/browser-sdk
  2. Install Solana dependency: npm install @solana/web3.js

  BUILD SETUP:
  - Use Vite as build tool: npm create vite@latest my-solana-app -- --template vanilla-ts
  - Configure proper TypeScript settings

  SDK INITIALIZATION (phantom.ts):
  Create a module that initializes and exports the SDK:
    import { BrowserSDK, AddressType } from "@phantom/browser-sdk";
    
    export const sdk = new BrowserSDK({
      providerType: "embedded",
      addressTypes: [AddressType.solana],
      appId: "[YOUR_APP_ID]",
      authOptions: {
        authUrl: "https://connect.phantom.app/login",
        redirectUrl: "[YOUR_REDIRECT_URL]",
      },
    });

  MAIN APPLICATION (main.ts):
  1. Import the SDK instance
  2. Set up DOM elements and event listeners
  3. Implement wallet connection:
     - Call sdk.connect() which returns { addresses }
     - Display connected Solana address in UI
     - Store address in state variable
  4. Implement disconnect:
     - Call sdk.disconnect()
     - Clear address from state
     - Update UI to show disconnected state

  MESSAGE SIGNING:
  Implement message signing for authentication:
    const message = "Sign in to MyApp";
    const signature = await sdk.solana.signMessage(message);
    console.log("Signature:", signature);
    // Display signature in UI
    // Can be used for server-side verification

  TRANSACTIONS:
  Build SOL transfer functionality:
    import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
    
    // Get amount in SOL from user input
    const solAmount = parseFloat(amountInput.value);
    const lamports = solAmount * LAMPORTS_PER_SOL;
    
    // Create transaction
    const transaction = new Transaction().add(
      SystemProgram.transfer({
        fromPubkey: new PublicKey(connectedAddress),
        toPubkey: new PublicKey(recipientAddress),
        lamports: lamports,
      })
    );
    
    // Sign and send
    const result = await sdk.solana.signAndSendTransaction(transaction);
    console.log("Transaction signature:", result.hash);
    
    // Show success with link to Solana Explorer
    const explorerUrl = `https://explorer.solana.com/tx/${result.hash}`;

  WALLET BALANCE:
  Display user's SOL balance:
    // Fetch balance using Solana web3.js Connection
    // Format as SOL (divide lamports by LAMPORTS_PER_SOL)
    // Update on connection and after transactions

  HTML STRUCTURE:
  Create index.html with clean sections:
  - Header with app title and network selector
  - Connect/Disconnect button (style differently based on state)
  - Connected address display (truncated with copy button)
  - Wallet balance display in SOL
  - Message signing section:
    * Text input for message
    * Sign button
    * Signature display area
  - Transaction section:
    * Input for recipient address (validate format)
    * Input for amount in SOL
    * Send button
    * Transaction status display
  - Use Tailwind CSS for modern, responsive styling

  REQUIREMENTS:
  - Use TypeScript with strict mode enabled
  - Add try-catch error handling for all SDK calls
  - Display user-friendly error messages in UI
  - Show loading spinners during async operations
  - Add null checks before accessing addresses
  - Update UI reactively based on connection state
  - Format addresses (show first 4 and last 4 characters)
  - Format SOL amounts with proper decimals
  - Add copy-to-clipboard functionality for addresses and signatures
  - Include helpful comments explaining Solana concepts
  - Validate user inputs before transactions
  - Use modern JavaScript (async/await, optional chaining, nullish coalescing)

  The SDK automatically handles authentication UI, wallet selection, and transaction confirmation.
  ```
</Accordion>

<Accordion title="What to replace in the prompt">
  * **\[YOUR\_APP\_ID]**: Replace with your App ID from [Phantom Portal](/phantom-portal/get-app-id)
  * **\[YOUR\_REDIRECT\_URL]**: Replace with your authentication callback URL (must be allowlisted in Phantom Portal)
</Accordion>

## Step-by-step guide for using the prompts

<Steps>
  <Step title="Get your App ID">
    Make sure you have your App ID from [Phantom Portal](/phantom-portal/get-app-id) before using any prompt.
  </Step>

  <Step title="Customize the prompt">
    Replace placeholder values such as `[YOUR_APP_ID]`, `[YOUR_REDIRECT_URL]`, and `[YOUR_SCHEME]` with your actual values.
  </Step>

  <Step title="Paste into Cursor">
    Open Cursor AI, press `Cmd+K` (or `Ctrl+K` on Windows), and paste the complete prompt.
  </Step>

  <Step title="Review the generated code">
    Cursor will generate a full implementation. Review the code to ensure it meets your requirements.
  </Step>

  <Step title="Test the integration">
    Run your application and test wallet connection, message signing, and transaction flows. Phantom Connect manages authentication using social login through Google or Apple.
  </Step>
</Steps>

## Need more customization?

These prompts generate a working integration. For advanced features, refer to the SDK documentation.

<CardGroup cols={2}>
  <Card title="React SDK docs" icon="react" href="/sdks/react-sdk/index">
    Explore React SDK features and hooks
  </Card>

  <Card title="React Native SDK docs" icon="mobile" href="/sdks/react-native-sdk/index">
    Review React Native SDK capabilities
  </Card>

  <Card title="Browser SDK docs" icon="browser" href="/sdks/browser-sdk/index">
    Learn about Browser SDK features
  </Card>

  <Card title="Developer support" icon="life-ring" href="https://docs.google.com/forms/d/e/1FAIpQLSeHWETFkEJbHQCF-lnl1AHmVQPuyfC0HbnxjDjIp6VYV1sBZQ/viewform">
    Contact the Phantom developer support team
  </Card>
</CardGroup>