टैनस्टैक AI + गोंका - बहुत कम लागत पर टाइपस्क्रिप्ट पर AI-अनुप्रयोग

पैकेज इंस्टॉलेशन (कोर + OpenAI-एडेप्टर, जिसमें openaiCompatible मौजूद है):

# pnpm
pnpm add @tanstack/ai @tanstack/ai-openai

# npm
npm install @tanstack/ai @tanstack/ai-openai

React पर चैट-इंटरफेस के लिए क्लाइंट और हुक जोड़ें:

pnpm add @tanstack/ai-client @tanstack/ai-react

JoinGonka API-की: यदि आपके पास अभी तक नहीं है — gate.joingonka.ai/register पर रजिस्टर करें, 3M मुफ्त टोकन प्राप्त करें और Dashboard → API Keys में jg-xxx की (key) बनाएं। एक की (key) और एक बैलेंस OpenAI और Anthropic दोनों फॉर्मेट के लिए काम करते हैं।

TanStack AI में कस्टम OpenAI-संगत प्रोवाइडर को openaiCompatible() फ़ंक्शन से कॉन्फ़िगर किया जाता है: एक बार baseURL, apiKey और मॉडल्स की सूची सेट करें, फिर हर कॉल के लिए मॉडल चुनें। हमारा Gateway Chat Completions फ़ॉर्मैट में बात करता है, इसलिए api: 'chat-completions' रखते हैं (यह डिफ़ॉल्ट मान है)।

import { openaiCompatible } from '@tanstack/ai-openai'

// Gonka provider: configured once
export const gonka = openaiCompatible({
  name: 'gonka',
  baseURL: 'https://gate.joingonka.ai/v1',
  apiKey: process.env.GONKA_API_KEY!, // jg-your-key
  api: 'chat-completions',
  models: [
    'MiniMaxAI/MiniMax-M2.7', // default
    'deepseek-ai/DeepSeek-V4-Flash-0731',
    'zai-org/GLM-5.3-Flash', // reasoning model
  ],
})

सर्वर पर स्ट्रीमिंग चैट (जैसे किसी भी fullstack फ़्रेमवर्क या TanStack Start में route handler)। रिस्पॉन्स की लंबाई modelOptions से तय करें — नेटिव wire-पैरामीटर (max_tokens, temperature) का यही एकमात्र स्थान है:

import { chat, toServerSentEventsResponse } from '@tanstack/ai'
import { gonka } from './gonka'

export async function POST(request: Request) {
  const { messages } = await request.json()

  const stream = chat({
    adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
    messages,
    modelOptions: { max_tokens: 8192 }, // Gateway output cap
  })

  return toServerSentEventsResponse(stream)
}

React क्लाइंट useChat हुक के ज़रिए — सर्वर से रिस्पॉन्स को UI में स्ट्रीम करता है:

import { useChat } from '@tanstack/ai-react'

function Chat() {
  const { messages, sendMessage, status } = useChat({ api: '/api/chat' })

  return (
    <div>
      {messages.map((m) => (
        <p key={m.id}><b>{m.role}:</b> {m.content}</p>
      ))}
      <button onClick={() => sendMessage('What is Gonka?')}>
        Ask
      </button>
    </div>
  )
}

बिना सर्वर: वही प्रोवाइडर किसी स्क्रिप्ट या बैकएंड में सीधे काम करता है — chat() कॉल करें और स्ट्रीम पढ़ें। Gonka से कनेक्शन सभी विकल्पों के लिए एक जैसा है।

Gateway के ज़रिए मॉडल पैरामीटर: कॉन्टेक्स्ट — MiniMax M2.7 पर 180K टोकन, DeepSeek V4 Flash पर 380K और GLM-5.3 Flash पर 390K। max_tokens की सीमा — MiniMax M2.7 और GLM-5.3 Flash पर 8192, DeepSeek V4 Flash पर 32768। अगर max_tokens निर्दिष्ट नहीं है, तो non-stream के लिए डिफ़ॉल्ट 1500 है, इसलिए लंबे रिस्पॉन्स के लिए इसे स्पष्ट रूप से सेट करें।

TanStack AI OpenAI/Anthropic की सीधी दरों और Gonka दोनों के माध्यम से समान रूप से काम करता है — केवल baseURL बदलता है। लेकिन कीमत में बहुत बड़ा अंतर है। TanStack AI पर प्रोडक्शन-एप्लीकेशन के विशिष्ट लोड की तुलना करें:

TanStack AI का Provider-agnostic दृष्टिकोण का मतलब है कि Gonka पर स्विच करना केवल एक लाइन (baseURL) बदलना है, कोड को फिर से लिखना नहीं। आपके टाइप-सेफ टूल्स, स्ट्रक्चर्ड आउटपुट और React-हुक्स बिना किसी बदलाव के काम करते हैं। हजारों यूजर्स वाली एप्लीकेशन के लिए यह अंतर महीने में हजारों डॉलर का है।

Gonka की कीमत: इनपुट ~$0.0062 प्रति 1M टोकन, आउटपुट ×3। यह OpenAI और Anthropic की सीधी दरों से सैकड़ों-हजारों गुना सस्ता है।

TanStack AI की मुख्य खासियत है एक समान कॉन्ट्रैक्ट toolDefinition(): टूल को एक बार डिफ़ाइन करें (इनपुट/आउटपुट Zod, ArkType, Valibot या JSON Schema के ज़रिए), और implementation को सर्वर या क्लाइंट पर अटैच करें। MiniMax M2.7, DeepSeek V4 Flash और GLM-5.3 Flash, Gonka के ज़रिए नेटिव tool calling सपोर्ट करते हैं, इसलिए एजेंट भरोसेमंद तरीके से काम करते हैं — बिना टेक्स्ट रिस्पॉन्स पार्स किए।

import { chat, toolDefinition } from '@tanstack/ai'
import { gonka } from './gonka'
import { z } from 'zod'

const getWeather = toolDefinition({
  name: 'getWeather',
  description: 'Get the weather in a city',
  inputSchema: z.object({ city: z.string() }),
  outputSchema: z.object({ tempC: z.number() }),
}).server(async ({ city }) => {
  return { tempC: 21 } // your real API call
})

const stream = chat({
  adapter: gonka('MiniMaxAI/MiniMax-M2.7'),
  messages: [{ role: 'user', content: 'What is the weather in Moscow?' }],
  tools: [getWeather],
  modelOptions: { max_tokens: 8192 },
})

कौन-सा मॉडल चुनें:

• MiniMaxAI/MiniMax-M2.7 — डिफ़ॉल्ट, स्पीड और क्वालिटी का संतुलन, लंबा कॉन्टेक्स्ट। रिस्पॉन्स की सीमा 8192।
• deepseek-ai/DeepSeek-V4-Flash-0731 — नेटवर्क के सबसे लंबे कॉन्टेक्स्ट में से एक (380K), सस्ते बड़े प्रॉम्प्ट। रिस्पॉन्स की सीमा 32768।
• zai-org/GLM-5.3-Flash — reasoning मॉडल: जवाब देने से पहले सोचता है, जटिल लॉजिक में मज़बूत; नेटवर्क का सबसे लंबा कॉन्टेक्स्ट (390K)। रिस्पॉन्स की सीमा 8192; reasoning max_tokens का एक हिस्सा खर्च करता है।

TanStack AI में runtime adapter switching की बदौलत आप तीनों मॉडल एक ही प्रोवाइडर में रख सकते हैं और तुरंत उनके बीच स्विच कर सकते हैं — जैसे reasoning वाले काम GLM-5.3 Flash पर, तेज़ जवाब MiniMax पर।