AI-இயங்கும் சாட்போட்கள் பயனர் அனுபவத்தை மேம்படுத்துவதோடு, பதில்களைத் திறம்பட தானியக்கமாக்கும். இந்த டுடோரியலில்,   பயன்படுத்தி பின்தள ஒருங்கிணைப்புடன்,   ,   , மற்றும்   பயன்படுத்தி எப்படி விரைவாக ஒரு சாட்போட்டை உருவாக்குவது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். அதன் எளிமை மற்றும் வேகத்துடன், நவீன ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை அமைப்பதை Vite எளிதாக்குகிறது. Express ஐப் React Vite Cohere's API ஐப்  சேவையகத்தின் மூலம் கோரிக்கைகளை ரூட்டிங் செய்வதன் மூலம் முக்கியமான API விசைகளை வெளிப்படுத்துவதை இந்தக் கட்டமைப்பு தடுக்கிறது.  நீங்கள் என்ன கற்றுக் கொள்வீர்கள்  Vite உடன் ஒரு அடிப்படை எதிர்வினை திட்டத்தை அமைத்தல்.  இயற்கை மொழி உருவாக்கத்திற்கு கோஹேரின் AI தளத்தைப் பயன்படுத்துதல்.  Cohere இன் API உடன் தொடர்பு கொள்ள ஒரு எக்ஸ்பிரஸ் சேவையகத்தை உருவாக்குதல்.  ரியாக்டில் பதிலளிக்கக்கூடிய சாட்போட் இடைமுகத்தை உருவாக்குதல்.  முன்நிபந்தனைகள்  React, JavaScript மற்றும் Node.js பற்றிய அடிப்படை அறிவு.  உங்கள் கணினியில் Node.js நிறுவப்பட்டுள்ளது.  ஒரு கோஹர் கணக்கு (API விசையைப் பெற   பதிவு செய்யவும்) இங்கே  படி 1: உங்கள் எதிர்வினை திட்டத்தை அமைக்கவும்  Vite ஐப் பயன்படுத்தி புதிய ரியாக்ட் திட்டத்தை உருவாக்கவும்:   npm create vite@latest ai-chatbot -- --template react cd ai-chatbot npm install  மேம்பாட்டு சேவையகத்தைத் தொடங்கவும்:   npm run dev  உங்களுக்குப் பிடித்த குறியீடு எடிட்டரில் திட்டத்தைத் திறக்கவும்.  படி 2: எக்ஸ்பிரஸ் சர்வரை உருவாக்கவும்  அதே கோப்பகத்தில் புதிய Node.js திட்டத்தைத் தொடங்கவும்:   mkdir server && cd server npm init -y  தேவையான தொகுப்புகளை நிறுவவும்:   npm install express cors dotenv node-fetch  நேட்டிவ் இறக்குமதிகளைப் பயன்படுத்துவதற்கு வகை   பயன்படுத்த pack.json கோப்பைப் புதுப்பிக்கவும்: module   { "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "dotenv": "^16.4.7", "express": "^4.21.2", "node-fetch": "^3.3.2" } }    கோப்பகத்தில்   என்ற கோப்பை உருவாக்கி, பின்வரும் குறியீட்டைச் சேர்க்கவும்: server server.js   import 'dotenv/config' import express from 'express'; import cors from 'cors'; import fetch from 'node-fetch'; const app = express(); const PORT = 5000; app.use(cors()); app.use(express.json()); app.post('/generate', async (req, res) => { const { prompt } = req.body; if (!prompt) { return res.status(400).json({ error: 'Prompt is required' }); } try { const response = await fetch('https://api.cohere.ai/v1/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${process.env.COHERE_API_KEY}`, }, body: JSON.stringify({ model: 'command-xlarge-nightly', prompt: `User: ${prompt}\nBot:`, max_tokens: 100, }), }); const data = await response.json(); res.json(data.generations[0].text.trim()); } catch (error) { console.error('Error calling Cohere API:', error); res.status(500).json({ error: 'Failed to generate response' }); } }); app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });    கோப்பகத்தில்   கோப்பை உருவாக்கவும்: server .env   COHERE_API_KEY=your_cohere_api_key_here  சேவையகத்தைத் தொடங்கவும்:   node server.js    உங்கள்   கோப்பை ஒருபோதும் பகிர வேண்டாம் அல்லது பதிப்புக் கட்டுப்பாட்டில் வைக்க வேண்டாம். உங்கள்   கோப்பில்   சேர்க்கவும். முக்கியமானது: .env .gitignore .env  படி 3: சாட்போட் இடைமுகத்தை உருவாக்கவும்  பின்வரும் குறியீட்டைக் கொண்டு   கோப்பைப் புதுப்பிக்கவும்: App.jsx   import React, { useState } from 'react'; import './App.css'; const App = () => { const [messages, setMessages] = useState([]); const [userInput, setUserInput] = useState(''); const [loading, setLoading] = useState(false); const sendMessage = async () => { if (!userInput.trim()) return; const newMessages = [...messages, { sender: 'user', text: userInput }]; setMessages(newMessages); setUserInput(''); setLoading(true); try { const response = await fetch('http://localhost:5000/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: userInput }), }); const botReply = await response.text(); setMessages([...newMessages, { sender: 'bot', text: botReply }]); } catch (error) { console.error('Error fetching bot reply:', error); setMessages([ ...newMessages, { sender: 'bot', text: 'Sorry, something went wrong.' }, ]); } finally { setLoading(false); } }; return ( <div className="chat-container"> <div className="chatbox"> {messages.map((msg, index) => ( <div key={index} className={`message ${msg.sender}`}> {msg.text} </div> ))} {loading && <div className="message bot">Typing...</div>} </div> <div className="input-container"> <input type="text" value={userInput} onChange={(e) => setUserInput(e.target.value)} placeholder="Type your message..." /> <button onClick={sendMessage}>Send</button> </div> </div> ); }; export default App;  படி 4: ஸ்டைலிங் சேர்க்கவும்  சாட்போட் இடைமுகத்தை வடிவமைக்க   என்ற கோப்பை உருவாக்கவும்: App.css   code.chat-container { font-family: Arial, sans-serif; max-width: 500px; margin: 20px auto; } .chatbox { border: 1px solid #ccc; padding: 10px; height: 400px; overflow-y: auto; border-radius: 5px; margin-bottom: 10px; } .message { margin: 5px 0; padding: 10px; border-radius: 5px; } .message.user { background-color: #d1e7dd; text-align: right; } .message.bot { background-color: #f8d7da; text-align: left; } .input-container { display: flex; } input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px 0 0 5px; } button { padding: 10px; border: 1px solid #ccc; border-radius: 0 5px 5px 0; background-color: #007bff; color: white; cursor: pointer; }  படி 5: உங்கள் சாட்போட்டை சோதிக்கவும்  ரியாக்ட் பயன்பாட்டையும் சேவையகத்தையும் ஒரே நேரத்தில் இயக்கவும். நீங்கள் ஒரே நேரத்தில் பயன்படுத்தலாம் அல்லது இரண்டு டெர்மினல்களைத் திறக்கலாம்:  முனையம் 1:   npm run dev  டெர்மினல் 2 (   உள்ளே): server   node server.js  உங்கள் உலாவியில் எதிர்வினை பயன்பாட்டைத் திறக்கவும்.  ஒரு செய்தியைத் தட்டச்சு செய்து அனுப்பவும். கோரிக்கை உங்கள் எக்ஸ்பிரஸ் சேவையகத்திற்குச் செல்லும், அது பாதுகாப்பாக Cohere இன் API ஐ அழைத்து முடிவை வழங்கும்.   களஞ்சியம்  இந்த திட்டத்திற்கான முழுமையான மூலக் குறியீட்டை GitHub இல் காணலாம்:   . அதை குளோன் செய்து, குறியீட்டை ஆராய்ந்து, உங்கள் தேவைக்கேற்ப தனிப்பயனாக்கலாம்! AI Chatbot with React and Cohere  முடிவுரை    ,   ,   மற்றும்   பயன்படுத்தி AI-இயங்கும் சாட்போட்டை நீங்கள் உருவாக்கியுள்ளீர்கள். இந்தத் திட்டத்தைப் போன்ற அம்சங்களுடன் மேம்படுத்தலாம்: ரியாக்ட் வைட் கோஹேர் எக்ஸ்பிரஸ் ஆகியவற்றைப்  பேச்சு-க்கு-உரை மற்றும் உரை-க்கு-பேச்சு ஒருங்கிணைப்பு.  நிலையான உரையாடல்கள் தரவுத்தளத்தில் சேமிக்கப்படும்.  டெயில்விண்ட் போன்ற CSS கட்டமைப்பைப் பயன்படுத்தி மிகவும் மெருகூட்டப்பட்ட வடிவமைப்பு.  Heroku, AWS அல்லது Vercel போன்ற சேவைகளைப் பயன்படுத்தி சேவையகத்தைப் பயன்படுத்தவும்.  பரிசோதனை மற்றும் மகிழ்ச்சியான குறியீட்டைத் தொடங்குங்கள்!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Read My Stories

இந்த ஆடியோ கதையின் அசல் மொழியில் தயாரிக்கப்பட்டது!

மிக நீளமானது; வாசிப்பதற்கு

Make resilience your competitive advantage

இந்த வழிகாட்டி மூலம் உங்கள் காலை காபியை விட வேகமாக AI சாட்போட்டை உருவாக்குங்கள்

About Author

கருத்துகள்

ஹேங் டேக்குகள்

இந்த கட்டுரையில் வழங்கப்பட்டது

Related Stories

Meet Octopus Network: HackerNoon Company of the Week

Meet Augment Code: HackerNoon Company of the Week

Top 10 AD Copies That Programmers Loved on HackerNoon

Meet Fastex: HackerNoon Company of the Week

Meet Octopus Network: HackerNoon Company of the Week

Meet Augment Code: HackerNoon Company of the Week

Top 10 AD Copies That Programmers Loved on HackerNoon

Meet Fastex: HackerNoon Company of the Week

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps