Vercel AI SDK v5 ഉപയോഗിക്കുന്നതിലൂടെ React ഡെവലപ്പർമാർക്ക് Large-language-model (LLM) കോളുകൾ സെർവറിലേക്ക് മാറ്റാൻ സാധിക്കും. ഇത് API കീകൾ രഹസ്യമായി സൂക്ഷിക്കാനും ബ്രൗസറിൽ ടെക്സ്റ്റ് ചങ്ക്സ് സ്ട്രീം ചെയ്യുമ്പോൾ ഉണ്ടാകുന്ന ലേറ്റൻസി കുറയ്ക്കാനും സഹായിക്കുന്നു. പുതിയ transport-based architecture സ്റ്റേറ്റ് ഹാൻഡ്‌ലിംഗിനെ വേർതിരിക്കുന്നു, അതിനാൽ SDK സ്ട്രീമിംഗ്, ഹിസ്റ്ററി, ടൂൾ ഇൻവോക്കേഷനുകൾ എന്നിവ കൈകാര്യം ചെയ്യുമ്പോൾ UI കോഡ് ലളിതമായി നിലനിർത്താം.

പഴയ രീതി എന്തുകൊണ്ട് പരാജയപ്പെട്ടു

v5-ന് മുമ്പ് നിർമ്മിച്ച മിക്ക React ചാറ്റ്‌ബോട്ടുകളും മോഡലിന്റെ ഔട്ട്‌പുട്ട് നേരിട്ട് ക്ലയന്റിലേക്ക് സ്ട്രീം ചെയ്യുകയായിരുന്നു. ഇത് ഡെവലപ്പർമാരെ LLM-ന്റെ സീക്രട്ട് കീ ഫ്രണ്ട്-എൻഡ് കോഡിൽ ഉൾപ്പെടുത്താൻ നിർബന്ധിതരാക്കി, ഇത് ബ്രൗസറിലെ നെറ്റ്‌വർക്ക് ഇൻസ്പെക്ടറിൽ വെളിപ്പെടാൻ കാരണമായി. കൂടാതെ, ഓരോ ടോക്കൺ വരുമ്പോഴും useState ഉപയോഗിച്ച് ബഫർ ചെയ്യാൻ ടീമുകൾ ശ്രമിച്ചിരുന്നു, ഇത് ഓരോ ചെറിയ മാറ്റത്തിലും റീ-റെൻഡറിംഗിന് കാരണമായി. ഇതിനാൽ UI മിന്നൽ (flicker) ഉണ്ടാവുകയും കോഡ് സങ്കീർണ്ണമായി മാറുകയും ചെയ്തു.

ഫലം: ആർക്കും കീ മോഷ്ടിക്കാൻ സാധിക്കും, കൂടാതെ ഡെവലപ്പർമാർ ലോ-ലെവൽ സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് ജോലികളുമായി പൊരുതുന്നതിനിടയിൽ സംഭാഷണങ്ങളിൽ താമസം (lag) അനുഭവപ്പെട്ടു.

v5 ഉള്ളിൽ എന്താണ് മാറ്റുന്നത്

  • Transport-Based Architecture – SDK ഇപ്പോൾ LLM-മായുള്ള കണക്ഷനെ ഒരു മോഡുലാർ ട്രാൻസ്‌പോർട്ട് ലെയർ ആയി കണക്കാക്കുന്നു. കോളുകൾ സെർവറിലെ ഒരു API റൂട്ടിൽ നിന്നാണ് തുടങ്ങുന്നത്, അതിനാൽ സീക്രട്ട് കീ ഒരിക്കലും ബാക്കെൻഡിൽ നിന്ന് പുറത്തുപോകില്ല. ട്രാൻസ്‌പോർട്ട് സ്ട്രീമിംഗ് പ്രോട്ടോക്കളിനെ ലളിതമാക്കുകയും ഫ്രണ്ട് എൻഡിലേക്ക് വൃത്തിയുള്ളതും ടൈപ്പ് ചെയ്തതുമായ മെസ്സേജുകൾ എത്തിക്കുകയും ചെയ്യുന്നു.

  • Typed Tool Invocations – ഒരു മോഡൽ ഒരു ടൂൾ വിളിക്കാൻ തീരുമാനിക്കുമ്പോൾ (ഉദാഹരണത്തിന്, കാലാവസ്ഥ അറിയാനോ കലണ്ടർ പരിശോധിക്കാനോ), SDK ആ അഭ്യർത്ഥനയെ ഒരു ടൈപ്പ്ഡ് പേലോഡായി പാക്കേജ് ചെയ്യുന്നു. ഫ്രണ്ട് എൻഡിന് ഈ പേലോഡിന്റെ ഘടന നേരിട്ട് വായിക്കാൻ കഴിയുന്നതിനാൽ, അനാവശ്യമായ പാഴ്സിംഗും റൺടൈം എററുകളും ഒഴിവാക്കാം.

  • Decoupled State Management – useChat ഹുക്ക് ഇനി ഒരു പ്രത്യേക സ്റ്റേറ്റ് സ്റ്റോർ നിർബന്ധമാക്കുന്നില്ല. Zustand, Redux അല്ലെങ്കിൽ സാധാരണ React context പോലുള്ള ഏത് സ്റ്റേറ്റ് ലൈബ്രറിയും ഉപയോഗിക്കാൻ കഴിയുന്ന കോൾബാക്കുകളും യൂട്ടിലിറ്റികളും ഇത് നൽകുന്നു. SDK പ്രധാന ജോലികൾ ചെയ്യുമ്പോൾ UI കമ്പോണന്റുകൾ റെൻഡറിംഗിൽ മാത്രം ശ്രദ്ധ കേന്ദ്രീകരിക്കാം.

ഒരു പ്രായോഗിക വർക്ക്ഫ്ലോ

  1. Server-side LLM logic – ഒരു API റൂട്ടിൽ streamText (അല്ലെങ്കിൽ സമാനമായ സ്ട്രീമിംഗ് ഹെൽപ്പർ) വിളിക്കുക. SDK സുരക്ഷിതമായ ഒരു കണക്ഷൻ വഴി മോഡലിന്റെ ഔട്ട്‌പുട്ട് ക്ലയന്റിലേക്ക് സ്ട്രീം ചെയ്യുന്നു, ഇത് API കീ ബ്രൗസറിൽ നിന്ന് അകറ്റി നിർത്തുന്നു.
  2. Client-side UI – ഒരു React കമ്പോണന്റിൽ useChat ഇംപോർട്ട് ചെയ്യുക. നിലവിലെ മെസ്സേജ് ലിസ്റ്റ്, പുതിയ ഇൻപുട്ട് അയക്കാനുള്ള ഫംഗ്ഷൻ, സ്റ്റാറ്റസ് ഫ്ലാഗുകൾ എന്നിവ ഈ ഹുക്ക് നൽകുന്നു. സ്റ്റേറ്റ് മറ്റൊരിടത്തായതിനാൽ, നിങ്ങൾ നിലവിൽ ഉപയോഗിക്കുന്ന ഏത് സ്റ്റേറ്റ് മാനേജറും ഇതിലേക്ക് ഘടിപ്പിക്കാം.
  3. Tool handling – മോഡൽ ഒരു ടൂൾ കോൾ ചെയ്യുമ്പോൾ, SDK ഒരു സ്ട്രക്ചേർഡ് ഒബ്ജക്റ്റ് ക്ലയന്റിലേക്ക് എത്തിക്കുന്നു. മാനുവൽ സിങ്ക് കോഡുകൾ എഴുതാതെ തന്നെ ഒരു വെതർ വിഡ്ജറ്റോ, കലണ്ടർ പിക്കറോ അല്ലെങ്കിൽ മറ്റേതെങ്കിലും കസ്റ്റം UI എലമെന്റോ റെൻഡർ ചെയ്യാം.

ഇതിന്റെ ഫലം കൃത്യമായ വേർതിരിവാണ്: സെർവർ എല്ലാ LLM ഇന്ററാക്ഷനുകളും കൈകാര്യം ചെയ്യുന്നു, ക്ലയന്റ് പ്രസന്റേഷൻ മാത്രം നോക്കുന്നു. ഇനി റ കോ-സ്ട്രീം പാഴ്സിംഗോ, അബദ്ധത്തിൽ കീ ചോരുന്നതോ, ഓരോ ടോക്കണിലും UI മാറുന്നതോ ഉണ്ടാകില്ല.

ആർക്കൊക്കെ ഗുണമുണ്ടാകും, ആർക്കൊക്കെ മടിക്കാം

അടുത്തതായി ശ്രദ്ധിക്കേണ്ടവ

ചുരുക്കത്തിൽ

Vercel AI SDK v5, LLM കോളുകൾ സെർവറിലേക്ക് മാറ്റുന്നതിലൂടെയും, ടൈപ്പ്ഡ് ടൂൾ ഡാറ്റ നൽകുന്നതിലൂടെയും, ലോ-ലെവൽ സ്റ്റേറ്റ് മാനേജ്‌മെന്റിൽ നിന്ന് ഫ്രണ്ട് എൻഡിനെ മോചിപ്പിക്കുന്നതിലൂടെയും React ചാറ്റ്‌ബോട്ട് ഡെവലപ്‌മെന്റിനെ പുനർനിർമ്മിക്കുന്നു. സീക്രട്ട് കീകൾ വെളിപ്പെടുന്നതും UIയിലെ തകരാറുകളും പോലുള്ള രണ്ട് വലിയ പ്രശ്നങ്ങളെ ഇത് പരിഹരിക്കുന്നു, ഒപ്പം ഡെവലപ്പർമാർക്ക് അവരുടെ സ്റ്റേറ്റ് സ്റ്റാക്ക് നിയന്ത്രിക്കാനും അവസരം നൽകുന്നു.