{"id":29168,"date":"2026-09-11T20:25:45","date_gmt":"2026-09-11T20:25:45","guid":{"rendered":"https:\/\/umang.pk\/2026\/09\/11\/vercel-ai-sdk-%d8%a7%d9%88%d8%b1-shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-ai-%da%86%db%8c%d9%b9-%d8%a7%db%8c%d9%be-%d8%a7\/"},"modified":"2026-09-11T20:25:47","modified_gmt":"2026-09-11T20:25:47","slug":"vercel-ai-sdk-%d8%a7%d9%88%d8%b1-shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-ai-%da%86%db%8c%d9%b9-%d8%a7%db%8c%d9%be-%d8%a7","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/09\/11\/vercel-ai-sdk-%d8%a7%d9%88%d8%b1-shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-ai-%da%86%db%8c%d9%b9-%d8%a7%db%8c%d9%be-%d8%a7\/","title":{"rendered":"Vercel AI SDK \u0627\u0648\u0631 Shadcn\/ui \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 AI \u0686\u06cc\u0679 \u0627\u06cc\u067e \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>\u06c1\u0631 \u062f\u0648\u0633\u0631\u06cc AI \u067e\u0631\u0648\u0688\u06a9\u0679 \u062c\u0633\u06d2 \u0622\u067e \u0622\u062c \u06a9\u06be\u0648\u0644\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06c1\u06d2: \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u060c \u0646\u06cc\u0686\u06d2 \u0627\u06cc\u06a9 \u0679\u06cc\u06a9\u0633\u0679 \u0628\u0627\u06a9\u0633\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0679\u0648\u06a9\u0646 \u0645\u06cc\u06ba \u0686\u0644\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u0644\u0641\u0627\u0638\u06d4 \u06cc\u06c1 \u0622\u0633\u0627\u0646 \u0644\u06af \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06d2 \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u0628\u0646\u0627\u0646\u0627 \u0622\u0633\u0627\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2.<\/p>\n<p>\u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06cc \u0631\u0633\u0627\u0626\u06cc \u0627\u0648\u0631 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u06a9\u06cc \u062d\u0627\u0644\u062a\u060c \u062c\u0632\u0648\u06cc \u0679\u0648\u06a9\u0646\u060c \u0679\u0648\u0644 \u06a9\u0627\u0644\u0632\u060c \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u0648\u0634\u0634\u06cc\u06ba\u060c \u0645\u0627\u0631\u06a9 \u0688\u0627\u0624\u0646 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af\u060c \u0627\u0633\u06a9\u0631\u0648\u0644 \u067e\u0648\u0632\u06cc\u0634\u0646\u060c \u0627\u0648\u0631 \u062f\u0631\u062c\u0646 \u0628\u06be\u0631 \u062f\u06cc\u06af\u0631 \u0686\u06be\u0648\u0679\u06cc UX \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u063a\u0644\u0637 \u0679\u0648\u0644\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0627\u0635\u0644 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0631\u06cc\u0627\u0633\u062a\u06cc \u06a9\u06cc\u0691\u0648\u06ba \u0633\u06d2 \u0644\u0691\u0646\u06d2 \u0645\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u0648\u0642\u062a \u0635\u0631\u0641 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u062f\u0648 \u0679\u0648\u0644\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u062d\u0642\u06cc\u0642\u06cc AI \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba: Vercel AI SDK \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0627\u0648\u0631 \u0645\u0627\u0688\u0644 \u0644\u0627\u062c\u06a9 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0648\u0631 shadcn\/ui \u062e\u0648\u062f \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u0648\u0631\u06a9\u0646\u06af \u0686\u06cc\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06c1\u0648\u06af\u06cc \u062c\u0648 \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u0648 \u0627\u0633\u0679\u0631\u06cc\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0645\u0627\u0631\u06a9 \u0688\u0627\u0624\u0646 \u06a9\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06cc \u0637\u0631\u062d \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0622\u067e \u0648\u0627\u0642\u0639\u06cc \u0628\u06be\u06cc\u062c\u0646\u06d2 \u062c\u0627\u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06c1\u0645 \u06cc\u06c1 \u0628\u06be\u06cc \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u0622\u067e \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06d2 UI \u067e\u06c1\u0644\u0648 \u06a9\u0648 \u0645\u0632\u06cc\u062f \u062a\u06cc\u0632 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0633 \u0637\u0631\u062d MCP \u0633\u0631\u0648\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u06af\u0631 \u0622\u067e \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0686\u06be\u0648\u0691\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0686\u06cc\u0679 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679\u0633 \u06a9\u06c1\u0627\u06ba \u0633\u06d2 \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0627\u0626\u0637<\/h2>\n<p>\u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u06af\u06cc:<\/p>\n<ul>\n<li>\n<p>Node.js 18+<\/p>\n<\/li>\n<li>\n<p>React \u0627\u0648\u0631 Next.js \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0644\u0645\u060c \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u067e \u0631\u0627\u0624\u0679\u0631\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0622\u067e \u06a9\u06d2 LLM \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u0633\u06d2 API \u06a9\u0644\u06cc\u062f\u060c \u062c\u06cc\u0633\u06d2 OpenAI\u060c Anthropic\u060c \u06cc\u0627 Google\u06d4 \u0627\u0633 \u067e\u0631 \u0645\u0632\u06cc\u062f \u0628\u0639\u062f \u0645\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-what-youll-build\">\u06a9\u06cc\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2<\/h2>\n<p>\u06c1\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 Next.js \u0686\u06cc\u0679 \u0627\u06cc\u067e \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2:<\/p>\n<ul>\n<li>\n<p>LLM \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af API \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0644\u0627\u0626\u0646\u0679 \u0633\u0627\u0626\u06cc\u0688 \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 <code>useChat<\/code><\/p>\n<\/li>\n<li>\n<p>\u067e\u06cc\u063a\u0627\u0645 \u06a9\u06d2 \u063a\u0628\u0627\u0631\u06d2\u060c \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0628\u0691\u06be\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u0646 \u067e\u0679\u060c \u0633\u06a9\u0631\u0648\u0644 \u0627\u06cc\u0628\u0644 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0648\u063a\u06cc\u0631\u06c1 \u0633\u0628\u06be\u06cc shadcn\/ui \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u06a9 \u0633\u0627\u062f\u06c1 \u0679\u0648\u0644 \u06a9\u0627\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0622\u067e \u06a9\u0627 \u0645\u0627\u0688\u0644 \u0635\u0631\u0641 \u0628\u0627\u062a \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0627\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06cc\u06c1 \u0627\u06cc\u06a9 \u0641\u0627\u0644 \u0628\u06cc\u06a9 \u062d\u0627\u0644\u062a \u06c1\u06d2 \u062c\u0648 API \u06a9\u0644\u06cc\u062f \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0628\u06be\u06cc \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u067e\u06c1\u0644\u06d2 UI \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0645\u0627\u0688\u0644\u0632 \u06a9\u0648 \u062c\u0648\u0691 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u06cc\u06a9 \u062e\u0627\u0644\u06cc \u0641\u0648\u0644\u0688\u0631 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u0641\u0648\u0644\u0688\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0648 \u0622\u067e \u06a9\u06d2 \u0633\u0627\u062a\u06be\u06cc\u0648\u06ba \u06a9\u0648 \u062f\u06a9\u06be\u0627\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648\u06d4<\/p>\n<h2 id=\"heading-step-1-scaffold-the-nextjs-app\">\u0645\u0631\u062d\u0644\u06c1 1: Next.js \u0627\u06cc\u067e \u06a9\u0648 \u0633\u06a9\u06cc\u0641\u0648\u0644\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>TypeScript \u0627\u0648\u0631 Tailwind \u0641\u0639\u0627\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0646\u06cc\u0627 Next.js \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npx create-next-app@latest ai-chat-app --typescript --tailwind --eslint --app\ncd ai-chat-app\n<\/code><\/pre>\n<p>CLI \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0639\u0644\u0627\u0648\u06c1 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u06cc\u0641\u0627\u0644\u0679\u0633 \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4 \u0622\u067e \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 <code>app<\/code> \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679\u0631\u06cc<\/p>\n<h2 id=\"heading-step-2-install-the-vercel-ai-sdk\">\u0645\u0631\u062d\u0644\u06c1 2: Vercel AI SDK \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u06a9\u06c1 <strong>Vercel AI SDK<\/strong> \u06cc\u06c1\u0627\u06ba \u06a9\u06cc\u0627 \u0628\u0648\u062c\u06be \u06c1\u06d2\u061f \u06cc\u06c1 \u0645\u062e\u062a\u0644\u0641 \u0645\u0627\u0688\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u06d2\u060c \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0648\u0631 \u0633\u0679\u0631\u06a9\u0686\u0631\u0688 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0686\u0644\u0627\u0646\u06d2\u060c \u0627\u0648\u0631 \u0679\u0648\u0644 \u06a9\u0627\u0644\u0632 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 API \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u062c\u0628 \u0628\u06be\u06cc \u0622\u067e \u0645\u0627\u0688\u0644\u0632 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0686\u06cc\u0679 \u0645\u0646\u0637\u0642 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u067e\u06cc\u06a9\u062c\u0632\u060c \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0628\u0627\u0626\u0646\u0688\u0646\u06af\u0632\u060c \u0627\u0648\u0631 OpenAI \u06c1\u0645 \u0622\u06c1\u0646\u06af \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npm install ai @ai-sdk\/react @ai-sdk\/openai-compatible\n<\/code><\/pre>\n<p><code>@ai-sdk\/openai-compatible<\/code>    \u06cc\u06c1 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0642\u0627\u0628\u0644 \u0630\u06a9\u0631 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0639\u0644\u06cc\u062d\u062f\u06c1 \u067e\u06cc\u06a9\u062c\u0632 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 OpenAI \u0637\u0631\u0632 \u06a9\u0627 API \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 (OpenAI \u062e\u0648\u062f\u060c Gemini\u060c Groq\u060c \u0627\u0648\u0631 \u0645\u062e\u062a\u0644\u0641 \u0633\u06cc\u0644\u0641 \u06c1\u0648\u0633\u0679\u0688 \u0633\u06cc\u0679 \u0627\u067e\u0633) \u06a9\u0648 \u0635\u0631\u0641 \u0628\u06cc\u0633 URLs \u06a9\u0627 \u062a\u0628\u0627\u062f\u0644\u06c1 \u06a9\u0631 \u06a9\u06d2\u06d4 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0644 \u06a9\u0631 <code>AI_PROVIDER<\/code> \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0622\u067e \u0631\u0648\u0679 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u06a9\u0648 \u0686\u06be\u0648\u0626\u06d2 \u0628\u063a\u06cc\u0631 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u0633\u0648\u0626\u0686\u0646\u06af \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0648\u06c1 \u0646\u0645\u0648\u0646\u06c1 \u06c1\u06d2 \u062c\u0633\u06d2 \u06c1\u0645 \u0627\u06af\u0644\u06d2 \u0645\u0631\u062d\u0644\u06d2 \u0645\u06cc\u06ba \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-3-why-shadcnui-pairs-so-well-with-ai-chat-uis\">\u0645\u0631\u062d\u0644\u06c1 3: \u06a9\u06cc\u0648\u06ba shadcn\/ui AI \u0686\u06cc\u0679 UI \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0686\u06be\u0627 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/h2>\n<p>\u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc UI \u06a9\u0648\u0688 \u0644\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u0627 \u0627\u0686\u06be\u0627 \u062e\u06cc\u0627\u0644 \u06c1\u06d2 \u06a9\u06c1 AI \u0686\u06cc\u0679 \u06a9\u06cc \u0628\u06c1\u062a \u0633\u0627\u0631\u06cc \u0645\u0635\u0646\u0648\u0639\u0627\u062a \u0631\u0648\u0627\u06cc\u062a\u06cc \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 shadcn\/ui \u067e\u0631 \u06a9\u06cc\u0648\u06ba \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0627\u06ba \u0645\u0631\u062a\u0628 \u0634\u062f\u06c1 \u067e\u06cc\u06a9\u062c\u0632 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u06d2 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u062d\u0635\u0648\u06ba \u06a9\u0648 \u067e\u0631\u067e\u0633 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0686\u06be\u067e\u0627 \u062f\u06cc\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u06d2 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0679\u06be\u06cc\u06a9 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0645\u06cc\u06ba \u0679\u06be\u06cc\u06a9 \u0633\u06d2 \u06a9\u0627\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0686\u06cc\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u06cc\u06c1 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u067e\u06cc\u063a\u0627\u0645 \u06a9\u06d2 \u0628\u0644\u0628\u0644\u0648\u06ba \u06a9\u0648 \u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u06a9\u0633 \u0637\u0631\u062d &quot;\u0633\u0648\u0686&#8221; \u0627\u0634\u0627\u0631\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u0679\u0648\u0644 \u06a9\u0627\u0644\u0632 \u06a9\u0648 \u0633\u0627\u062f\u06c1 \u0645\u062a\u0646 \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u06a9\u06cc\u0633\u06d2 \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>shadcn\/ui \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0644\u0641 \u0637\u0631\u06cc\u0642\u06c1 \u0627\u062e\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u062c\u0632 \u06a9\u06d2 \u0627\u0635\u0644 \u0633\u0648\u0631\u0633 \u06a9\u0648\u0688 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0645\u0639\u0627\u0645\u0644\u06d2 \u0645\u06cc\u06ba \u0641\u0679 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u062c\u0631\u06cc\u062f\u0648\u06ba \u0633\u06d2 \u0644\u0691\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0648\u0631 \u062f\u06cc\u06a9\u06be \u0628\u06be\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0633 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0627\u067e\u0646\u06d2 \u067e\u0627\u0633 \u0631\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0633 \u06a9\u06cc \u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0686\u0648\u0646\u06a9\u06c1 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u062f\u0648 AI \u067e\u0631\u0648\u0688\u06a9\u0679\u0633 \u0627\u06cc\u06a9 \u06c1\u06cc \u0637\u0631\u062d \u0633\u06d2 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a\u060c \u0642\u06cc\u0627\u0633\u0627\u062a\u060c \u06cc\u0627 \u0679\u0648\u0644 \u0622\u0624\u0679 \u067e\u0679 \u067e\u06cc\u0634 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u0644\u06a9\u06cc\u062a \u06a9\u0627 \u06cc\u06c1 \u0645\u0627\u0688\u0644 \u0628\u0627\u0644\u06a9\u0644 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0633 \u06a9\u06cc \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u06cc \u0648\u062c\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u067e\u0648\u0631\u0627 \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0646\u0638\u0627\u0645 \u0627\u0633 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u067e\u0631\u0648\u0627\u0646 \u0686\u0691\u06be\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0628\u0646\u06cc\u0627\u062f\u06cc \u0631\u062c\u0633\u0679\u0631\u06cc \u0633\u06d2 \u0622\u06af\u06d2 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0628\u0644\u0627\u06a9\u0633 \u0627\u0648\u0631 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679\u0633 \u06a9\u0627 \u0632\u06cc\u0627\u062f\u06c1 \u0648\u0633\u06cc\u0639 \u0633\u06cc\u0679 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u0634\u0645\u0648\u0644 \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688\u060c \u0645\u0627\u0631\u06a9\u06cc\u0679\u0646\u06af \u0633\u06cc\u06a9\u0634\u0646\u060c \u0627\u0648\u0631 \u0645\u06a9\u0645\u0644 \u0686\u06cc\u0679 UI\u06d4 <strong>shadcn\/ui<\/strong> Shadcn Space \u06a9\u0627 \u06a9\u0645\u06cc\u0648\u0646\u0679\u06cc \u06c1\u0628 \u0628\u06a9 \u0645\u0627\u0631\u06a9\u0646\u06af \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2\u06d4 \u06c1\u0645 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u0633 \u067e\u0631 \u0648\u0627\u067e\u0633 \u0622\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-4-set-up-shadcnui-in-your-project\">\u0645\u0631\u062d\u0644\u06c1 4: \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba shadcn\/ui \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0686\u0648\u0646\u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0627\u06cc\u06a9 Next.js \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06c1\u06d2 \u0645\u0631\u062d\u0644\u06c1 1 \u0633\u06d2\u060c Shadcn Space preset \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0627\u0633 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npx shadcn@latest apply --preset b0\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u062a\u0631\u062a\u06cc\u0628 <code>components.json<\/code>\u0679\u06cc\u0644 \u0648\u0646\u0688 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u0627\u0648\u0631 <code>lib\/utils.ts<\/code> \u0645\u0648\u062c\u0648\u062f\u06c1 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0627\u0646\u062f\u0631\u06d4 \u0648\u06c1\u0627\u06ba \u0633\u06d2 \u06c1\u0645 \u0686\u06cc\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0636\u0631\u0648\u0631\u06cc \u0627\u062c\u0632\u0627\u0621 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<pre><code class=\"language-bash\">npx shadcn@latest add button input textarea scroll-area avatar separator\n<\/code><\/pre>\n<p>\u06c1\u0631 \u0627\u06cc\u06a9 <code>add<\/code> \u06a9\u0627\u0644 \u0627\u0635\u0644 \u062c\u0632\u0648 \u06a9\u0627 \u0630\u0631\u06cc\u0639\u06c1 \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062c\u0633\u06d2 \u067e\u0691\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 <code>components\/ui\/<\/code>\u0622\u067e \u0627\u0646\u06c1\u06cc\u06ba \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u06a9\u0633\u06cc \u0628\u06be\u06cc \u062f\u0648\u0633\u0631\u06cc \u0641\u0627\u0626\u0644 \u06a9\u06cc \u0637\u0631\u062d \u062f\u0631\u0622\u0645\u062f \u0627\u0648\u0631 \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u063a\u06cc\u0631 \u0645\u0631\u062a\u0628 \u06a9\u0631\u062f\u06c1 \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u06d2\u060c \u062c\u0633 \u06a9\u0627 \u06c1\u0645 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u067e\u06cc\u063a\u0627\u0645 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u0648\u06ba \u0627\u0648\u0631 \u0645\u0635\u0646\u0641\u06cc\u0646 \u06a9\u0648 \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u0645\u06cc\u06ba \u062c\u0648\u0691\u0646\u0627 \u0646\u06c1\u06cc\u06ba \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 Shadcn Space \u06a9\u06d2 \u067e\u0627\u0633 \u0628\u06be\u06cc \u0627\u06cc\u06a9 \u0631\u06cc\u0688\u06cc \u0645\u06cc\u0688 \u06c1\u06d2\u06d4 <strong>AI \u0686\u06cc\u0679 \u0628\u0644\u0627\u06a9<\/strong> \u0622\u067e \u0627\u067e\u0646\u0627 \u0627\u067e\u0646\u0627 \u0634\u0627\u0645\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">npx shadcn@latest add @shadcn-space\/ai-chat-01\n\nnpx shadcn@latest add @shadcn-space\/ai-chat-03\n<\/code><\/pre>\n<p><code>ai-chat-01<\/code>    \u06cc\u06c1 \u0627\u06cc\u06a9 \u0645\u06a9\u0627\u0644\u0645\u0627\u062a\u06cc \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0648\u06cc\u0644\u06a9\u0645 \u0627\u0633\u06a9\u0631\u06cc\u0646\u060c \u062a\u062c\u0648\u06cc\u0632 \u06a9\u06d2 \u0627\u0634\u0627\u0631\u06d2\u060c \u0633\u06a9\u0631\u0648\u0644 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0645\u06cc\u0633\u062c \u062a\u06be\u0631\u06cc\u0688\u0632\u060c \u0645\u0646\u0633\u0644\u06a9\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u06a9\u0645\u067e\u0648\u0632\u0631\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0645\u0627\u0688\u0644 \u0633\u0644\u06cc\u06a9\u0679\u0631 \u0634\u0627\u0645\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview-of-ai-chat-01\">\u0627\u06d2 \u0622\u0626\u06cc \u0686\u06cc\u0679 01 \u06a9\u0627 \u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/09\/1789158345_525_Vercel-AI-SDK-\u0627\u0648\u0631-Shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-AI.webp\" alt=\"AI \u0686\u06cc\u0679 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 01\" style=\"display: block;\" width=\"1920\" height=\"1440\" loading=\"lazy\" title=\"\"><\/p>\n<p><code>ai-chat-03<\/code>    \u06cc\u06c1 \u0627\u06cc\u06a9 \u067e\u0631\u062f\u06cc\u06cc \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0634\u06cc\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u0679\u0648\u0679\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u060c \u067e\u0646 \u06a9\u06cc \u06af\u0626\u06cc \u062d\u0627\u0644\u06cc\u06c1 \u0686\u06cc\u0679\u0633\u060c \u062a\u0644\u0627\u0634 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0679\u0627\u067e \u0628\u0627\u0631 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview-of-ai-chat-03\">\u0627\u06d2 \u0622\u0626\u06cc \u0686\u06cc\u0679 03 \u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/09\/1789158345_370_Vercel-AI-SDK-\u0627\u0648\u0631-Shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-AI.webp\" alt=\"AI \u0686\u06cc\u0679 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 03\" style=\"display: block;\" width=\"1920\" height=\"1440\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0622\u067e \u06cc\u0627 \u062a\u0648 \u0628\u0644\u0627\u06a9 \u06a9\u0648 \u0627\u0644\u06af \u0633\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0627\u06af\u0631 \u0622\u067e \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u0686\u06cc\u0679 \u0644\u06d2 \u0622\u0624\u0679 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u06c1\u06cc \u0627\u0631\u062f \u06af\u0631\u062f \u06a9\u06d2 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u0648 \u0628\u0646\u0627\u0626\u06d2 \u0628\u063a\u06cc\u0631\u06d4<\/p>\n<p>\u062f\u0648\u0646\u0648\u06ba \u0628\u0644\u0627\u06a9\u0633 \u067e\u0631\u06cc\u0645\u06cc\u0645 \u06c1\u06cc\u06ba\u06d4 \u0645\u0639\u06cc\u0627\u0631\u06cc shadcn \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0641\u062a \u0633\u0627\u0626\u0688\u0628\u0627\u0631 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>sidebar-07<\/code> \u0628\u0644\u0627\u06a9\u0633 \u0627\u06cc\u06a9 \u06c1\u0644\u06a9\u0627 \u067e\u06be\u0644\u06a9\u0627\u060c \u0644\u0627\u06af\u062a \u0633\u06d2 \u067e\u0627\u06a9 \u0645\u062a\u0628\u0627\u062f\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npx shadcn@latest add sidebar-07\n<\/code><\/pre>\n<h2 id=\"heading-step-5-build-the-streaming-api-route\">\u0645\u0631\u062d\u0644\u06c1 5: \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af API \u0631\u0648\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u0628\u0646\u0627\u0646\u0627 <code>app\/api\/chat\/route.ts<\/code>. \u06cc\u06c1 \u0633\u0631\u0648\u0631 \u0633\u0627\u0626\u06cc\u0688 \u0648\u0627\u0644\u0627 \u062d\u0635\u06c1 \u0645\u0627\u0688\u0644 \u0633\u06d2 \u0628\u0627\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062c\u0648\u0627\u0628 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631 \u0648\u0627\u067e\u0633 \u0628\u06be\u06cc\u062c\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">\/\/ app\/api\/chat\/route.ts\nimport { createOpenAICompatible } from \"@ai-sdk\/openai-compatible\";\nimport { convertToModelMessages, streamText, type UIMessage } from \"ai\";\n\nconst PROVIDERS: Record<string baseurl:=\"\" string=\"\" model:=\"\"> = {\n  openai: {\n    baseURL: \"https:\/\/api.openai.com\/v1\",\n    model: \"gpt-4o-mini\",\n  },\n  gemini: {\n    baseURL: \"https:\/\/generativelanguage.googleapis.com\/v1beta\/openai\",\n    model: \"gemini-2.5-flash\",\n  },\n  groq: {\n    baseURL: \"https:\/\/api.groq.com\/openai\/v1\",\n    model: \"llama-3.3-70b-versatile\",\n  },\n};\n\nexport async function POST(req: Request) {\n  const { messages }: { messages: UIMessage[] } = await req.json();\n\n  const providerName =\n    process.env.AI_PROVIDER?.trim().toLowerCase() ?? \"openai\";\n\n  const { baseURL, model } =\n    PROVIDERS[providerName] ?? PROVIDERS.openai;\n\n  const provider = createOpenAICompatible({\n    name: providerName,\n    baseURL: process.env.AI_BASE_URL ?? baseURL,\n    apiKey: process.env.AI_API_KEY,\n  });\n\n  const result = streamText({\n    model: provider(process.env.AI_MODEL ?? model),\n    system: \"You are a concise, helpful assistant.\",\n    messages: convertToModelMessages(messages),\n  });\n\n  return result.toUIMessageStreamResponse();\n}\n<\/string><\/code><\/pre>\n<p>\u0686\u0646\u062f \u0628\u0627\u062a\u06cc\u06ba \u0642\u0627\u0628\u0644 \u0630\u06a9\u0631 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><code>createOpenAICompatible<\/code>    \u0627\u06cc\u06a9 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u0645\u062b\u0627\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u062a\u0645\u0627\u0645 OpenAI \u0637\u0631\u0632 APIs \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u0628\u0627\u062f\u0644\u06c1 <code>AI_PROVIDER<\/code> \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 <code>openai<\/code>\u060c <code>gemini<\/code>\u06cc\u0627 <code>groq<\/code> \u0631\u0648\u0679 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u0628\u0627\u0644\u06a9\u0644 \u062a\u0628\u062f\u06cc\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>convertToModelMessages<\/code>    \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u06be\u06cc\u062c\u06d2 \u06af\u0626\u06d2 UI \u067e\u06cc\u063a\u0627\u0645 \u06a9\u06d2 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u0648 \u0645\u0627\u0688\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06d2 \u0645\u062a\u0648\u0642\u0639 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0646\u0633\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>streamText<\/code>    \u06cc\u06c1 \u0627\u06cc\u06a9 \u0645\u0627\u0688\u0644 \u0628\u0646\u0627\u0646\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0633\u0644\u0633\u0644\u06c1 \u0648\u0627\u067e\u0633 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633\u06d2 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u06a9\u0644\u0627\u0626\u0646\u0679 \u062a\u06a9 \u067e\u06c1\u0646\u0686\u0627\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>toUIMessageStreamResponse()<\/code>    \u0627\u0633 \u0633\u0644\u0633\u0644\u06d2 \u06a9\u0648 \u062c\u0648\u0627\u0628 \u0645\u06cc\u06ba \u0644\u067e\u06cc\u0679\u06cc\u06ba\u06d4 <code>useChat<\/code> \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u0627 \u06c1\u06a9 \u062c\u0627\u0646\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0679\u0648\u06a9\u0646 \u0679\u0648\u06a9\u0646 \u0679\u0648\u06a9\u0646 \u06a9\u0648 \u06a9\u0633 \u0637\u0631\u062d \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0633\u06cc\u0679 \u0627\u067e \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u0627 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u062f\u0631\u062c \u06a9\u0631\u06cc\u06ba\u06d4 <code>.env<\/code>:<\/p>\n<pre><code class=\"language-bash\"># .env\nAI_PROVIDER=openai\nAI_API_KEY=\n<\/code><\/pre>\n<p>\u0622\u067e UI \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0686\u0627\u06c1\u06d2 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u0628\u06be\u06cc \u06a9\u0644\u06cc\u062f \u0646\u06c1 \u06c1\u0648\u06d4 \u062c\u0628 \u062a\u06a9 \u0622\u067e \u0627\u0635\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u0633\u06d2 \u0631\u0627\u0628\u0637\u06c1 \u0642\u0627\u0626\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0646\u06c1 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u0627\u0633 \u0631\u0627\u0633\u062a\u06d2 \u06a9\u0648 \u0688\u0628\u06c1 \u0628\u0646\u062f \u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u06a9\u0627 \u062c\u0648\u0627\u0628 \u0648\u0627\u067e\u0633 \u06a9\u0631\u0646\u06d2 \u062f\u06cc\u06ba\u06d4 \u0646\u06cc\u0686\u06d2 \u062f\u06cc\u0626\u06d2 \u06af\u0626\u06d2 \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u0648\u0688 \u06a9\u0648 \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u067e\u0631\u0648\u0627\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u0633\u0644\u0633\u0644\u06c1 \u06a9\u06c1\u0627\u06ba \u0633\u06d2 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-6-wire-up-the-client-with-usechat\">\u0645\u0631\u062d\u0644\u06c1 6: UseChat \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u0648 \u062c\u0648\u0691\u06cc\u06ba\u06d4<\/h2>\n<p>\u0622\u0626\u06cc\u06d2 \u0627\u0628 \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0628\u0646\u0627\u0646\u0627 <code>components\/chat.tsx<\/code> \u0641\u0627\u0626\u0644:<\/p>\n<pre><code class=\"language-tsx\">\/\/ components\/chat.tsx\n\"use client\";\n\nimport { useState } from \"react\";\nimport { useChat } from \"@ai-sdk\/react\";\nimport { DefaultChatTransport } from \"ai\";\nimport { Button } from \"@\/components\/ui\/button\";\nimport { Textarea } from \"@\/components\/ui\/textarea\";\nimport { ScrollArea } from \"@\/components\/ui\/scroll-area\";\nimport { Avatar, AvatarFallback } from \"@\/components\/ui\/avatar\";\nimport { cn } from \"@\/lib\/utils\";\n\nexport function Chat() {\n  const [input, setInput] = useState(\"\");\n\n  const { messages, sendMessage, status } = useChat({\n    transport: new DefaultChatTransport({ api: \"\/api\/chat\" }),\n  });\n\n  const isLoading =\n    status === \"submitted\" || status === \"streaming\";\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n\n    if (!input.trim()) return;\n\n    sendMessage({ text: input });\n    setInput(\"\");\n  };\n\n  return (\n    <div classname=\"flex h-screen flex-col\">\n      <scrollarea classname=\"flex-1 p-4\">\n        <div classname=\"mx-auto flex max-w-2xl flex-col gap-4\">\n          {messages.map((message) => (\n            <div key=\"{message.id}\" classname=\"{cn(\" gap-3=\"\" message.role=\"==\">\n              {message.role !== \"user\" && (\n                <avatar classname=\"h-8 w-8\">\n                  <avatarfallback>AI<\/avatarfallback>\n                <\/avatar>\n              )}\n\n              <p>\n                {message.parts.map((part, i) =>\n                  part.type === \"text\" ? (\n                    <span key=\"{i}\">{part.text}<\/span>\n                  ) : null\n                )}\n              <\/p>\n            <\/div>\n          ))}\n        <\/div>\n      <\/scrollarea>\n\n      <form onsubmit=\"{handleSubmit}\" classname=\"border-t p-4\">\n        <p>\n          <textarea value=\"{input}\" onchange=\"{(e)\"> setInput(e.target.value)}\n            placeholder=\"Message the assistant...\"\n            className=\"min-h-11 flex-1 resize-none\"\n            disabled={isLoading}\n          \/>\n\n          <button type=\"submit\" disabled=\"{isLoading\">\n            Send\n          <\/button>\n        <\/textarea><\/p>\n      <\/form>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n<p>\u0627\u062a\u0631 \u062c\u0627\u0624 <code><chat\/><\/code> ~ \u0645\u06cc\u06ba <code>app\/page.tsx<\/code> \u0627\u0648\u0631 \u0686\u0644\u0627\u0626\u06cc\u06ba <code>npm run dev<\/code>. \u0627\u0628 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u0648\u0631\u06a9\u0646\u06af \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06c1\u06d2\u06d4 \u0645\u0627\u0688\u0644 \u06a9\u06cc \u0637\u0631\u0641 \u0633\u06d2 \u0628\u06be\u06cc\u062c\u06d2 \u06af\u0626\u06d2 \u062a\u0645\u0627\u0645 \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u0627\u06cc\u06a9 \u06c1\u06cc \u0628\u0627\u0631 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0644\u0641\u0638 \u0628\u06c1 \u0644\u0641\u0638 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>status<\/code> \u062c\u0648\u0627\u0628 \u062c\u0627\u0631\u06cc \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0627\u0646 \u067e\u0679 \u06a9\u0648 \u063a\u06cc\u0631 \u0641\u0639\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0627\u06cc\u06a9 \u0635\u0627\u0641 \u0637\u0631\u06cc\u0642\u06c1 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062a\u0648\u062c\u06c1 \u0641\u0631\u0645\u0627\u0626\u06cc\u06ba <code>useChat<\/code> \u06c1\u0645 \u06cc\u06c1\u0627\u06ba \u0628\u06c1\u062a \u062e\u0627\u0645\u0648\u0634\u06cc \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0645\u06cc\u0633\u062c \u0644\u0633\u0679 \u06a9\u0627 \u0645\u0627\u0644\u06a9 \u06c1\u06d2\u060c \u0679\u06a9\u0691\u0648\u06ba \u06a9\u06d2 \u0622\u062a\u06d2 \u06c1\u06cc \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062c\u0648\u0691\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062c\u0645\u0639 \u06a9\u0631\u0627\u0646\u06d2\u060c \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af\u060c \u0627\u0648\u0631 \u0627\u0633\u0679\u06cc\u062c\u0646\u06af \u0644\u0627\u0626\u0641 \u0633\u0627\u0626\u06cc\u06a9\u0644 \u06a9\u0627 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0622\u067e \u06a9\u0648 \u062e\u0648\u062f \u0627\u0633\u06d2 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1 \u06c1\u0648\u06d4<\/p>\n<h3 id=\"heading-live-preview\">\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/09\/1789158345_777_Vercel-AI-SDK-\u0627\u0648\u0631-Shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-AI.webp\" alt=\"\u0686\u06cc\u0679 \u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1\" style=\"display: block;\" width=\"1920\" height=\"1440\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0686\u06cc\u0679 \u0648\u0646\u0688\u0648\u060c \u062c\u0648 \u0635\u0631\u0641 \u0628\u0648\u0644\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u060c \u06a9\u06cc \u062d\u062f\u0648\u062f \u06c1\u06cc\u06ba\u06d4 AI SDK \u0622\u067e \u06a9\u06d2 \u0645\u0627\u0688\u0644 \u06a9\u0648 JSON \u0627\u0633\u06a9\u06cc\u0645\u0627 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0622\u067e \u06a9\u06d2 \u06a9\u0648\u0688 \u0633\u06d2 \u0627\u0635\u0644 \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u0646 \u067e\u0679\u0633 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06d2 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633\u06d2 \u0645\u0631\u062d\u0644\u06c1 5 \u0645\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u06d2 \u0628\u0627\u0644\u06a9\u0644 \u0633\u0627\u062a\u06be \u0627\u067e\u0646\u06d2 \u0631\u0648\u0679 \u06c1\u06cc\u0646\u0688\u0644\u0631 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-typescript\">\/\/ app\/api\/chat\/route.ts\nimport { createOpenAICompatible } from \"@ai-sdk\/openai-compatible\";\nimport {\n  convertToModelMessages,\n  jsonSchema,\n  streamText,\n  tool,\n  type UIMessage,\n} from \"ai\";\n\nexport async function POST(req: Request) {\n  const { messages }: { messages: UIMessage[] } = await req.json();\n\n  const provider = createOpenAICompatible({\n    name: \"openai\",\n    baseURL: \"https:\/\/api.openai.com\/v1\",\n    apiKey: process.env.AI_API_KEY,\n  });\n\n  const result = streamText({\n    model: provider(\"gpt-4o-mini\"),\n    messages: convertToModelMessages(messages),\n\n    tools: {\n      getWeather: tool({\n        description: \"Get the current weather for a city\",\n\n        inputSchema: jsonSchema<{ city: string }>({\n          type: \"object\",\n\n          properties: {\n            city: {\n              type: \"string\",\n              description: \"The city to get the weather for\",\n            },\n          },\n\n          required: [\"city\"],\n        }),\n\n        execute: async ({ city }) => {\n          \/\/ Call a real weather API here in production\n          return {\n            city,\n            temperature: 22,\n            condition: \"clear\",\n          };\n        },\n      }),\n    },\n  });\n\n  return result.toUIMessageStreamResponse();\n}\n<\/code><\/pre>\n<p>\u0645\u0627\u0688\u0644 \u0641\u06cc\u0635\u0644\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633\u06d2 \u06a9\u0628 \u06a9\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 <code>getWeather<\/code>SDK \u06a9\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1 \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2: <code>execute<\/code> \u0622\u067e \u0627\u06cc\u06a9 \u0641\u0646\u06a9\u0634\u0646 \u0686\u0644\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0646\u062a\u0627\u0626\u062c \u06a9\u0648 \u067e\u06cc\u063a\u0627\u0645 \u06a9\u06d2 \u062d\u0635\u06d2 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u0627\u062a \u0686\u06cc\u062a \u0645\u06cc\u06ba \u0648\u0627\u067e\u0633 \u0628\u06be\u06cc\u062c \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0644\u0627\u0626\u0646\u0679 \u06a9\u0648 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u06d2 \u0639\u0644\u0627\u0648\u06c1 \u06a9\u0633\u06cc \u0627\u0636\u0627\u0641\u06cc \u067e\u0644\u0645\u0628\u0646\u06af \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 <code>part.type<\/code> \u0627\u06af\u0631 \u0622\u067e \u0679\u0648\u0644 \u06a9\u06d2 \u067e\u0631\u0632\u0648\u06ba \u06a9\u0648 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u0645\u062a\u0646 \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0627\u0646\u062f\u0627\u0632 \u0645\u06cc\u06ba \u067e\u06cc\u0634 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-8-prototype-the-ui-without-a-backend\">\u0645\u0631\u062d\u0644\u06c1 8: \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 UI \u067e\u0631\u0648\u0679\u0648 \u0679\u0627\u0626\u067e \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u062c\u0646 \u0645\u0633\u0627\u0626\u0644 \u06a9\u0627 \u0622\u067e \u06a9\u0648 \u0645\u0633\u0644\u0633\u0644 \u0633\u0627\u0645\u0646\u0627 \u06a9\u0631\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627 \u0648\u06c1 \u06cc\u06c1 \u06c1\u06cc\u06ba: \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u06cc\u0627 API \u06a9\u0644\u06cc\u062f \u062a\u06cc\u0627\u0631 \u06c1\u0648\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0645\u06cc\u06ba \u0686\u06cc\u0679 UI \u06a9\u0648 \u0686\u0645\u06a9\u0627\u0646\u0627 \u0686\u0627\u06c1\u0648\u06ba \u06af\u0627\u060c \u0628\u0634\u0645\u0648\u0644 \u0648\u0627\u0626\u0679 \u0627\u0633\u067e\u06cc\u0633\u060c \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646\u0632\u060c \u0627\u0648\u0631 \u0627\u0646\u0641\u0631\u0646\u0633 \u0628\u0644\u0627\u06a9\u0633 \u06a9\u0648 \u06a9\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0637\u0631\u06cc\u0642\u06d2\u06d4 \u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u067e\u06a9\u0633\u0644 \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0627\u0635\u0644 \u0645\u0627\u0688\u0644 \u06a9\u06d2 \u062e\u0644\u0627\u0641 \u0627\u0633 UI \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u0646\u0627 \u0633\u0633\u062a \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u06a9\u06cc \u0642\u06cc\u0645\u062a \u0679\u0648\u06a9\u0646 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u06c1\u06d2 <strong>shadcn AI SDK \u0645\u062f\u062f\u06af\u0627\u0631<\/strong> \u067e\u06cc\u06a9\u06cc\u062c \u062d\u0644 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u062c\u0639\u0644\u06cc \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0648 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0646\u06c1\u06cc \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0648 \u0633\u0679\u0631\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>useChat<\/code> \u06c1\u06a9\u0633 \u062c\u0648 \u0622\u067e \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0633\u0631\u0648\u0631\u0632\u060c \u0645\u0627\u0688\u0644\u0632\u060c \u06cc\u0627 API \u06a9\u06cc\u0632 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">npm install @shadcn\/helpers\n<\/code><\/pre>\n<pre><code class=\"language-tsx\">import { createChat } from \"@shadcn\/helpers\";\nimport { useChat } from \"@ai-sdk\/react\";\n\nconst chat = createChat()\n  .user(\"What changed in the last release?\")\n  .assistant(\"The release added keyboard shortcuts and faster search.\");\n\nfunction ChatPreview() {\n  const { messages } = useChat({\n    messages: chat.get(0),\n    transport: chat.transport(),\n  });\n\n  \/\/ render `messages` exactly like you would with a real backend\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u0646 \u062a\u0645\u0627\u0645 \u062d\u0635\u0648\u06ba \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0646\u06c1\u06cc\u06ba AI SDK \u0633\u0645\u062c\u06be\u062a\u0627 \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u0627\u0646\u0641\u0631\u0646\u0633\u0632\u060c \u0679\u0648\u0644 \u06a9\u0627\u0644\u0632\u060c \u0641\u0627\u0626\u0644\u0632\u060c \u0627\u0648\u0631 \u0630\u0631\u0627\u0626\u0639\u060c \u0627\u0648\u0631 \u06c1\u0631 \u0628\u0627\u0631 \u0645\u062a\u0639\u06cc\u0646 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633\u0679\u0631\u06cc\u0645\u0632\u06d4 \u06cc\u06c1 \u062a\u0648\u0644\u06cc\u062f\u06cc \u0688\u06cc\u0645\u0648 \u06cc\u0627 UI \u0679\u06cc\u0633\u0679 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06be\u06cc \u0628\u06c1\u062a \u0645\u0641\u06cc\u062f \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0637\u0631\u062d\u060c \u0622\u067e \u0627\u06cc\u06a9 \u067e\u0648\u0631\u0627 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0628\u0646\u0627 \u0627\u0648\u0631 \u0628\u06c1\u062a\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u067e\u06be\u0631 \u0627\u0633\u06d2 \u062d\u0642\u06cc\u0642\u06cc \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0633\u06d2 \u0628\u062f\u0644 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>\/api\/chat<\/code> \u062c\u06cc\u0633\u06d2 \u06c1\u06cc \u0622\u067e \u06a9\u0627 \u067e\u0633\u062f\u06cc\u062f \u062a\u06cc\u0627\u0631 \u06c1\u0648 \u0631\u0648\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-turning-your-chat-into-a-full-product\">\u0686\u06cc\u0679 \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u06a9\u0645\u0644 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0686\u06cc\u0679 \u0648\u0646\u0688\u0648\u0632 \u0634\u0627\u0630 \u0648 \u0646\u0627\u062f\u0631 \u06c1\u06cc \u0627\u0633\u0679\u06cc\u0646\u0688 \u0627\u06a9\u06cc\u0644\u06cc \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0634\u0631\u0648\u0639 \u06c1\u0648\u0646\u06d2 \u0627\u0648\u0631 \u0686\u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0622\u067e \u06a9\u0648 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0627\u0636\u06cc \u06a9\u06cc \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u060c \u0645\u0627\u0688\u0644 \u06a9\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0633\u06cc\u0679\u0646\u06af \u067e\u06cc\u0646\u0644\u060c \u0627\u0648\u0631 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0646\u062a\u0638\u0645 \u06a9\u0627 \u0645\u0646\u0638\u0631 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u06cc\u06c1 \u0679\u06cc\u06a9\u0633\u0679 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0645\u0633\u0626\u0644\u06c1 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0634\u06cc\u0644 \u0627\u0648\u0631 \u0688\u06cc\u0679\u0627 \u0679\u06cc\u0628\u0644 \u0627\u06cc\u0631\u06cc\u0627\u0632 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0679\u06cc\u0645\u06cc\u06ba \u0627\u0633 \u0634\u06cc\u0644 \u06a9\u0648 \u062e\u0648\u062f \u0631\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u062a\u0639\u0645\u06cc\u0631 \u0634\u062f\u06c1 \u0627\u0646\u062a\u0638\u0627\u0645\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u062a\u06cc\u0627\u0631 \u0634\u062f\u06c1 <strong>shadcn \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688<\/strong>Shadcn Space&#8217;s \u06a9\u06cc \u0637\u0631\u062d\u060c \u06cc\u06c1 \u0627\u067e\u0646\u06d2 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0679\u0648\u0644\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0636\u0631\u0648\u0631\u06cc \u0644\u06d2 \u0622\u0624\u0679\u060c \u0688\u06cc\u0679\u0627 \u0679\u06cc\u0628\u0644\u0632\u060c \u0686\u0627\u0631\u0679\u0633 \u0627\u0648\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0622\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06cc \u0686\u06cc\u0679 \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u0648 \u0627\u06cc\u06a9 \u06af\u06be\u0631 \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u0633\u0627\u0626\u0688 \u0628\u0627\u0631\u0632 \u0627\u0648\u0631 \u0633\u06cc\u0679\u0646\u06af\u0632 \u06a9\u06d2 \u0635\u0641\u062d\u0627\u062a \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0648\u0631 \u0627\u06af\u0631 \u0622\u067e \u062e\u0648\u062f \u0686\u06cc\u0679 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0628\u0646\u0627\u0646\u0627 \u0686\u06be\u0648\u0691\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06cc\u06c1 \u0627\u06cc\u06a9 \u062d\u0642\u06cc\u0642\u06cc \u0622\u067e\u0634\u0646 \u06c1\u06d2\u06d4 \u06a9\u0686\u06be \u0679\u06cc\u0645\u06cc\u06ba \u0634\u06cc\u0644\u0641 \u0633\u06d2 \u06c1\u06cc \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 <strong>shadcn AI \u0686\u06cc\u0679 \u0627\u06cc\u067e<\/strong> \u06cc\u06c1 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u06d2 \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u0632\u060c \u0645\u0627\u0631\u06a9 \u0688\u0627\u0624\u0646 \u0627\u0648\u0631 \u06a9\u0648\u0688 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af\u060c \u0627\u0648\u0631 \u0679\u0648\u0644 \u06a9\u0627\u0644 \u0648\u06cc\u0698\u0648\u0644\u0627\u0626\u0632\u06cc\u0634\u0646\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0622\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06c1\u0645 \u0622\u062e\u0631 \u0645\u06cc\u06ba \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview-of-full-chat-app\"><strong>\u067e\u0648\u0631\u06cc \u0686\u06cc\u0679 \u0627\u06cc\u067e \u06a9\u0627 \u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/strong><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/09\/1789158345_612_Vercel-AI-SDK-\u0627\u0648\u0631-Shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-AI.webp\" alt=\"\u067e\u0648\u0631\u06cc \u0686\u06cc\u0679 \u0627\u06cc\u067e \u06a9\u0627 \u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1\" style=\"display: block;\" width=\"1920\" height=\"1440\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-speed-up-shadcn-development-with-an-mcp-server\">MCP \u0633\u0631\u0648\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be shadcn \u06a9\u06cc \u062a\u0631\u0642\u06cc \u06a9\u0648 \u062a\u06cc\u0632 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u062a\u0627\u06c1\u0645\u060c \u0686\u06cc\u0679 UI \u0628\u0646\u0627\u062a\u06d2 \u0648\u0642\u062a\u060c \u06a9\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0633\u06d2 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u062c\u0632\u0627\u0621 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u062a\u06cc\u0632 \u062a\u0631 \u0637\u0631\u06cc\u0642\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u0639\u0646\u06cc\u060c \u0627\u06cc\u06a9 \u0645\u0627\u0688\u0644 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u067e\u0631\u0648\u0679\u0648\u06a9\u0648\u0644 (MCP) \u0633\u0631\u0648\u0631 \u062c\u0648 AI \u06a9\u0648\u0688\u0646\u06af \u0645\u0639\u0627\u0648\u0646\u06cc\u0646 \u06a9\u0648 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0631\u062c\u0633\u0679\u0631\u06cc \u062a\u06a9 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>Shadcn MCP \u0633\u0631\u0648\u0631 \u0679\u0648\u0644\u0632 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u06cc\u0633\u06d2 \u06a9\u0644\u0627\u0688 \u06a9\u0648\u0688\u060c \u06a9\u0631\u0633\u0631\u060c \u0627\u0648\u0631 \u0648\u0646\u0688 \u0633\u0631\u0641\u06d4 <strong>Shadcn \u06a9\u06cc \u062c\u06af\u06c1<\/strong> \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u06d4 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0646\u0633\u0679\u0627\u0644\u06cc\u0634\u0646 \u06a9\u0645\u0627\u0646\u0688\u0632 \u06a9\u0648 \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u0627\u0633\u0633\u0679\u0646\u0679 \u0633\u06d2 \u0627\u067e\u0646\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0648\u0686\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 &quot;\u0627\u0648\u062a\u0627\u0631 \u0627\u0648\u0631 \u0679\u0627\u0626\u0645 \u0627\u0633\u0679\u06cc\u0645\u067e \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u06cc\u0633\u062c \u0628\u0628\u0644 \u06a9\u0627 \u062c\u0632\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba&#8221; \u0627\u0648\u0631 \u06cc\u06c1 \u067e\u0631\u0627\u0646\u06d2 \u0679\u0631\u06cc\u0646\u0646\u06af \u0688\u06cc\u0679\u0627 \u0633\u06d2 \u0627\u0646\u062f\u0627\u0632\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0635\u0644\u060c \u062a\u0627\u0632\u06c1 \u062a\u0631\u06cc\u0646 \u062c\u0632 \u06a9\u06cc \u062a\u0639\u0631\u06cc\u0641\u06cc\u06ba \u062d\u0627\u0635\u0644 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u0627\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u0627 \u06a9\u0644\u0627\u0688 \u06a9\u0648\u0688 \u06a9\u06cc \u0637\u0631\u0641 \u0633\u06d2 \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0646 \u06a9\u0645\u0627\u0646\u0688 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-bash\">claude mcp add shadcnspace-mcp -- npx -y shadcnspace-mcp@latest\n<\/code><\/pre>\n<p>\u062f\u0648\u0633\u0631\u06d2 \u0627\u06cc\u0688\u06cc\u0679\u0631\u0632 \u0645\u06cc\u06ba\u060c MCP \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0635\u0631\u0641 \u0648\u06c1\u06cc \u06a9\u0645\u0627\u0646\u0688\u0632 \u062d\u0630\u0641 \u06a9\u0631\u06cc\u06ba\u06d4 \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 <code>.cursor\/mcp.json<\/code> \u06a9\u0631\u0633\u0631 \u067e\u0631\u06d4 \u067e\u0648\u0631\u06cc <strong>MCP \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06af\u0627\u0626\u06cc\u0688<\/strong> \u06c1\u0645 \u06c1\u0631 \u0645\u0639\u0627\u0648\u0646 \u0627\u06cc\u0688\u06cc\u0679\u0631 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0622\u067e \u06a9\u06cc \u0631\u06c1\u0646\u0645\u0627\u0626\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <strong>Shadcn MCP<\/strong> \u0635\u0641\u062d\u06c1 \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u06a9\u06cc\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a\u060c \u0627\u0646\u0633\u0679\u0627\u0644 \u0627\u0648\u0631 \u062a\u062e\u0644\u06cc\u0642 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u0648 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u062f\u06cc\u06a9\u06be\u0646\u0627 \u067e\u0633\u0646\u062f \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0635\u0631 \u0648\u0627\u06a9 \u062a\u06be\u0631\u0648 \u06c1\u06d2 \u062c\u0648 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u0622\u062e\u0631 \u062a\u06a9 \u0627\u0646\u06c1\u06cc \u0645\u0631\u0627\u062d\u0644 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"How to Connect @ShadcnSpace Cloud MCP Server to @lovable @Boltdotnew #v0\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ymTlzbkvvPk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/p>\n<h2 id=\"heading-a-few-things-to-handle-before-you-ship\">\u0634\u067e\u0646\u06af \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u0646\u062f \u0686\u06cc\u0632\u0648\u06ba \u06a9\u0627 \u062e\u06cc\u0627\u0644 \u0631\u06a9\u06be\u0646\u0627:<\/h2>\n<p>\u0627\u0648\u067e\u0631 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0648\u0631\u0698\u0646 \u062c\u0627\u0646 \u0628\u0648\u062c\u06be \u06a9\u0631 \u06a9\u0645 \u0633\u06d2 \u06a9\u0645 \u06c1\u06d2\u06d4 \u0627\u0633 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631 \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u0622\u062c\u0627\u0626\u06d2\u060c \u0627\u0633\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u0634\u0631\u062d \u06a9\u06cc \u062d\u062f<\/strong> \u0622\u067e \u06a9\u0627 <code>\/api\/chat<\/code> \u0631\u0627\u0633\u062a\u06c1 \u0644\u0627\u0645\u062d\u062f\u0648\u062f \u0686\u06cc\u0679 \u0627\u06cc\u0646\u0688 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u0628\u06c1\u062a \u0628\u0691\u06d2 \u0645\u0627\u0688\u0644 \u0628\u0644 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u0627 \u0627\u06cc\u06a9 \u0622\u0633\u0627\u0646 \u0637\u0631\u06cc\u0642\u06c1 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u06a9\u0627\u0648\u0679 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u0627<\/strong> \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u062f\u0631\u0645\u06cc\u0627\u0646\u06cc \u0631\u062f\u0639\u0645\u0644 \u06a9\u0648 \u0631\u0648\u06a9\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u06ba\u06d4 <code>useChat<\/code> \u06cc\u06c1 \u0641\u0648\u0631\u06cc \u0645\u062f\u062f \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>stop()<\/code> \u0641\u0646\u06a9\u0634\u0646<\/p>\n<\/li>\n<li>\n<p><strong>\u063a\u0644\u0637\u06cc \u06a9\u06cc \u062d\u062f<\/strong> \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06af\u0631 \u0633\u0644\u0633\u0644\u06c1 \u0646\u06cc\u0686\u06d2 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u06cc\u0627 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u0646\u06cc\u0686\u06d2 \u0686\u0644\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u067e\u0648\u0631\u0627 \u0635\u0641\u062d\u06c1 \u0646\u06cc\u0686\u06d2 \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0633\u0631\u0679\u06cc\u0641\u06cc\u06a9\u06cc\u0634\u0646<\/strong>\u062c\u0628 \u0622\u067e \u06a9\u0648 \u062c\u0648\u0627\u0628\u0627\u062a \u06cc\u0627 \u06af\u0641\u062a\u06af\u0648 \u06a9\u06cc \u0633\u0631\u06af\u0632\u0634\u062a \u06a9\u06d2 \u062f\u0627\u0626\u0631\u06c1 \u06a9\u0627\u0631 \u06a9\u0648 \u0645\u062e\u0635\u0648\u0635 \u0635\u0627\u0631\u0641\u06cc\u0646 \u062a\u06a9 \u0645\u062d\u062f\u0648\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u063a\u06cc\u0631 \u0645\u0644\u06a9\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0648\u06c1\u06cc \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u06cc\u06ba \u06c1\u06cc\u06ba \u062c\u0648 API \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u0631\u0627\u0633\u062a\u0648\u06ba \u067e\u0631 \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0686\u06cc\u0679 \u06a9\u06d2 \u0627\u062e\u062a\u062a\u0627\u0645\u06cc \u0646\u06a9\u0627\u062a \u0628\u06be\u0648\u0644\u0646\u0627 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u062a\u0631\u0642\u06cc \u06a9\u0627 \u062e\u0648\u0634\u06af\u0648\u0627\u0631 \u0631\u0627\u0633\u062a\u06c1 \u0628\u06c1\u062a \u06c1\u0645\u0648\u0627\u0631 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-skip-the-boilerplate-with-a-ready-made-template\">\u0631\u06cc\u0688\u06cc \u0645\u06cc\u0688 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0648\u0627\u0626\u0644\u0631 \u067e\u0644\u06cc\u0679 \u06a9\u0648 \u0686\u06be\u0648\u0691 \u062f\u06cc\u06ba\u06d4<\/h2>\n<p>\u0645\u0646\u062f\u0631\u062c\u06c1 \u0628\u0627\u0644\u0627 \u0633\u0628\u06be\u06cc \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u062f\u06cc\u06ba \u06af\u06d2 \u062c\u0648 \u062d\u0642\u06cc\u0642\u062a \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0648\u0631\u0698\u0646 \u06c1\u06d2\u06d4 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0686\u06cc\u0679 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0688\u0627\u0626\u06cc\u0644\u0627\u06af \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u060c \u067e\u0631\u0627\u062c\u06cc\u06a9\u0679 \u06af\u0631\u0648\u067e\u0646\u06af\u060c \u0645\u0627\u0631\u06a9 \u0688\u0627\u0624\u0646 \u0627\u0648\u0631 \u0633\u0646\u0679\u06cc\u06a9\u0633 \u06c1\u0627\u0626\u06cc \u0644\u0627\u0626\u0679\u0646\u06af \u06a9\u0648\u0688 \u0628\u0644\u0627\u06a9\u0633\u060c \u0627\u06cc\u06a9 \u0627\u0646\u0641\u0631\u0646\u0633 \u067e\u06cc\u0646\u0644\u060c \u0648\u0627\u0626\u0633 \u0627\u0646 \u067e\u0679\u060c \u0627\u0648\u0631 \u0645\u0627\u0688\u0644 \u0633\u0648\u0626\u0686\u0646\u06af \u06a9\u06d2 \u0644\u06cc\u06d2 \u0633\u06cc\u0679 \u0627\u067e \u0627\u0633\u06a9\u0631\u06cc\u0646\u0632 \u06a9\u06cc \u0628\u06be\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u0633\u0628 \u06a9\u0648 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0627\u067e\u0646\u06d2 \u0622\u067e \u0645\u06cc\u06ba \u06c1\u0641\u062a\u06d2 \u0644\u06af \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u0633 \u0634\u06cc\u0644 \u06a9\u0648 \u062e\u0648\u062f \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648\u060c \u0645\u06cc\u06ba \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u0648\u06ba: <strong>shadcn AI \u0686\u06cc\u0679 \u0627\u06cc\u067e<\/strong> \u06cc\u06c1 Shadcn Space \u0633\u06d2 \u0627\u06cc\u06a9 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u0633\u06cc \u0641\u0627\u0624\u0646\u0688\u06cc\u0634\u0646 \u067e\u0631 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u0627 \u0627\u0633 \u0645\u0636\u0645\u0648\u0646 \u0645\u06cc\u06ba \u0627\u062d\u0627\u0637\u06c1 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 (Next.js, Vercel AI SDK\u060c \u0627\u0648\u0631 shadcn ui)\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u0645\u06cc\u06ba \u0633\u0627\u0626\u0688 \u0628\u0627\u0631\u0632\u060c \u0627\u0646\u0641\u0631\u0646\u0633 \u0627\u0648\u0631 \u0679\u0648\u0644 \u06a9\u0627\u0644 UI\u060c \u0641\u0627\u0626\u0644 \u0627\u0679\u06cc\u0686\u0645\u0646\u0679\u060c \u0627\u0648\u0631 \u0645\u0644\u0679\u06cc \u067e\u0631\u0648\u0648\u0627\u0626\u06cc\u0688\u0631 \u0645\u0627\u0688\u0644 \u0633\u0648\u0626\u0686\u0646\u06af \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0645\u0646\u0633\u0644\u06a9 \u06c1\u06d2\u06d4 \u0622\u067e \u0633\u06cc\u0679 \u06a9\u0631\u06cc\u06ba <code>AI_PROVIDER<\/code> \u0627\u0648\u0631 <code>AI_API_KEY<\/code> \u0622\u067e \u0645\u06a9\u0645\u0644 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0635\u0644 \u0645\u0627\u0688\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0627\u062a \u0686\u06cc\u062a \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u0686\u06cc\u06a9 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba <strong>\u0644\u0627\u0626\u06cc\u0648 \u0688\u06cc\u0645\u0648<\/strong> \u06cc\u06c1 \u0641\u06cc\u0635\u0644\u06c1 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06a9\u06c1 \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u0632\u060c \u0633\u0679\u0631\u06cc\u0645\u0646\u06af\u060c \u0627\u0648\u0631 \u0679\u0648\u0644 \u06a9\u0627\u0644\u0632 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba \u0628\u0627\u0644\u06a9\u0644 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u062e\u0648\u062f \u0628\u0646\u0627\u0626\u06cc\u06ba \u06cc\u0627 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-wrapping-up\">\u062e\u062a\u0645<\/h2>\n<p>\u0627\u0628 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u06cc\u06a9 \u0686\u06cc\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06c1\u06d2 \u062c\u0648 \u062d\u0642\u06cc\u0642\u06cc \u062c\u0648\u0627\u0628\u0627\u062a \u06a9\u0648 \u0633\u0679\u0631\u06cc\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0679\u0648\u0644\u0632 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646 \u0627\u062c\u0632\u0627\u0621 \u067e\u0631 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u06d2 \u0645\u0627\u0644\u06a9 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u0632\u0627\u062f\u0627\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u0642\u0627\u0628\u0644 \u062a\u062f\u0648\u06cc\u0646 \u06c1\u06cc\u06ba\u06d4 \u0627\u0648\u0631 AI \u0645\u0635\u0646\u0648\u0639\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06cc\u06c1 \u0633\u0628 \u0622\u067e \u06a9\u06d2 \u062e\u06cc\u0627\u0644 \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u0627\u06c1\u0645 \u06c1\u06d2\u06d4 Vercel AI SDK \u0633\u062e\u062a \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af \u0627\u0648\u0631 \u0645\u0627\u0688\u0644 \u0645\u0646\u0637\u0642 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 shadcn\/ui \u0622\u067e \u06a9\u0648 \u0627\u0633 \u0628\u0627\u062a \u067e\u0631 \u0645\u06a9\u0645\u0644 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06c1 \u0645\u0646\u0637\u0642 \u062f\u0631\u0627\u0635\u0644 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u06a9\u06cc\u0633\u06d2 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u0633\u06d2\u060c \u0642\u062f\u0631\u062a\u06cc \u0627\u06af\u0644\u0627 \u0645\u0631\u062d\u0644\u06c1 \u0627\u06cc\u06a9 \u062d\u0642\u06cc\u0642\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u0648 \u062c\u0648\u0691\u0646\u0627\u060c \u0627\u0648\u067e\u0631 \u062a\u0635\u0646\u06cc\u0641 \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u0627\u060c \u0627\u0648\u0631 \u0641\u06cc\u0635\u0644\u06c1 \u06a9\u0631\u0646\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u0622\u067e \u0627\u067e\u0646\u06d2 UI \u06a9\u0648 \u0628\u0691\u06be\u0627\u0646\u0627 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u06cc\u0627 \u0627\u0633 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u067e\u0631\u0648\u0688\u06a9\u0679 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2\u060c \u062f\u0648\u0646\u0648\u06ba \u0631\u0627\u0633\u062a\u06d2 \u0628\u06c1\u062a \u0622\u0633\u0627\u0646 \u06c1\u0648 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u0628 \u0622\u067e \u0633\u0645\u062c\u06be \u06af\u0626\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u0635\u0644 \u0645\u06cc\u06ba \u06c1\u0688 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u06a9\u06cc\u0627 \u06c1\u0648 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-resources\"><strong>\u0648\u0633\u0627\u0626\u0644<\/strong><\/h2>\n<p>\u0645\u06cc\u06ba \u0646\u06d2 \u06cc\u06c1 \u0645\u0636\u0645\u0648\u0646 \u0622\u0634\u0648\u062a\u0648\u0634 \u0631\u062f\u0627 (\u0633\u06cc\u0646\u0626\u0631 \u0641\u0631\u0646\u0679 \u0627\u06cc\u0646\u0688 \u0688\u06cc\u0648\u0644\u067e\u0631) \u06a9\u06cc \u0645\u062f\u062f \u0633\u06d2 \u0644\u06a9\u06be\u0627 \u06c1\u06d2\u06d4 LinkedIn \u067e\u0631 \u062c\u0691\u06cc\u06ba\u06d4<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u06c1\u0631 \u062f\u0648\u0633\u0631\u06cc AI \u067e\u0631\u0648\u0688\u06a9\u0679 \u062c\u0633\u06d2 \u0622\u067e \u0622\u062c \u06a9\u06be\u0648\u0644\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06c1\u06d2: \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u060c \u0646\u06cc\u0686\u06d2 \u0627\u06cc\u06a9 \u0679\u06cc\u06a9\u0633\u0679 \u0628\u0627\u06a9\u0633\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0679\u0648\u06a9\u0646 \u0645\u06cc\u06ba \u0686\u0644\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u0644\u0641\u0627\u0638\u06d4 \u06cc\u06c1 \u0622\u0633\u0627\u0646 \u0644\u06af \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633\u06d2 \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u0628\u0646\u0627\u0646\u0627 \u0622\u0633\u0627\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2. \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06cc \u0631\u0633\u0627\u0626\u06cc \u0627\u0648\u0631 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0633\u0679\u0631\u06cc\u0645\u0646\u06af [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":29169,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-29168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/29168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=29168"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/29168\/revisions"}],"predecessor-version":[{"id":29170,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/29168\/revisions\/29170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/29169"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=29168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=29168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=29168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}