Today, we’ll set up the foundation for the AI Sales Assistant—a GPT-powered mobile app that records sales voice notes and auto-generates CRM entries using HubSpot or Salesforce API.
1. What Is the AI Sales Assistant?
✅ Voice-to-CRM: Salespeople can record voice memos after meetings → AI transcribes & generates structured CRM notes.
✅ GPT-Powered Insights: GPT summarizes key points, extracts action items, or recommends next steps.
✅ CRM Sync: Automatically push notes to HubSpot, Salesforce, or other platforms.
2. Tech Stack Overview
| Feature | Tool |
|---|---|
| GPT Integration | OpenAI GPT API |
| Voice Memo Recording | Expo AV Audio API |
| Speech-to-Text (Optional) | Google Speech-to-Text or AssemblyAI |
| CRM Integration | HubSpot API / Salesforce REST API |
| React Native App Framework | React Native (Expo CLI) |
3. Project Initialization
✅ Step 1: Create React Native Project with Expo
npx create-expo-app ai-sales-assistant
cd ai-sales-assistant
✅ Step 2: Install Core Dependencies
npm install axios react-native-dotenv
expo install expo-av react-native-gesture-handler
✅ Step 3: Set Up .env File
Create .env in the project root:
OPENAI_API_KEY=your_openai_key
HUBSPOT_API_KEY=your_hubspot_key
SALESFORCE_CLIENT_ID=your_salesforce_client_id
SALESFORCE_CLIENT_SECRET=your_salesforce_client_secret
SALESFORCE_REFRESH_TOKEN=your_refresh_token
SALESFORCE_INSTANCE_URL=your_instance_url
✅ Step 4: Configure babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['module:react-native-dotenv'],
};
};
4. Project Folder Structure
/ai-sales-assistant
│
├── /src
│ ├── /components
│ ├── /screens
│ ├── /api
│ └── /helpers
│
├── App.js
└── .env
5. Creating App Navigation
Install React Navigation:
npm install @react-navigation/native react-native-screens react-native-safe-area-context react-native-vector-icons react-native-reanimated react-native-stack
Modify App.js:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './src/screens/HomeScreen';
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
6. Creating the Placeholder Home Screen
Create src/screens/HomeScreen.js:
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
export default function HomeScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={styles.title}>AI Sales Assistant</Text>
<Button title="Record Voice Memo" onPress={() => alert('Voice Recording Coming Soon')} />
<Button title="Sync CRM Notes" onPress={() => alert('CRM Sync Coming Soon')} />
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
});
7. Testing the Basic Setup
✅ Run the App
npx expo start
You should see:
- App title: “AI Sales Assistant”
- 2 Buttons: “Record Voice Memo” & “Sync CRM Notes”
8. Key Concepts Covered
✅ Set up Expo React Native project.
✅ Installed navigation & core dependencies.
✅ Prepared environment variables for API keys.
✅ Created basic Home Screen layout.
9. Next Steps: Recording Voice Memos
Tomorrow, we’ll:
- Integrate Expo AV Audio API.
- Record sales meeting voice memos for later GPT processing.
10. References & Learning Resources
11. SEO Keywords:
AI sales assistant app, React Native GPT integration, voice memo sales app, CRM automation app, HubSpot API React Native, Salesforce API integration.
