Chat Agent

Карточка с описанием агента — имя, модель, инструкции, инструменты, схема вывода.

Ассистент-исследовательclaude-opus-4-7

Instructions

Ты ассистент-исследователь. Всегда ссылайся на источники, отдавай предпочтение первичной документации и вызывай read_file перед ответом на вопросы о кодовой базе.

Tools (3)

Output Schema

output.ts

type ResearchOutput = {  summary: string;  sources: Array<{ title: string; url: string }>;};

import {
  ChatAgent,
  ChatAgentContent,
  ChatAgentHeader,
  ChatAgentInstructions,
  ChatAgentOutput,
  type ChatAgentTool,
  ChatAgentTools,
} from "@/components/ui/chat-agent";

const tools: ChatAgentTool[] = [
  {
    name: "web_search",
    description: "Поиск свежей информации в интернете.",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" },
        limit: { type: "number", default: 5 },
      },
      required: ["query"],
    },
  },
  {
    name: "read_file",
    description: "Чтение содержимого файла в рабочей области.",
    inputSchema: {
      type: "object",
      properties: { path: { type: "string" } },
      required: ["path"],
    },
  },
  {
    name: "run_shell",
    description: "Выполнение shell-команды в корне проекта.",
  },
];

const outputSchema = `type ResearchOutput = {
  summary: string;
  sources: Array<{ title: string; url: string }>;
};`;

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatAgent>
        <ChatAgentHeader
          name="Ассистент-исследователь"
          model="claude-opus-4-7"
        />
        <ChatAgentContent>
          <ChatAgentInstructions>
            Ты ассистент-исследователь. Всегда ссылайся на источники, отдавай
            предпочтение первичной документации и вызывай <code>read_file</code>{" "}
            перед ответом на вопросы о кодовой базе.
          </ChatAgentInstructions>
          <ChatAgentTools tools={tools} />
          <ChatAgentOutput schema={outputSchema} />
        </ChatAgentContent>
      </ChatAgent>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-agent

Использование

import {
  ChatAgent,
  ChatAgentContent,
  ChatAgentHeader,
  ChatAgentInstructions,
  ChatAgentOutput,
  ChatAgentTools,
  type ChatAgentTool,
} from "@/components/ui/chat-agent";
 
const tools: ChatAgentTool[] = [
  {
    name: "web_search",
    description: "Search the web for fresh information.",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" },
        limit: { type: "number", default: 5 },
      },
      required: ["query"],
    },
  },
];
 
<ChatAgent>
  <ChatAgentHeader name="Research assistant" model="claude-opus-4-7" />
  <ChatAgentContent>
    <ChatAgentInstructions>
      You are a research assistant. Always cite sources.
    </ChatAgentInstructions>
    <ChatAgentTools tools={tools} />
    <ChatAgentOutput schema={`type Output = { summary: string; sources: string[] }`} />
  </ChatAgentContent>
</ChatAgent>

API

Компонент	Описание
`ChatAgent`	Корневой контейнер.
`ChatAgentHeader`	Заголовок: иконка, имя, бейдж модели, слот `actions` для меню/статуса.
`ChatAgentContent`	Вертикальная стопка полей.
`ChatAgentInstructions`	Блок «Инструкции» — системный промпт.
`ChatAgentTools`	Аккордеон с инструментами, каждый разворачивается в JSON-схему под shiki.
`ChatAgentOutput`	Схема вывода — TypeScript или JSON.

На этой странице

Установка Использование API

Chat Agent

Instructions

Tools (3)

web_searchПоиск свежей информации в интернете.

read_fileЧтение содержимого файла в рабочей области.

run_shellВыполнение shell-команды в корне проекта.

Output Schema

Установка

Использование

API