Vercel AI SDK اور Shadcn/ui کا استعمال کرتے ہوئے AI چیٹ ایپ انٹرفیس کیسے بنایا جائے۔

ہر دوسری AI پروڈکٹ جسے آپ آج کھولتے ہیں ایک ہی اسکرین ہے: پیغامات کی فہرست، نیچے ایک ٹیکسٹ باکس، اور ایک وقت میں ایک ہی ٹوکن میں چلنے والے الفاظ۔ یہ آسان لگ سکتا ہے، لیکن اسے اچھی طرح سے بنانا آسان نہیں ہے.

انٹرفیس کی رسائی اور رفتار کو برقرار رکھتے ہوئے اسٹریمنگ کی حالت، جزوی ٹوکن، ٹول کالز، دوبارہ کوششیں، مارک ڈاؤن رینڈرنگ، اسکرول پوزیشن، اور درجن بھر دیگر چھوٹی UX تفصیلات کا انتظام کرنا ضروری ہے۔ اگر آپ غلط ٹولز استعمال کرتے ہیں، تو آپ اصل پروڈکٹ بنانے کے بجائے ریاستی کیڑوں سے لڑنے میں زیادہ وقت صرف کریں گے۔

اس ٹیوٹوریل میں، ہم دو ٹولز کا استعمال کرتے ہوئے ایک حقیقی AI چیٹ انٹرفیس بناتے ہیں جو بنیادی طور پر ایک دوسرے کے لیے بنائے گئے ہیں: Vercel AI SDK اسٹریمنگ اور ماڈل لاجک کے لیے اور shadcn/ui خود انٹرفیس کے لیے۔

آخر میں، آپ کے پاس ایک ورکنگ چیٹ اسکرین ہوگی جو جوابات کو اسٹریم کرتی ہے، مارک ڈاؤن کو رینڈر کرتی ہے، اور اس پروڈکٹ کی طرح لگتا ہے جسے آپ واقعی بھیجنے جارہے ہیں۔

ہم یہ بھی دیکھیں گے کہ آپ چیزوں کے UI پہلو کو مزید تیز کرنے کے لیے کس طرح MCP سرور استعمال کر سکتے ہیں، اور اگر آپ سیٹ اپ کو مکمل طور پر چھوڑنا چاہتے ہیں تو آپ پروڈکشن کے لیے تیار چیٹ ٹیمپلیٹس کہاں سے حاصل کر سکتے ہیں۔

انڈیکس

شرائط

آپ کو ضرورت ہو گی:

• Node.js 18+

• React اور Next.js کا بنیادی علم، خاص طور پر ایپ راؤٹر۔

• آپ کے LLM فراہم کنندہ سے API کلید، جیسے OpenAI، Anthropic، یا Google۔ اس پر مزید بعد میں۔

کیا تعمیر کرنا ہے

ہم استعمال کرتے ہوئے ایک Next.js چیٹ ایپ بنائیں گے:

• LLM فراہم کنندہ کے ساتھ بات چیت کرنے کے لیے اسٹریمنگ API کا راستہ

• کلائنٹ سائیڈ چیٹ انٹرفیس کے ساتھ بنایا گیا ہے۔ useChat

• پیغام کے غبارے، خود بخود بڑھنے والے ان پٹ، سکرول ایبل ڈائیلاگ وغیرہ سبھی shadcn/ui اجزاء کے ساتھ اسٹائل کیے گئے ہیں۔

• ایک سادہ ٹول کال کے ساتھ، آپ کا ماڈل صرف بات کرنے سے زیادہ کام کر سکتا ہے۔

• یہ ایک فال بیک حالت ہے جو API کلید کو شامل کرنے سے پہلے بھی کام کرتی ہے، لہذا آپ پہلے UI بنا سکتے ہیں اور بعد میں ماڈلز کو جوڑ سکتے ہیں۔

آئیے ایک خالی فولڈر سے شروع کریں اور ایک ایسا فولڈر بنائیں جو آپ کے ساتھیوں کو دکھانا آسان ہو۔

مرحلہ 1: Next.js ایپ کو سکیفولڈ کریں۔

TypeScript اور Tailwind فعال کے ساتھ ایک نیا Next.js پروجیکٹ بنائیں۔

npx create-next-app@latest ai-chat-app --typescript --tailwind --eslint --app
cd ai-chat-app

CLI کی درخواستوں کے علاوہ ہر چیز کے لیے ڈیفالٹس چھوڑ دیں۔ آپ تقریباً مکمل طور پر اندرونی طور پر کام کر رہے ہوں گے۔ app ڈائریکٹری

مرحلہ 2: Vercel AI SDK انسٹال کریں۔

کہ Vercel AI SDK یہاں کیا بوجھ ہے؟ یہ مختلف ماڈل فراہم کنندگان کو کال کرنے، ٹیکسٹ اور سٹرکچرڈ ڈیٹا کو چلانے، اور ٹول کالز کو ہینڈل کرنے کے لیے ایک API فراہم کرتا ہے، لہذا جب بھی آپ ماڈلز کو تبدیل کرتے ہیں تو آپ کو اپنی چیٹ منطق کو دوبارہ لکھنے کی ضرورت نہیں ہے۔

بنیادی پیکجز، ری ایکٹ بائنڈنگز، اور OpenAI ہم آہنگ فراہم کنندگان کو انسٹال کریں۔

npm install ai @ai-sdk/react @ai-sdk/openai-compatible

@ai-sdk/openai-compatible یہ خاص طور پر قابل ذکر ہے۔ ہر فراہم کنندہ کے لیے علیحدہ پیکجز انسٹال کرنے کے بجائے، آپ کسی بھی فراہم کنندہ کی طرف اشارہ کر سکتے ہیں جو OpenAI طرز کا API استعمال کرتا ہے (OpenAI خود، Gemini، Groq، اور مختلف سیلف ہوسٹڈ سیٹ اپس) کو صرف بیس URLs کا تبادلہ کر کے۔ کے ساتھ مل کر AI_PROVIDER ماحولیاتی متغیرات کا استعمال کرتے ہوئے آپ روٹ ہینڈلر کو چھوئے بغیر فراہم کنندہ سوئچنگ حاصل کر سکتے ہیں۔ یہ وہ نمونہ ہے جسے ہم اگلے مرحلے میں بنائیں گے۔

مرحلہ 3: کیوں shadcn/ui AI چیٹ UI کے ساتھ اچھا کام کرتا ہے۔

کوئی بھی UI کوڈ لکھنے سے پہلے، یہ سمجھنا اچھا خیال ہے کہ AI چیٹ کی بہت ساری مصنوعات روایتی اجزاء کی لائبریریوں کے بجائے shadcn/ui پر کیوں انحصار کرتی ہیں۔

زیادہ تر اجزاء کی لائبریریاں مرتب شدہ پیکجز فراہم کرتی ہیں اور اپنے اندرونی حصوں کو پرپس کے پیچھے چھپا دیتی ہیں۔ یہ ترتیبات کے صفحہ پر ٹھیک کام کرتا ہے، لیکن چیٹ انٹرفیس میں ٹھیک سے کام نہیں کرتا ہے۔ چیٹ کے لیے، آپ کو یہ کنٹرول کرنے کی ضرورت ہے کہ کس طرح پیغام کے بلبلوں کو سٹریمنگ کے دوران متحرک کیا جاتا ہے، کس طرح "سوچ” اشارے کام کرتے ہیں، یا ٹول کالز کو سادہ متن سے مختلف طریقے سے کیسے پیش کیا جاتا ہے۔

shadcn/ui ایک مختلف طریقہ اختیار کرتا ہے۔ اس کا مطلب یہ ہے کہ پیکیج کو انسٹال کرنے کے بجائے، آپ اپنے پروجیکٹ میں جز کے اصل سورس کوڈ کو کاپی کرتے ہیں۔ آپ اپنے استعمال کے معاملے میں فٹ ہونے کے لیے تجریدوں سے لڑے بغیر اور دیکھ بھال کرنے والے کا انتظار کیے بغیر اس کو مکمل طور پر اپنے پاس رکھ سکتے ہیں جس کی آپ کو ضرورت ہے۔ چونکہ تقریباً کوئی بھی دو AI پروڈکٹس ایک ہی طرح سے پیغامات، قیاسات، یا ٹول آؤٹ پٹ پیش نہیں کرتے ہیں، اس لیے ملکیت کا یہ ماڈل بالکل وہی ہے جس کی چیٹ انٹرفیس کو ضرورت ہے۔

یہی وجہ ہے کہ ایک پورا ماحولیاتی نظام اس کے ارد گرد پروان چڑھا ہے۔ اگر آپ بنیادی رجسٹری سے آگے پروڈکشن کے لیے تیار بلاکس اور ٹیمپلیٹس کا زیادہ وسیع سیٹ چاہتے ہیں، بشمول ڈیش بورڈ، مارکیٹنگ سیکشن، اور مکمل چیٹ UI۔ shadcn/ui Shadcn Space کا کمیونٹی ہب بک مارکنگ کے قابل ہے۔ ہم اس ٹیوٹوریل میں بعد میں اس پر واپس آئیں گے۔

مرحلہ 4: اپنے پروجیکٹ میں shadcn/ui سیٹ اپ کریں۔

چونکہ آپ کے پاس پہلے سے ہی ایک Next.js پروجیکٹ ہے مرحلہ 1 سے، Shadcn Space preset براہ راست اس پروجیکٹ پر لاگو کریں۔

npx shadcn@latest apply --preset b0

یہ ترتیب components.jsonٹیل ونڈ کنفیگریشن اور lib/utils.ts موجودہ پروجیکٹ کے اندر۔ وہاں سے ہم چیٹ اسکرین کے لیے ضروری اجزاء درآمد کریں گے۔

npx shadcn@latest add button input textarea scroll-area avatar separator

ہر ایک add کال اصل جزو کا ذریعہ واپس کرتی ہے جسے پڑھا جا سکتا ہے۔ components/ui/آپ انہیں اپنے پروجیکٹ کی کسی بھی دوسری فائل کی طرح درآمد اور ترمیم کر سکتے ہیں، بغیر مرتب کردہ پیکیج کے، جس کا ہم بعد میں احاطہ کریں گے۔

اگر آپ پیغام کی فہرستوں اور مصنفین کو انفرادی پرائمیٹوز میں جوڑنا نہیں چاہتے ہیں تو Shadcn Space کے پاس بھی ایک ریڈی میڈ ہے۔ AI چیٹ بلاک آپ اپنا اپنا شامل کر سکتے ہیں:

npx shadcn@latest add @shadcn-space/ai-chat-01

npx shadcn@latest add @shadcn-space/ai-chat-03

ai-chat-01 یہ ایک مکالماتی انٹرفیس فراہم کرتا ہے جس میں ایک ویلکم اسکرین، تجویز کے اشارے، سکرول کے قابل میسج تھریڈز، منسلکات کے ساتھ ایک کمپوزر، اور ایک ماڈل سلیکٹر شامل ہوتا ہے۔

اے آئی چیٹ 01 کا لائیو پیش نظارہ:

ai-chat-03 یہ ایک پردیی ایپلی کیشن شیل فراہم کرتا ہے جس میں ٹوٹنے والی سائڈبار، پن کی گئی حالیہ چیٹس، تلاش اور ایک ٹاپ بار ہے۔

اے آئی چیٹ 03 لائیو پیش نظارہ:

آپ یا تو بلاک کو الگ سے انسٹال کر سکتے ہیں، یا دونوں کو اگر آپ ایک مکمل چیٹ لے آؤٹ چاہتے ہیں تو شروع سے ہی ارد گرد کے انٹرفیس کو بنائے بغیر۔

دونوں بلاکس پریمیم ہیں۔ معیاری shadcn اگر آپ اپنے چیٹ انٹرفیس کے لیے مفت سائڈبار چاہتے ہیں۔ sidebar-07 بلاکس ایک ہلکا پھلکا، لاگت سے پاک متبادل ہیں۔

npx shadcn@latest add sidebar-07

مرحلہ 5: اسٹریمنگ API روٹ بنائیں

بنانا app/api/chat/route.ts. یہ سرور سائیڈ والا حصہ ماڈل سے بات کرتا ہے اور جواب کو براؤزر پر واپس بھیجتا ہے۔

// app/api/chat/route.ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
import { convertToModelMessages, streamText, type UIMessage } from "ai";

const PROVIDERS: Record = {
  openai: {
    baseURL: "https://api.openai.com/v1",
    model: "gpt-4o-mini",
  },
  gemini: {
    baseURL: "https://generativelanguage.googleapis.com/v1beta/openai",
    model: "gemini-2.5-flash",
  },
  groq: {
    baseURL: "https://api.groq.com/openai/v1",
    model: "llama-3.3-70b-versatile",
  },
};

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const providerName =
    process.env.AI_PROVIDER?.trim().toLowerCase() ?? "openai";

  const { baseURL, model } =
    PROVIDERS[providerName] ?? PROVIDERS.openai;

  const provider = createOpenAICompatible({
    name: providerName,
    baseURL: process.env.AI_BASE_URL ?? baseURL,
    apiKey: process.env.AI_API_KEY,
  });

  const result = streamText({
    model: provider(process.env.AI_MODEL ?? model),
    system: "You are a concise, helpful assistant.",
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

چند باتیں قابل ذکر ہیں:

• createOpenAICompatible ایک فراہم کنندہ مثال فراہم کرتا ہے جو تمام OpenAI طرز APIs کے لیے کام کرتا ہے۔ تبادلہ AI_PROVIDER کے درمیان openai، geminiیا groq روٹ ہینڈلر بالکل تبدیل نہیں ہوتا ہے۔

• convertToModelMessages کلائنٹ کے ذریعے بھیجے گئے UI پیغام کے فارمیٹ کو ماڈل فراہم کنندہ کے متوقع فارمیٹ کے ساتھ منسلک کرتا ہے۔

• streamText یہ ایک ماڈل بنانا شروع کرتا ہے اور ایک سلسلہ واپس کرتا ہے جسے براہ راست کلائنٹ تک پہنچایا جا سکتا ہے۔

• toUIMessageStreamResponse() اس سلسلے کو جواب میں لپیٹیں۔ useChat کلائنٹ کا ہک جانتا ہے کہ ٹوکن ٹوکن ٹوکن کو کس طرح استعمال کرنا ہے۔

سیٹ اپ کریں اور اپنا فراہم کنندہ درج کریں۔ .env:

# .env
AI_PROVIDER=openai
AI_API_KEY=

آپ UI بنا سکتے ہیں چاہے آپ کے پاس ابھی کلید نہ ہو۔ جب تک آپ اصل فراہم کنندہ سے رابطہ قائم کرنے کے لیے تیار نہ ہو جائیں اس راستے کو ڈبہ بند سٹریمنگ کا جواب واپس کرنے دیں۔ نیچے دیئے گئے کلائنٹ کوڈ کو اس بات کی پرواہ نہیں ہے کہ سلسلہ کہاں سے آتا ہے۔

مرحلہ 6: UseChat کا استعمال کرتے ہوئے کلائنٹ کو جوڑیں۔

آئیے اب چیٹ انٹرفیس بناتے ہیں۔ بنانا components/chat.tsx فائل:

// components/chat.tsx
"use client";

import { useState } from "react";
import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { cn } from "@/lib/utils";

export function Chat() {
  const [input, setInput] = useState("");

  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
  });

  const isLoading =
    status === "submitted" || status === "streaming";

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!input.trim()) return;

    sendMessage({ text: input });
    setInput("");
  };

  return (
    

      
        

          {messages.map((message) => (
            

              {message.role !== "user" && (
                
                  AI
                
              )}

              

                {message.parts.map((part, i) =>
                  part.type === "text" ? (
                    {part.text}
                  ) : null
                )}
              
            
          ))}
        
      

      

        

           setInput(e.target.value)}
            placeholder="Message the assistant..."
            className="min-h-11 flex-1 resize-none"
            disabled={isLoading}
          />

          <button type="submit" disabled="{isLoading">
            Send
          </button>
        
      
    
  );
}

اتر جاؤ ~ میں app/page.tsx اور چلائیں npm run dev. اب آپ کے پاس ایک ورکنگ اسٹریمنگ چیٹ انٹرفیس ہے۔ ماڈل کی طرف سے بھیجے گئے تمام پیغامات ایک ہی بار کے بجائے لفظ بہ لفظ ظاہر ہوتے ہیں۔ status جواب جاری ہونے کے دوران ان پٹ کو غیر فعال کرنے کا ایک صاف طریقہ فراہم کرتا ہے۔

توجہ فرمائیں useChat ہم یہاں بہت خاموشی سے کام کرتے ہیں۔ یہ میسج لسٹ کا مالک ہے، ٹکڑوں کے آتے ہی اسٹریمنگ کو دوبارہ جوڑتا ہے، اور جمع کرانے، اسٹریمنگ، اور اسٹیجنگ لائف سائیکل کا انتظام کرتا ہے تاکہ آپ کو خود اسے ٹریک کرنے کی ضرورت نہ ہو۔

لائیو پیش نظارہ:

چیٹ ونڈو، جو صرف بولنے کی اجازت دیتی ہے، کی حدود ہیں۔ AI SDK آپ کے ماڈل کو JSON اسکیما کا استعمال کرتے ہوئے آپ کے کوڈ سے اصل فنکشن کو کال کرنے کی اجازت دیتا ہے جو ان پٹس کی وضاحت کرتا ہے جو اسے بھیجنے کی اجازت ہے۔

اسے مرحلہ 5 میں فراہم کنندہ کی ترتیبات کے بالکل ساتھ اپنے روٹ ہینڈلر میں شامل کریں۔

// app/api/chat/route.ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
import {
  convertToModelMessages,
  jsonSchema,
  streamText,
  tool,
  type UIMessage,
} from "ai";

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const provider = createOpenAICompatible({
    name: "openai",
    baseURL: "https://api.openai.com/v1",
    apiKey: process.env.AI_API_KEY,
  });

  const result = streamText({
    model: provider("gpt-4o-mini"),
    messages: convertToModelMessages(messages),

    tools: {
      getWeather: tool({
        description: "Get the current weather for a city",

        inputSchema: jsonSchema<{ city: string }>({
          type: "object",

          properties: {
            city: {
              type: "string",
              description: "The city to get the weather for",
            },
          },

          required: ["city"],
        }),

        execute: async ({ city }) => {
          // Call a real weather API here in production
          return {
            city,
            temperature: 22,
            condition: "clear",
          };
        },
      }),
    },
  });

  return result.toUIMessageStreamResponse();
}

ماڈل فیصلہ کرتا ہے کہ اسے کب کال کرنا ہے۔ getWeatherSDK کال کرنے کا راستہ بتاتا ہے: execute آپ ایک فنکشن چلاتے ہیں اور نتائج کو پیغام کے حصے کے طور پر بات چیت میں واپس بھیج دیا جاتا ہے۔ کلائنٹ کو معائنہ کے علاوہ کسی اضافی پلمبنگ کی ضرورت نہیں ہے۔ part.type اگر آپ ٹول کے پرزوں کو باقاعدہ متن سے مختلف انداز میں پیش کرنا چاہتے ہیں۔

مرحلہ 8: بیک اینڈ کے بغیر UI پروٹو ٹائپ بنائیں

جن مسائل کا آپ کو مسلسل سامنا کرنا پڑے گا وہ یہ ہیں: بیک اینڈ یا API کلید تیار ہونے سے پہلے، میں چیٹ UI کو چمکانا چاہوں گا، بشمول وائٹ اسپیس، اینیمیشنز، اور انفرنس بلاکس کو کم کرنے کے طریقے۔ ہر بار جب آپ پکسل کو ایڈجسٹ کرتے ہیں تو اصل ماڈل کے خلاف اس UI کو دوبارہ بنانا سست ہے اور اس کی قیمت ٹوکن ہے۔

یہ ہے shadcn AI SDK مددگار پیکیج حل ہو گیا ہے۔ آپ جعلی بات چیت کو اسکرپٹ کر سکتے ہیں اور انہی بات چیت کو سٹریم کر سکتے ہیں۔ useChat ہکس جو آپ پہلے ہی سرورز، ماڈلز، یا API کیز کے بغیر استعمال کر رہے ہیں:

npm install @shadcn/helpers

import { createChat } from "@shadcn/helpers";
import { useChat } from "@ai-sdk/react";

const chat = createChat()
  .user("What changed in the last release?")
  .assistant("The release added keyboard shortcuts and faster search.");

function ChatPreview() {
  const { messages } = useChat({
    messages: chat.get(0),
    transport: chat.transport(),
  });

  // render `messages` exactly like you would with a real backend
}

یہ ان تمام حصوں کی اقسام کو سپورٹ کرتا ہے جنہیں AI SDK سمجھتا ہے، بشمول انفرنسز، ٹول کالز، فائلز، اور ذرائع، اور ہر بار متعین طور پر اسٹریمز۔ یہ تولیدی ڈیمو یا UI ٹیسٹ لکھنے کے لیے بھی بہت مفید ہے۔

اس طرح، آپ ایک پورا انٹرفیس بنا اور بہتر کر سکتے ہیں اور پھر اسے حقیقی انٹرفیس سے بدل سکتے ہیں۔ /api/chat جیسے ہی آپ کا پسدید تیار ہو روٹ کریں۔

چیٹ کو ایک مکمل پروڈکٹ میں تبدیل کریں۔

چیٹ ونڈوز شاذ و نادر ہی اسٹینڈ اکیلی ہوتی ہیں۔ ایک بار شروع ہونے اور چلانے کے بعد، آپ کو عام طور پر ماضی کی بات چیت کے لیے ایک سائڈبار، ماڈل کے انتخاب کے لیے ایک سیٹنگ پینل، اور صارفین میں استعمال کی جانچ کرنے کے لیے ایک منتظم کا منظر چاہیے۔ یہ ٹیکسٹ اسٹریمنگ سے مختلف مسئلہ ہے۔ یہ ایپلیکیشن شیل اور ڈیٹا ٹیبل ایریاز ہیں۔

زیادہ تر ٹیمیں اس شیل کو خود رول کرنے کے بجائے پہلے سے تعمیر شدہ انتظامی ترتیب کا استعمال کرتی ہیں۔ تیار شدہ shadcn ڈیش بورڈShadcn Space’s کی طرح، یہ اپنے اندرونی ٹولز کے لیے ضروری لے آؤٹ، ڈیٹا ٹیبلز، چارٹس اور نیویگیشن پیٹرن کے ساتھ آتا ہے، لہذا آپ کو اپنی چیٹ کی فعالیت کو ایک گھر دینے کے لیے شروع سے سائڈ بارز اور سیٹنگز کے صفحات کو دوبارہ بنانے کی ضرورت نہیں ہے۔

اور اگر آپ خود چیٹ اسکرین بنانا چھوڑنا چاہتے ہیں تو یہ ایک حقیقی آپشن ہے۔ کچھ ٹیمیں شیلف سے ہی شروع ہوتی ہیں۔ shadcn AI چیٹ ایپ یہ ٹیمپلیٹ بات چیت کے سائڈبارز، مارک ڈاؤن اور کوڈ رینڈرنگ، اور ٹول کال ویژولائزیشنز کے ساتھ آتا ہے جو پہلے سے موجود ہیں۔ اس کی وضاحت ہم آخر میں کریں گے۔

پوری چیٹ ایپ کا لائیو پیش نظارہ:

MCP سرور کے ساتھ shadcn کی ترقی کو تیز کریں۔

تاہم، چیٹ UI بناتے وقت، کسی دستاویز سے کاپی کرنے اور چسپاں کرنے کے بجائے اجزاء درآمد کرنے کے تیز تر طریقے ہیں۔ یعنی، ایک ماڈل سیاق و سباق پروٹوکول (MCP) سرور جو AI کوڈنگ معاونین کو اجزاء کی رجسٹری تک حقیقی وقت تک رسائی فراہم کرتا ہے۔

Shadcn MCP سرور ٹولز کو سپورٹ کرتا ہے جیسے کلاڈ کوڈ، کرسر، اور ونڈ سرف۔ Shadcn کی جگہ اجزاء کی فہرست۔ دستاویزات کے ذریعے تلاش کرنے اور انسٹالیشن کمانڈز کو چسپاں کرنے کے بجائے، آپ اسسٹنٹ سے اپنی ضرورت کے لیے پوچھ سکتے ہیں، جیسے کہ "اوتار اور ٹائم اسٹیمپ کے ساتھ میسج ببل کا جزو شامل کریں” اور یہ پرانے ٹریننگ ڈیٹا سے اندازہ لگانے کے بجائے اصل، تازہ ترین جز کی تعریفیں حاصل کرے گا۔

اسے ترتیب دینا کلاڈ کوڈ کی طرف سے ایک لائن کمانڈ ہے:

claude mcp add shadcnspace-mcp -- npx -y shadcnspace-mcp@latest

دوسرے ایڈیٹرز میں، MCP کنفیگریشن فائل میں صرف وہی کمانڈز حذف کریں۔ مثال کے طور پر .cursor/mcp.json کرسر پر۔ پوری MCP سرور شروع کرنے کی گائیڈ ہم ہر معاون ایڈیٹر کی ترتیب کے ذریعے آپ کی رہنمائی کرتے ہیں۔ Shadcn MCP صفحہ اس بات کی وضاحت کرتا ہے کہ ایک بار منسلک ہونے کے بعد آپ کیا دریافت، انسٹال اور تخلیق کر سکتے ہیں۔

اگر آپ ترتیبات کو پڑھنے کے بجائے دیکھنا پسند کرتے ہیں، تو یہاں ایک مختصر واک تھرو ہے جو شروع سے آخر تک انہی مراحل کا احاطہ کرتا ہے۔

شپنگ سے پہلے چند چیزوں کا خیال رکھنا:

اوپر ٹیوٹوریل ورژن جان بوجھ کر کم سے کم ہے۔ اس سے پہلے کہ یہ پیداوار کے قریب آجائے، اسے شامل کریں:

• شرح کی حد آپ کا /api/chat راستہ لامحدود چیٹ اینڈ پوائنٹس بہت بڑے ماڈل بل بنانے کا ایک آسان طریقہ ہیں۔

• رکاوٹ کو سنبھالنا صارفین کو درمیانی ردعمل کو روکنے کی اجازت دیں۔ useChat یہ فوری مدد فراہم کرتا ہے۔ stop() فنکشن

• غلطی کی حد اس کی وجہ یہ ہے کہ اگر سلسلہ نیچے جاتا ہے یا فراہم کنندہ نیچے چلا جاتا ہے، تو پورا صفحہ نیچے نہیں جانا چاہیے۔

• سرٹیفیکیشنجب آپ کو جوابات یا گفتگو کی سرگزشت کے دائرہ کار کو مخصوص صارفین تک محدود کرنے کی ضرورت ہو۔

ان میں سے کوئی بھی غیر ملکی نہیں ہے۔ یہ وہی پیداواری بنیادی باتیں ہیں جو API کے تمام راستوں پر لاگو ہوتی ہیں۔ چیٹ کے اختتامی نکات بھولنا آسان بنا دیتے ہیں کیونکہ ترقی کا خوشگوار راستہ بہت ہموار لگتا ہے۔

ریڈی میڈ ٹیمپلیٹس کے ساتھ بوائلر پلیٹ کو چھوڑ دیں۔

مندرجہ بالا سبھی آپ کو ایک چیٹ انٹرفیس دیں گے جو حقیقت میں کام کرتا ہے، لیکن یہ ایک ٹیوٹوریل ورژن ہے۔ پروڈکشن چیٹ پروڈکٹ کے لیے عام طور پر ڈائیلاگ سائڈبار، پراجیکٹ گروپنگ، مارک ڈاؤن اور سنٹیکس ہائی لائٹنگ کوڈ بلاکس، ایک انفرنس پینل، وائس ان پٹ، اور ماڈل سوئچنگ کے لیے سیٹ اپ اسکرینز کی بھی ضرورت ہوتی ہے۔ اس سب کو شروع سے بنانے میں اپنے آپ میں ہفتے لگ سکتے ہیں۔

اگر آپ اس شیل کو خود نہیں بنانا چاہتے ہیں تو، میں چیک آؤٹ کرنے کی تجویز کرتا ہوں: shadcn AI چیٹ ایپ یہ Shadcn Space سے ایک ٹیمپلیٹ ہے۔ یہ اسی فاؤنڈیشن پر بنایا گیا ہے جس کا اس مضمون میں احاطہ کیا گیا ہے (Next.js, Vercel AI SDK، اور shadcn ui)، لیکن اس میں سائڈ بارز، انفرنس اور ٹول کال UI، فائل اٹیچمنٹ، اور ملٹی پرووائیڈر ماڈل سوئچنگ پہلے سے ہی منسلک ہے۔ آپ سیٹ کریں AI_PROVIDER اور AI_API_KEY آپ مکمل انٹرفیس کے ذریعے اصل ماڈل کے ساتھ بات چیت کریں گے۔

آپ چیک کر سکتے ہیں لائیو ڈیمو یہ فیصلہ کرنے سے پہلے کہ سائڈبارز، سٹریمنگ، اور ٹول کالز کیسے کام کرتی ہیں بالکل دیکھیں کہ آپ خود بنائیں یا ٹیمپلیٹ سے شروع کریں۔

ختم

اب آپ کے پاس ایک چیٹ انٹرفیس ہے جو حقیقی جوابات کو سٹریم کرتا ہے، ٹولز کال کرتا ہے، اور مکمل طور پر ان اجزاء پر بنایا گیا ہے جو آپ کے مالک ہیں اور آزادانہ طور پر قابل تدوین ہیں۔ اور AI مصنوعات کے لیے، یہ سب آپ کے خیال سے کہیں زیادہ اہم ہے۔ Vercel AI SDK سخت اسٹریمنگ اور ماڈل منطق کو ہینڈل کرتا ہے، جبکہ shadcn/ui آپ کو اس بات پر مکمل کنٹرول فراہم کرتا ہے کہ وہ منطق دراصل اسکرین پر کیسے ظاہر ہوتی ہے۔

یہاں سے، قدرتی اگلا مرحلہ ایک حقیقی فراہم کنندہ کو جوڑنا، اوپر تصنیف کی بنیادی باتیں شامل کرنا، اور فیصلہ کرنا ہے کہ آیا آپ اپنے UI کو بڑھانا جاری رکھنا چاہتے ہیں یا اس کے ارد گرد پروڈکٹ بنانے کے لیے تیار ٹیمپلیٹ کا استعمال زیادہ تیزی سے کرنا چاہتے ہیں۔ کسی بھی طرح سے، دونوں راستے بہت آسان ہو گئے ہیں کیونکہ اب آپ سمجھ گئے ہیں کہ اصل میں ہڈ کے نیچے کیا ہو رہا ہے۔

وسائل

میں نے یہ مضمون آشوتوش ردا (سینئر فرنٹ اینڈ ڈیولپر) کی مدد سے لکھا ہے۔ LinkedIn پر جڑیں۔