ChatGPT API Wrapper Chatbot Mobile UI (React Native)

ChatGPT API wrapper वाला chatbot “mobile UI” बनाने का मतलब है: एक साफ़ chat screen जिसमें message list, user aur assistant bubbles, streaming जवाब aur एक हमेशा handy input bar हो, aur API key हमेशा backend पर रहे। एक ready template का सबसे तेज़ free रास्ता है VP0 से एक मिलता-जुलता native chat design चुनना और link copy करके Cursor ya Claude Code से code बनाना।

chatbot UI के core हिस्से

• message list: user aur assistant के bubbles साफ़ अलग, नई message पर auto-scroll नीचे।
• streaming text: assistant का जवाब token-by-token भरे, साथ एक typing/stop control।
• input bar: नीचे sticky, multi-line तक बढ़े, send button साफ़, keyboard खुलने पर न छिपे।
• states: loading, error, rate-limit aur empty (पहली बार) सब साफ़ हों।

Layout के लिए Apple Human Interface Guidelines देखिए, aur लंबी chat list को FlatList (inverted) से virtualize कीजिए ताकि scroll कभी न अटके।

API key कभी app में नहीं

यह सबसे ज़रूरी rule है: model की API key को कभी app में मत डालिए। app के bundle से key निकालना आसान है, aur leak होते ही कोई भी आपके बिल पर calls चला सकता है। सही तरीका है एक backend proxy: app आपके server से बात करे, server key के साथ OpenAI ya Anthropic को call करे aur जवाब stream करके वापस भेजे। keys aur tokens के लिए OWASP Mobile security follow कीजिए। streaming कैसे काम करती है, यह OpenAI streaming guide aur Anthropic streaming docs में साफ़ समझाया गया है।

core parts एक नज़र में

नीचे ऐसे chat UI के ज़रूरी हिस्से aur ध्यान देने लायक बात है।

हिस्सा	ध्यान देने लायक बात
Message list	user/assistant bubbles, auto-scroll
Streaming text	token-by-token, stop control
Input bar	sticky, multi-line, keyboard-safe
States	loading, error, rate-limit, empty

एक practical उदाहरण

मान लीजिए एक AI assistant app बनाना है। VP0 में एक chat design चुनिए, link copy करके Cursor से React Native code बनाइए: inverted FlatList में bubbles, नीचे sticky multi-line input bar, aur एक backend proxy endpoint जो tokens stream करे। assistant bubble में text धीरे-धीरे भरिए, एक stop button दीजिए, aur error/rate-limit पर साफ़ message + retry दिखाइए। पहली बार empty state में कुछ example prompts रखिए ताकि user को शुरू करना आसान लगे।

states साफ़ रखिए

apps की day-1 retention आम तौर पर सिर्फ़ 25% होती है, इसलिए एक भी टूटा state user को भगा देता है। loading पर एक हल्का typing indicator, error पर साफ़ message aur retry, rate-limit पर “थोड़ी देर में फिर कोशिश कीजिए”, aur empty पर example prompts रखिए। keyboard खुलने पर input bar aur आख़िरी message दोनों दिखें। user के खाली ya unsafe input को भी संभालिए: खाली message पर send button disable रखिए, aur unsafe content पर एक साफ़ safety message दिखाइए, ताकि app store review में भी दिक़्क़त न आए। prompt input का साफ़ pattern AI prompt input text bar UI (React Native) में, aur streaming text का तरीका LLM streaming text UI component में देखिए।

आम गलतियाँ

सबसे आम aur ख़तरनाक गलती है API key को app में रखना, उसे हमेशा backend पर रखिए। दूसरी गलती है streaming न करना, पूरा जवाब एक साथ दिखाने से app धीमा महसूस होता है। तीसरी गलती है keyboard खुलने पर input bar का छिप जाना, layout ऊपर खिसकाइए। चौथी गलती है error aur rate-limit states को भूल जाना, हर state साफ़ aur retry के साथ दिखाइए।

मुख्य बातें

• chatbot UI के core हैं message list, streaming bubbles, sticky input bar aur साफ़ states।
• सबसे ज़रूरी rule: API key कभी app में नहीं, हमेशा backend proxy से call कीजिए।
• streaming करिए (token-by-token + stop) ताकि जवाब तेज़ महसूस हो।
• apps की day-1 retention करीब 25% है; VP0 free design से chat UI शुरू कीजिए।

आगे पढ़िए: एक असली utility app में यही साफ़ states कैसे दिखें, देखिए electricity smart meter reading app UI।

अक्सर पूछे जाने वाले सवाल

ChatGPT API wrapper chatbot mobile UI free में कैसे बनाएँ?

VP0 से शुरू कीजिए। एक chat (message list + input bar) वाला native design चुनिए, link copy करके Cursor ya Claude Code से React Native code बनाइए, फिर streaming aur backend proxy जोड़िए। यह free aur native है, इसलिए पहला और सबसे अच्छा starting point है।

API key को कहाँ रखें?

कभी app में नहीं। key हमेशा अपने backend पर रखिए aur model API को एक backend proxy से call कीजिए। app सिर्फ़ आपके server से बात करे, सीधे OpenAI/Anthropic से नहीं, वरना key leak हो जाएगी।

chatbot UI में सबसे ज़रूरी क्या है?

एक साफ़ message list (user vs assistant bubbles), token-by-token streaming, एक sticky input bar, aur loading/error/rate-limit states। keyboard खुलने पर input न छिपे।

streaming जवाब कैसे दिखाएँ?

backend से tokens stream कीजिए aur assistant bubble में text धीरे-धीरे भरिए, साथ में एक typing/stop control। इससे जवाब तेज़ महसूस होता है aur user बीच में रोक सकता है।