Vercel AI SDK v5 React developers ਨੂੰ large-language-model (LLM) calls ਨੂੰ server 'ਤੇ shift ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਸ ਨਾਲ API keys ਲੁਕੀਆਂ ਰਹਿੰਦੀਆਂ ਹਨ ਅਤੇ browser ਵਿੱਚ text chunks stream ਕਰਨ ਤੋਂ ਹੋਣ ਵਾਲੀ latency ਘਟ ਜਾਂਦੀ ਹੈ। ਨਵਾਂ transport-based architecture state handling ਨੂੰ ਵੀ ਵੱਖ ਕਰਦਾ ਹੈ, ਤਾਂ ਜੋ UI code ਹਲਕਾ ਰਹੇ ਜਦੋਂ ਕਿ SDK streaming, history ਅਤੇ tool invocations ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।

ਪੁਰਾਣਾ ਤਰੀਕਾ ਮਾਡਲ ਨੂੰ ਕਿਉਂ ਖਰਾਬ ਕਰਦਾ ਸੀ

v5 ਤੋਂ ਪਹਿਲਾਂ ਬਣਾਏ ਗਏ ਜ਼ਿਆਦਾਤਰ React chatbots ਮਾਡਲ ਦੇ output ਨੂੰ ਸਿੱਧਾ client ਨੂੰ stream ਕਰਦੇ ਸਨ। ਇਸ ਨਾਲ developers ਨੂੰ LLM ਦੀ secret key ਨੂੰ front-end code ਵਿੱਚ ਇਨਬੈਡ ਕਰਨ ਲਈ ਮਜਬੂਰ ਹੋਣਾ ਪੈਂਦਾ ਸੀ, ਜਿਸ ਨਾਲ ਇਹ browser ਦੇ network inspector ਵਿੱਚ ਉੱਪਰ ਆ ਜਾਂਦੀ ਸੀ। Teams ਹਰ ਆਉਣ ਵਾਲੇ token ਨੂੰ buffer ਕਰਨ ਲਈ useState ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਸਨ, ਜਿਸ ਨਾਲ ਹਰ ਛੋਟੇ chunk 'ਤੇ re-render ਹੁੰਦਾ ਸੀ। UI ਫਲਿੱਕਰ (flicker) ਕਰਦਾ ਸੀ ਅਤੇ code callbacks ਦਾ ਇੱਕ ਉਲਝਿਆ ਹੋਇਆ ਮੇਲ ਬਣ ਜਾਂਦਾ ਸੀ।

ਨਤੀਜਾ: ਕੋਈ ਵੀ key ਚੋਰੀ ਕਰ ਸਕਦਾ ਸੀ, ਅਤੇ developers ਜਦੋਂ low-level state plumbing ਨਾਲ ਜੂਝ ਰਹੇ ਹੁੰਦੇ ਸਨ ਤਾਂ conversation ਵਿੱਚ ਦੇਰੀ (lag) ਆ ਜਾਂਦੀ ਸੀ।

v5 ਅੰਦਰੂਨੀ ਤੌਰ 'ਤੇ ਕੀ ਬਦਲਦਾ ਹੈ

  • Transport-Based Architecture – SDK ਹੁਣ LLM ਨਾਲ ਕਨੈਕਸ਼ਨ ਨੂੰ ਇੱਕ modular transport layer ਵਜੋਂ ਮੰਨਦਾ ਹੈ। Calls server 'ਤੇ ਇੱਕ API route ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ secret key ਕਦੇ ਵੀ backend ਤੋਂ ਬਾਹਰ ਨਹੀਂ ਜਾਂਦੀ। Transport streaming protocol ਨੂੰ abstract ਕਰਦਾ ਹੈ, ਜੋ front end ਨੂੰ messages ਦੀ ਇੱਕ ਸਾਫ਼, typed stream ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

  • Typed Tool Invocations – ਜਦੋਂ ਕੋਈ ਮਾਡਲ ਕਿਸੇ tool ਨੂੰ ਕਾਲ ਕਰਨ ਦਾ ਫੈਸਲਾ ਕਰਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ weather lookup ਜਾਂ calendar fetch), ਤਾਂ SDK ਉਸ request ਨੂੰ ਇੱਕ typed payload ਵਿੱਚ ਪੈਕੇਜ ਕਰਦਾ ਹੈ। Front end ਸਿੱਧਾ payload ਦੇ shape ਨੂੰ ਪੜ੍ਹ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ad-hoc parsing ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ runtime errors ਘਟ ਜਾਂਦੇ ਹਨ।

  • Decoupled State Management – useChat hook ਹੁਣ ਕਿਸੇ ਇੱਕ state store ਲਈ ਮਜਬੂਰ ਨਹੀਂ ਕਰਦਾ। ਇਹ callbacks ਅਤੇ utilities ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਸ ਨੂੰ ਕੋਈ ਵੀ state library—Zustand, Redux, ਜਾਂ plain React context—ਵਰਤ ਸਕਦੀ ਹੈ। UI components rendering 'ਤੇ ਕੇਂਦਰਿਤ ਰਹਿੰਦੇ ਹਨ ਜਦੋਂ ਕਿ SDK ਭਾਰੀ ਕੰਮ (heavy lifting) ਕਰਦਾ ਹੈ।

ਇੱਕ ਪ੍ਰੈਕਟੀਕਲ workflow

  1. Server-side LLM logic – ਇੱਕ API route ਵਿੱਚ, streamText (ਜਾਂ equivalent streaming helper) ਨੂੰ ਕਾਲ ਕਰੋ। SDK ਇੱਕ ਸੁਰੱਖਿਅਤ ਕਨੈਕਸ਼ਨ ਰਾਹੀਂ ਮਾਡਲ ਦੇ output ਨੂੰ client ਨੂੰ ਵਾਪਸ stream ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ API key browser ਤੋਂ ਦੂਰ ਰਹਿੰਦੀ ਹੈ।
  2. Client-side UI – React component ਵਿੱਚ useChat ਨੂੰ import ਕਰੋ। Hook ਮੌਜੂਦਾ message list, ਨਵਾਂ user input ਭੇਜਣ ਲਈ ਇੱਕ function, ਅਤੇ status flags ਵਾਪਸ ਕਰਦਾ ਹੈ। ਕਿਉਂਕਿ state ਕਿਤੇ ਹੋਰ ਰਹਿੰਦੀ ਹੈ, ਤੁਸੀਂ ਕਿਸੇ ਵੀ state manager ਨੂੰ ਜੋ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਵਰਤ ਰਹੇ ਹੋ, ਲਗਾ ਸਕਦੇ ਹੋ।
  3. Tool handling – ਜਦੋਂ ਮਾਡਲ tool call ਜਾਰੀ ਕਰਦਾ ਹੈ, ਤਾਂ SDK client ਨੂੰ ਇੱਕ structured object ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਮੈਨੂਅਲ sync code ਲਿਖੇ ਬਿਨਾਂ weather widget, calendar picker, ਜਾਂ ਕੋਈ ਵੀ custom UI element render ਕਰੋ।

ਨਤੀਜਾ ਇੱਕ ਸਾਫ਼ ਵੱਖਰਾਅ ਹੈ: server ਸਾਰੇ LLM interactions ਦਾ ਮਾਲਕ ਹੈ, ਅਤੇ client ਸਿਰਫ਼ presentation ਦਾ ਮਾਲਕ ਹੈ। ਹੁਣ ਕੋਈ raw-stream parsing ਨਹੀਂ, ਕੋਈ ਗਲਤੀ ਨਾਲ key leak ਨਹੀਂ, ਅਤੇ ਹਰ token re-renders ਤੋਂ ਹੋਣ ਵਾਲਾ UI jitter ਵੀ ਨਹੀਂ।

ਕਿਸ ਨੂੰ ਫਾਇਦਾ ਹੋਵੇਗਾ, ਅਤੇ ਕੌਣ ਝਿਜਕ ਸਕਦਾ ਹੈ

ਅੱਗੇ ਕੀ ਦੇਖਣਾ ਹੈ

ਨਿਚੋੜ

Vercel AI SDK v5 LLM calls ਨੂੰ server 'ਤੇ ਲਿਜਾ ਕੇ, typed tool data ਪ੍ਰਦਾਨ ਕਰਕੇ, ਅਤੇ front end ਨੂੰ low-level state juggling ਤੋਂ ਮੁਕਤ ਕਰਕੇ React chatbot development ਨੂੰ ਨਵਾਂ ਰੂਪ ਦਿੰਦਾ ਹੈ। ਇਹ ਤਬਦੀਲੀ ਦੋ ਸਭ ਤੋਂ ਵੱਡੀਆਂ ਮੁਸ਼ਕਲਾਂ—exposed secrets ਅਤੇ jittery UI—ਨਿਵਾਰਨ ਕਰਦੀ ਹੈ, ਜਦੋਂ ਕਿ developers ਨੂੰ ਆਪਣੇ state stack 'ਤੇ ਕੰਟਰੋਲ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ।