𝗙𝗿𝗼𝗺 𝗣𝗿𝗼𝗺𝗽𝘁𝘀 𝘁𝗼 𝗔𝗜 𝗔𝗴𝗲𝗻𝘁𝘀: 𝗔 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿'𝘀 𝗚𝘂𝗶𝗱𝗲
फ्रंटएंड डेवलपर्स को केवल साधारण प्रॉम्प्ट्स तक सीमित नहीं रहना चाहिए।
यदि आप स्मार्ट यूजर इंटरफेस (UIs) बनाना चाहते हैं, तो आपको AI के पदानुक्रम (hierarchy) को समझने की आवश्यकता है।
- प्रॉम्प्ट्स: एक आउटपुट के साथ एक एकल निर्देश।
- चैटबॉट्स: मेमोरी वाले मॉडल जो बातचीत की अनुमति देते हैं।
- AI एजेंट्स: ऐसे सिस्टम जो टूल्स का उपयोग करते हैं, मल्टी-स्टेप प्लान का पालन करते हैं, और आपकी ओर से कार्य करते हैं।
एक एजेंट केवल बातचीत करने से कहीं अधिक करता है। यह डेटा प्राप्त कर सकता है, APIs को कॉल कर सकता है, और लक्ष्य तक पहुँचने के लिए निर्णय ले सकता है।
यह आपके काम के लिए क्यों महत्वपूर्ण है:
- यह डायनेमिक और कॉन्टेक्स्ट-अवेयर UIs बनाता है।
- यह यूजर सपोर्ट या डैशबोर्ड सेटअप जैसे दोहराव वाले कार्यों को ऑटोमेट करता है।
- यह डिज़ाइन टूल्स और वर्किंग कोड के बीच के अंतर को पाटता है।
बेहतर प्रॉम्प्ट कैसे लिखें: अस्पष्ट निर्देश लिखना बंद करें। प्रॉम्प्ट्स को तकनीकी विशिष्टताओं (technical specifications) की तरह मानें।
खराब प्रॉम्प्ट: Write a function to format a date.
अच्छा प्रॉम्प्ट: Write a TypeScript function that takes a JS Date and returns a string like "3 hours ago". Handle future dates by returning "just now". Use no external libraries.
फ्रंटएंड कार्यों के लिए इस चेकलिस्ट का उपयोग करें:
- भूमिका बताएं: "Reply with code only."
- एक उदाहरण दें: मॉडल को दिखाएं कि आपको किस तरह का सटीक आउटपुट चाहिए।
- स्टैक परिभाषित करें: "Use React and Tailwind. No CSS-in-JS."
- एज केस (edge cases) सूचीबद्ध करें: "Handle null values and empty arrays."
- निरंतरता का अनुरोध करें: "Use only documented APIs."
एजेंट वर्कफ़्लो कैसे बनाएं:
- एक मॉडल चुनें: सुरक्षित सर्वर-साइड फंक्शन्स के माध्यम से OpenAI या समान मॉडल का उपयोग करें।
- टूल्स परिभाषित करें: एजेंट को बताएं कि वह किन APIs या फंक्शन्स का उपयोग कर सकता है।
- वर्कफ़्लो सेट करें: सुनिश्चित करें कि एजेंट कॉन्टेक्स्ट को ट्रैक कर सके और चरणों की योजना बना सके।
- अपने UI से कनेक्ट करें: अपने फ्रंटएंड से एजेंट को कॉल करने के लिए एक API रूट का उपयोग करें।
सामान्य चुनौतियां:
- लेटेंसी (Latency): लोडिंग स्टेट्स या बैकग्राउंड टास्क का उपयोग करें ताकि UI रिस्पॉन्सिव बना रहे।
- हैलुसिनेशन (Hallucinations): हमेशा AI कंटेंट को लेबल करें और बड़े निर्णयों के लिए मानवीय निगरानी (human oversight) का उपयोग करें।
- कॉन्टेक्स्ट सीमाएं (Context limits): मॉडल को केंद्रित रखने के लिए पुराने संदेशों का सारांश (summarize) दें।
एक फ्रंटएंड डेवलपर की भूमिका बदल रही है। आप टेम्पलेट्स लिखने में कम और एजेंटों को निष्पादित करने के लिए लक्ष्य और बाधाएं (constraints) परिभाषित करने में अधिक समय बिताएंगे।
छोटी शुरुआत करें। एक दोहराव वाले कार्य या एक कंपोनेंट को ऑटोमेट करें। आज ही लॉजिक बनाना शुरू करें।
Source: https://dev.to/davekurian/from-prompts-to-ai-agents-a-frontend-developers-guide-to-mastery-2mlh