AI chat boot

Devloped AI chat Boot using chatgpt gemini for web mobile app

I’ll help you create a cross-platform AI chatbot using React Native for mobile, React for web, and Node.js for the backend with both ChatGPT (OpenAI) and Gemini integration. Here’s the complete code structure:project-structure/ ├── backend/ │ ├── package.json │ ├── index.js │ └── .env ├── web-app/ │ ├── package.json │ ├── src/ │ │ ├── App.js │ │ └── ChatWindow.js ├── mobile-app/ │ ├── package.json │ ├── App.js │ └── components/ │ └── ChatInterface.js

1. Backend (Node.js/Express)cd backend npm install express axios cors dotenv

index.js:require('dotenv').config(); const express = require('express'); const axios = require('axios'); const cors = require('cors'); const app = express(); app.use(cors()); app.use(express.json()); // OpenAI ChatGPT async function getChatGPTResponse(prompt) { const response = await axios.post('https://api.openai.com/v1/chat/completions', { model: "gpt-3.5-turbo", messages: [{role: "user", content: prompt}] }, { headers: { 'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`, 'Content-Type': 'application/json' } }); return response.data.choices[0].message.content; } // Google Gemini async function getGeminiResponse(prompt) { const response = await axios.post(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${process.env.GEMINI_API_KEY}`, { contents: [{ parts: [{ text: prompt }] }] }); return response.data.candidates[0].content.parts[0].text; } app.post('/api/chat', async (req, res) => { try { const { message, provider } = req.body; let response; if (provider === 'chatgpt') { response = await getChatGPTResponse(message); } else if (provider === 'gemini') { response = await getGeminiResponse(message); } res.json({ response }); } catch (error) { res.status(500).json({ error: error.message }); } }); const PORT = process.env.PORT || 5000; app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

.env:OPENAI_API_KEY=your_openai_key GEMINI_API_KEY=your_gemini_key PORT=5000

2. Web App (React)cd web-app npm install react react-dom axios @mui/material @mui/icons-material

App.js:import React, { useState } from 'react'; import axios from 'axios'; import ChatWindow from './ChatWindow'; function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [provider, setProvider] = useState('chatgpt'); const handleSend = async () => { if (!input.trim()) return; const userMessage = { text: input, isUser: true }; setMessages(prev => [...prev, userMessage]); try { const response = await axios.post('http://localhost:5000/api/chat', { message: input, provider }); const botMessage = { text: response.data.response, isUser: false }; setMessages(prev => [...prev, botMessage]); } catch (error) { console.error(error); } setInput(''); }; return ( <div className="App"> <select value={provider} onChange={(e) => setProvider(e.target.value)}> <option value="chatgpt">ChatGPT</option> <option value="gemini">Gemini</option> </select> <ChatWindow messages={messages} input={input} setInput={setInput} handleSend={handleSend} /> </div> ); } export default App;

3. Mobile App (React Native)cd mobile-app npx expo install react-native react-native-webview axios @react-native-async-storage/async-storage

App.js:import React, { useState } from 'react'; import { View, TextInput, Button, FlatList, Text, Picker } from 'react-native'; import axios from 'axios'; export default function App() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [provider, setProvider] = useState('chatgpt'); const handleSend = async () => { if (!input.trim()) return; const userMessage = { text: input, isUser: true }; setMessages(prev => [...prev, userMessage]); try { const response = await axios.post('http://localhost:5000/api/chat', { message: input, provider }); const botMessage = { text: response.data.response, isUser: false }; setMessages(prev => [...prev, botMessage]); } catch (error) { console.error(error); } setInput(''); }; return ( <View style={{ flex: 1, padding: 20 }}> <Picker selectedValue={provider} onValueChange={(value) => setProvider(value)}> <Picker.Item label="ChatGPT" value="chatgpt" /> <Picker.Item label="Gemini" value="gemini" /> </Picker> <FlatList data={messages} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => ( <Text style={{ alignSelf: item.isUser ? 'flex-end' : 'flex-start' }}> {item.text} </Text> )} /> <TextInput value={input} onChangeText={setInput} placeholder="Type your message..." /> <Button title="Send" onPress={handleSend} /> </View> ); }

To Run:

1. Backend:

cd backend npm start

2. Web App:

cd web-app npm start

3. Mobile App:

cd mobile-app npx expo start

Required Environment Variables:

• Create .env in backend with your API keys