Обзор
Компоненты
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Auth Surface
- Avatar
- Badge
- Browse Catalog Dialog
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Connector Setup Dialog
- Cookie Banner
- Dialog
- Directory Card
- Directory Detail
- Directory Skeleton
- DrawerНовое
- Token Parts Input
- Empty
- Field
- Fieldset
- File Preview Modal
- File Preview Skeleton
- Form
- Frame
- Group
- Icon
- Input
- Input Group
- Kbd
- Label
- Legal Shell
- Menu
- Mermaid Diagram
- Mind Map Diagram
- Not Found Screen
- Onboarding Frame
- Popover
- PDF Thumbnail
- Personalization Landing
- Preview Card
- Pricing Page
- Progress
- Radio Group
- Ring Spinner
- Scroll Area
- Select
- Separator
- Settings Page
- Settings Skills
- Settings Connectors
- Settings Capabilities
- Settings Usage
- Settings Account
- Settings Billing
- Sheet
- Sidebar
- Skeleton
- Skill Create Dialog
- Slider
- Spinner
- Stat
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Tooltip
AI-компоненты
- Компоненты AI
- Chat Conversation
- Chat Message
- Chat Response
- Chat Suggestion
- Chat Prompt Input
- Slash Highlighted Textarea
- Chat Search Dialog
- Chat Skill Doc
- Chat Connector Detail
- Chat Attachments
- Chat File Card
- Chat Token Chip
- Chat Code Block
- Chat Image
- Chat Inline Citation
- Chat Sources
- Chat Web Search
- Chat Research
- Chat Source
- Chat Actions
- Chat Context
- Chat Loader
- Chat Compaction
- Chat Timeline
- Chat Snippet
- Chat Terminal
- Chat Stack Trace
- Chat Test Results
- Chat File Tree
- Chat Environment Variables
- Chat Audio Player
- Chat Transcription
- Chat Speech Input
- Chat Mic Selector
- Chat Voice Selector
- Chat Agent
- Chat Persona
- Chat Connection
- Chat Connector Suggestion
- Chat Queue
- Chat Checkpoint
- Chat Confirmation
- Chat Artifact
- Chat JSX Preview
- Chat Schema Display
- Chat Package Info
- Chat Commit
- Chat Plan
- Chat Open In Chat
- Chat Sandbox
- Chat Model Selector
- Chat Canvas
- Chat Node
- Chat Edge
Ресурсы
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. |
На этой странице