Privy App Kit - React Native - Solana Agent Kit

Demo

Features

Embedded Wallet

Authentication with Privy supporting Google, Apple, and Email login methods

Natural Language Interface

Chat interface for interacting with Solana blockchain using simple language

AI-Powered

Solana transaction capabilities through an intelligent AI assistant

Chat History

Persistent chat history management across sessions

Profile Management

User profile creation and management

Native Mobile Experience

Built with React Native for native mobile performance

Prerequisites

Node.js (v16+)
MongoDB
OpenAI API Key
Helius API Key (for Solana RPC access)
iOS/Android development environment

Setup Instructions

Clone the repository

git clone https://github.com/yourusername/privy-sak-react-native.git
cd privy-sak-react-native

Install dependencies

yarn install

Configure environment variables

Copy the example environment files:

# For client
cp .env.local.example .env.local

# For server
cd server
cp .env.example .env
cd ..

# For Expo configuration
cp app.example.json app.json

Update these files with your app’s information and API keys.

Start the server

cd server
yarn dev

Run the app on iOS

npx expo run:ios

For Android:

npx expo run:android

This app cannot be run with Expo Go as some polyfills used in the project are not compatible with Expo Go. You must use the development build with npx expo run:ios or npx expo run:android.

Environment Variables

The following environment variables are required:

Client (.env.local)

# OpenAI API Key for chat functionality
EXPO_PUBLIC_OPENAI_API_KEY=your_openai_api_key

# Server URL
EXPO_PUBLIC_API_URL=http://localhost:3001

# Helius RPC URL with API key
EXPO_PUBLIC_HELIUS_URL=https://mainnet.helius-rpc.com/?api-key=your_helius_api_key

Server (.env)

# OpenAI API Key
OPENAI_API_KEY=your_openai_api_key

# MongoDB connection string
MONGODB_URI=mongodb://localhost:27017/privy-sak

# Helius RPC URL
HELIUS_STAKED_URL=https://mainnet.helius-rpc.com/?api-key=your_helius_api_key

# Server port
PORT=3001

Project Structure

Client Structure

src/
├── screens/              # App screens
│   ├── AuthScreen.js     # Authentication screen
│   ├── ChatScreen.js     # Main chat interface
│   ├── ProfileScreen.js  # User profile management
│   └── SettingsScreen.js # App settings
├── components/           # Reusable components
│   ├── chat/             # Chat-related components
│   ├── wallet/           # Wallet components
│   └── ui/               # UI components
├── hooks/                # Custom React hooks
│   ├── useChat.js        # Chat functionality
│   ├── useSolana.js      # Solana interaction
│   └── useAuth.js        # Authentication
├── walletProviders/      # Privy wallet integration
├── navigation/           # Navigation setup
├── assets/               # Images, colors, icons
├── lib/                  # Utility functions
│   ├── ai/               # AI providers and tools
│   ├── api/              # API interactions
│   └── utils/            # Helper functions
└── state/                # State management

Server Structure

server/
├── controllers/          # API endpoint controllers
│   ├── authController.js # Authentication endpoints
│   ├── chatController.js # Chat history management
│   └── userController.js # User profile management
├── models/               # MongoDB models
│   ├── Chat.js           # Chat data model
│   └── User.js           # User data model
├── routes/               # API routes
│   ├── auth.js           # Auth routes
│   ├── chat.js           # Chat routes
│   └── user.js           # User routes
├── middleware/           # Custom middleware
│   ├── auth.js           # Authentication middleware
│   └── error.js          # Error handling
├── db/                   # Database connection
└── server.js             # Main server file

Privy Integration

This example demonstrates how to integrate Privy’s embedded wallet solution with React Native. Key integration points include:

Wallet Provider Setup

Wallet Provider Implementation

// src/walletProviders/index.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import { PrivyClient } from '@privy-io/react-native';

const WalletContext = createContext(null);

export function WalletProvider({ children }) {
  const [privyClient, setPrivyClient] = useState(null);
  const [wallet, setWallet] = useState(null);
  const [connected, setConnected] = useState(false);
  
  useEffect(() => {
    const initPrivy = async () => {
      const client = new PrivyClient({
        appId: process.env.EXPO_PUBLIC_PRIVY_APP_ID,
      });
      
      setPrivyClient(client);
      
      // Check if user is already logged in
      const session = await client.getSession();
      if (session) {
        const walletInfo = await client.getWallet();
        setWallet(walletInfo);
        setConnected(true);
      }
    };
    
    initPrivy();
  }, []);
  
  const login = async (method) => {
    try {
      await privyClient.login(method);
      const walletInfo = await privyClient.getWallet();
      setWallet(walletInfo);
      setConnected(true);
      return true;
    } catch (error) {
      console.error('Login failed:', error);
      return false;
    }
  };
  
  const logout = async () => {
    try {
      await privyClient.logout();
      setWallet(null);
      setConnected(false);
      return true;
    } catch (error) {
      console.error('Logout failed:', error);
      return false;
    }
  };
  
  return (
    <WalletContext.Provider
      value={{
        privyClient,
        wallet,
        connected,
        login,
        logout,
        // Additional wallet functions
        signTransaction: async (tx) => await wallet?.signTransaction(tx),
        signMessage: async (msg) => await wallet?.signMessage(msg),
        sendTransaction: async (tx, connection) => {
          return await wallet?.sendTransaction(tx, connection);
        },
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}

export const useWallet = () => useContext(WalletContext);

Solana Agent Kit Integration

Solana Agent Integration

// src/hooks/useSolanaAgent.js
import { useMemo } from 'react';
import { SolanaAgentKit, createVercelAITools } from 'solana-agent-kit';
import TokenPlugin from '@solana-agent-kit/plugin-token';
import { Connection, PublicKey } from '@solana/web3.js';
import { useWallet } from '../walletProviders';

export function useSolanaAgent() {
  const { wallet, connected, signTransaction, signMessage, sendTransaction } = useWallet();
  
  const agent = useMemo(() => {
    if (!connected || !wallet) return null;
    
    return new SolanaAgentKit(
      {
        publicKey: new PublicKey(wallet.address),
        signTransaction,
        signMessage,
        sendTransaction,
        signAndSendTransaction: async (tx) => {
          const signed = await signTransaction(tx);
          const connection = new Connection(
            process.env.EXPO_PUBLIC_HELIUS_URL,
            'confirmed'
          );
          const signature = await sendTransaction(signed, connection);
          return { signature };
        },
      },
      process.env.EXPO_PUBLIC_HELIUS_URL,
      {}
    ).use(TokenPlugin);
  }, [wallet, connected, signTransaction, signMessage, sendTransaction]);
  
  const tools = useMemo(() => {
    if (!agent) return null;
    return createVercelAITools(agent, agent.actions);
  }, [agent]);
  
  return { agent, tools, isReady: !!agent };
}

Mobile-Specific Considerations

When working with Solana Agent Kit in React Native, consider these mobile-specific aspects:

Polyfills: Several Node.js modules need polyfills in React Native
Performance: Be mindful of resource usage on mobile devices
Offline Handling: Implement proper handling for intermittent connectivity
Deep Linking: Configure for wallet connection redirects
Secure Storage: Use secure storage for sensitive information

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Introduction

Quickstart

Plugins

Adapters

Using LLMs

Examples

Devrel Agents

Integrations

Privy App Kit - React Native

Demo

Features

Embedded Wallet

Natural Language Interface

AI-Powered

Chat History

Profile Management

Native Mobile Experience

Prerequisites

Setup Instructions

Environment Variables

Client (.env.local)

Server (.env)

Project Structure

Privy Integration

Wallet Provider Setup

Solana Agent Kit Integration

Mobile-Specific Considerations

License

Contributing

Introduction

Quickstart

Plugins

Adapters

Using LLMs

Examples

Devrel Agents

Integrations

​Demo

​Features

Embedded Wallet

Natural Language Interface

AI-Powered

Chat History

Profile Management

Native Mobile Experience

​Prerequisites

​Setup Instructions

​Environment Variables

​Client (.env.local)

​Server (.env)

​Project Structure

​Privy Integration

​Wallet Provider Setup

​Solana Agent Kit Integration

​Mobile-Specific Considerations

​License

​Contributing

Demo

Features

Prerequisites

Setup Instructions

Environment Variables

Client (.env.local)

Server (.env)

Project Structure

Privy Integration

Wallet Provider Setup

Solana Agent Kit Integration

Mobile-Specific Considerations

License

Contributing