Vercel AI Elements: مكوّنات React جاهزة لواجهات دردشة الذكاء الاصطناعي في Next.js

npx create-next-app@latest noqta-chat \
  --typescript --tailwind --app --eslint --src-dir
cd noqta-chat

npx shadcn@latest init

npx ai-elements@latest

npm install ai @ai-sdk/react @ai-sdk/openai @ai-sdk/anthropic zod

OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...

import { openai } from "@ai-sdk/openai";
import { anthropic } from "@ai-sdk/anthropic";
import {
  convertToModelMessages,
  streamText,
  type UIMessage,
} from "ai";
 
export const maxDuration = 30;
 
type ChatBody = {
  messages: UIMessage[];
  model?: string;
  webSearch?: boolean;
};
 
export async function POST(req: Request) {
  const { messages, model = "gpt-4o", webSearch = false }: ChatBody =
    await req.json();
 
  const provider = model.startsWith("claude")
    ? anthropic(model)
    : openai(model);
 
  const result = streamText({
    model: provider,
    system: webSearch
      ? "You can search the web. Cite sources you used."
      : "You are a helpful assistant. Be concise and accurate.",
    messages: convertToModelMessages(messages),
  });
 
  return result.toUIMessageStreamResponse({
    sendReasoning: true,
    sendSources: true,
  });
}

"use client";
 
import { useState } from "react";
import { useChat } from "@ai-sdk/react";
import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationScrollButton,
} from "@/components/ai-elements/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai-elements/message";
import {
  PromptInput,
  type PromptInputMessage,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai-elements/prompt-input";
import { MessageSquare } from "lucide-react";
 
export default function ChatPage() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status } = useChat();
 
  const handleSubmit = (message: PromptInputMessage) => {
    if (!message.text.trim()) return;
    sendMessage({ text: message.text });
    setInput("");
  };
 
  return (
    <main className="mx-auto flex h-dvh max-w-3xl flex-col p-6">
      <Conversation className="flex-1">
        <ConversationContent>
          {messages.length === 0 ? (
            <ConversationEmptyState
              icon={<MessageSquare className="size-12" />}
              title="Start a conversation"
              description="Ask Noqta Chat anything"
            />
          ) : (
            messages.map((message) => (
              <Message from={message.role} key={message.id}>
                <MessageContent>
                  {message.parts.map((part, i) =>
                    part.type === "text" ? (
                      <MessageResponse key={`${message.id}-${i}`}>
                        {part.text}
                      </MessageResponse>
                    ) : null
                  )}
                </MessageContent>
              </Message>
            ))
          )}
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>
 
      <PromptInput onSubmit={handleSubmit} className="mt-4">
        <PromptInputTextarea
          value={input}
          placeholder="Send a message..."
          onChange={(e) => setInput(e.currentTarget.value)}
        />
        <PromptInputSubmit
          status={status === "streaming" ? "streaming" : "ready"}
          disabled={!input.trim()}
        />
      </PromptInput>
    </main>
  );
}

"use client";
 
import type { UIMessage } from "ai";
import {
  MessageResponse,
} from "@/components/ai-elements/message";
 
export function ChatMessageParts({ message }: { message: UIMessage }) {
  return (
    <>
      {message.parts.map((part, i) => {
        const key = `${message.id}-${i}`;
 
        switch (part.type) {
          case "text":
            return <MessageResponse key={key}>{part.text}</MessageResponse>;
          default:
            return null;
        }
      })}
    </>
  );
}

"use client";
 
import type { UIMessage } from "ai";
import { MessageResponse } from "@/components/ai-elements/message";
import {
  Reasoning,
  ReasoningContent,
  ReasoningTrigger,
} from "@/components/ai-elements/reasoning";
 
type Props = {
  message: UIMessage;
  isLastMessage: boolean;
  isStreaming: boolean;
};
 
export function ChatMessageParts({ message, isLastMessage, isStreaming }: Props) {
  const reasoningParts = message.parts.filter((p) => p.type === "reasoning");
  const reasoningText = reasoningParts.map((p) => p.text).join("\n\n");
  const lastPart = message.parts.at(-1);
  const isReasoningStreaming =
    isLastMessage && isStreaming && lastPart?.type === "reasoning";
 
  return (
    <>
      {reasoningParts.length > 0 && (
        <Reasoning className="w-full" isStreaming={isReasoningStreaming}>
          <ReasoningTrigger />
          <ReasoningContent>{reasoningText}</ReasoningContent>
        </Reasoning>
      )}
 
      {message.parts.map((part, i) => {
        const key = `${message.id}-${i}`;
        if (part.type === "text") {
          return <MessageResponse key={key}>{part.text}</MessageResponse>;
        }
        return null;
      })}
    </>
  );
}

{messages.map((message, index) => (
  <Message from={message.role} key={message.id}>
    <MessageContent>
      <ChatMessageParts
        message={message}
        isLastMessage={index === messages.length - 1}
        isStreaming={status === "streaming"}
      />
    </MessageContent>
  </Message>
))}

import {
  PromptInput,
  PromptInputBody,
  PromptInputButton,
  PromptInputFooter,
  type PromptInputMessage,
  PromptInputSelect,
  PromptInputSelectContent,
  PromptInputSelectItem,
  PromptInputSelectTrigger,
  PromptInputSelectValue,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai-elements/prompt-input";
import { GlobeIcon } from "lucide-react";
 
const models = [
  { id: "gpt-4o", name: "GPT-4o" },
  { id: "claude-sonnet-4-6", name: "Claude Sonnet 4.6" },
];
 
// inside ChatPage:
const [model, setModel] = useState(models[0].id);
const [webSearch, setWebSearch] = useState(false);
 
const handleSubmit = (message: PromptInputMessage) => {
  if (!message.text.trim() && !message.files?.length) return;
  sendMessage(
    { text: message.text, files: message.files },
    { body: { model, webSearch } }
  );
  setInput("");
};
 
return (
  // ...Conversation above...
  <PromptInput onSubmit={handleSubmit} className="mt-4" globalDrop multiple>
    <PromptInputBody>
      <PromptInputTextarea
        value={input}
        onChange={(e) => setInput(e.currentTarget.value)}
        placeholder="Ask anything..."
      />
    </PromptInputBody>
    <PromptInputFooter>
      <PromptInputTools>
        <PromptInputButton
          onClick={() => setWebSearch(!webSearch)}
          variant={webSearch ? "default" : "ghost"}
          tooltip={{ content: "Search the web" }}
        >
          <GlobeIcon size={16} />
          <span>Search</span>
        </PromptInputButton>
 
        <PromptInputSelect value={model} onValueChange={setModel}>
          <PromptInputSelectTrigger>
            <PromptInputSelectValue />
          </PromptInputSelectTrigger>
          <PromptInputSelectContent>
            {models.map((m) => (
              <PromptInputSelectItem key={m.id} value={m.id}>
                {m.name}
              </PromptInputSelectItem>
            ))}
          </PromptInputSelectContent>
        </PromptInputSelect>
      </PromptInputTools>
      <PromptInputSubmit
        status={status === "streaming" ? "streaming" : "ready"}
      />
    </PromptInputFooter>
  </PromptInput>
);

"use client";
 
import {
  Attachment,
  AttachmentPreview,
  AttachmentRemove,
  Attachments,
} from "@/components/ai-elements/attachments";
import { usePromptInputAttachments } from "@/components/ai-elements/prompt-input";
 
export function AttachmentsDisplay() {
  const attachments = usePromptInputAttachments();
 
  if (attachments.files.length === 0) return null;
 
  return (
    <Attachments variant="inline">
      {attachments.files.map((attachment) => (
        <Attachment
          data={attachment}
          key={attachment.id}
          onRemove={() => attachments.remove(attachment.id)}
        >
          <AttachmentPreview />
          <AttachmentRemove />
        </Attachment>
      ))}
    </Attachments>
  );
}

import {
  PromptInputActionAddAttachments,
  PromptInputActionMenu,
  PromptInputActionMenuContent,
  PromptInputActionMenuTrigger,
  PromptInputHeader,
} from "@/components/ai-elements/prompt-input";
import { AttachmentsDisplay } from "@/components/attachments-display";
 
// inside <PromptInput>:
<PromptInputHeader>
  <AttachmentsDisplay />
</PromptInputHeader>
<PromptInputBody>
  <PromptInputTextarea ... />
</PromptInputBody>
<PromptInputFooter>
  <PromptInputTools>
    <PromptInputActionMenu>
      <PromptInputActionMenuTrigger />
      <PromptInputActionMenuContent>
        <PromptInputActionAddAttachments />
      </PromptInputActionMenuContent>
    </PromptInputActionMenu>
    {/* ...web search button, model select... */}
  </PromptInputTools>
  <PromptInputSubmit ... />
</PromptInputFooter>

import {
  Tool,
  ToolContent,
  ToolHeader,
  ToolInput,
  ToolOutput,
} from "@/components/ai-elements/tool";
 
// inside the parts.map switch:
default: {
  if (part.type.startsWith("tool-")) {
    const toolPart = part as Extract<typeof part, { type: `tool-${string}` }>;
    return (
      <Tool key={key} defaultOpen={toolPart.state !== "output-available"}>
        <ToolHeader type={toolPart.type} state={toolPart.state} />
        <ToolContent>
          <ToolInput input={toolPart.input} />
          {toolPart.output !== undefined && (
            <ToolOutput
              output={toolPart.output}
              errorText={toolPart.errorText}
            />
          )}
        </ToolContent>
      </Tool>
    );
  }
  return null;
}

import {
  Source,
  Sources,
  SourcesContent,
  SourcesTrigger,
} from "@/components/ai-elements/source";
 
// at the top of ChatMessageParts return:
const sourceParts = message.parts.filter((p) => p.type === "source-url");
 
{sourceParts.length > 0 && (
  <Sources>
    <SourcesTrigger count={sourceParts.length} />
    <SourcesContent>
      {sourceParts.map((s, i) => (
        <Source
          key={`${message.id}-src-${i}`}
          href={s.url}
          title={s.title ?? s.url}
        />
      ))}
    </SourcesContent>
  </Sources>
)}