人工智能AI AgentAgent 框架前端后端【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址https://gitcode.com/GitHub_Trending/co/CopilotKit点击查看免费下载本篇技术指南围绕社区 Hacktoberfest 示例Legal Document Reviewer关联文档展开以 CopilotKit 为核心结合 React、Next.js、Gemini、Shadcn-UI 与 Tailwind CSS构建一个能够分析法律文档、高亮关键章节并给出合规与清晰度修订建议的 Agent 系统。阅读本文后你将掌握 CopilotKit 前后端接入方式、前端 Action工具注册、Generative UI 渲染与人工确认Human-in-the-Loop等关键技术具备独立复刻同类文档审查类 Agent 的实战能力。一、功能目标法律文档审查 Agent 要解决什么原文档将该示例定位为Hacktoberfest Demo核心任务是Develop a system where AI agents analyze legal documents, highlight important sections, and suggest revisions to ensure compliance and clarity.拆解开来这个系统需要具备三项核心能力文档分析AnalyzeAI Agent 读取用户粘贴或上传的法律文本识别其中的条款、义务、风险点与潜在不合规内容高亮重要章节Highlight对关键段落如赔偿条款、终止条款、保密义务、违约责任进行视觉化标记便于用户快速定位建议修订Suggest Revisions针对表述含糊、可能存在合规风险的原文生成改写建议保证文本的合规性compliance与清晰度clarity。这三项能力天然适配 CopilotKit 的Generative UI与Human-in-the-Loop模式分析结果不是以纯文本形式丢给用户而是以结构化的审查卡片、高亮面板渲染在聊天界面中修订建议则可以在用户确认后再写入文档形成Agent 提议 → 用户审批 → 落地修改的闭环。二、技术选型与架构分层原文档明确列出的技术栈如下技术在本项目中的角色CopilotKit核心组件连接前端 UI 与 AI Agent提供聊天、工具调用、Generative UI 与状态同步React.js用户界面构建Next.jsReact 框架提供 App Router 路由与 API 路由Serverless 后端部署Gemini驱动 CopilotKit 的底层大模型Developer Tools 标注为 CopilotKit powered with GeminiShadcn-UI组件库构建高亮卡片、审查面板等界面元素Tailwind CSS工具类优先的样式框架TypeScript类型安全可选用从仓库结构看CopilotKit 官方正是以这套技术组合作为主推形态examples/v2/react/目录下的 React 示例全部采用 Next.js App Router TypeScript前端通过copilotkit/react-core/v2接入后端通过copilotkit/runtime/v2暴露 Agent 端点Gemini 接入有独立示例examples/canvas/gemini且在官方 v2 示例中 Gemini 是被直接支持的模型后端之一。整个系统的架构可以归纳为三层前端层Next.js 页面内嵌入CopilotChat组件通过useFrontendTool或 v1 的useCopilotAction注册分析文档高亮条款生成修订等前端工具协议层CopilotKit 通过 AG-UI 协议将前端工具描述、Agent 消息、Generative UI 渲染指令在前后端之间流转见 README.md 中关于 AG-UI 的说明后端层Next.js API 路由内运行CopilotRuntime挂载内置 Agent 与语言模型可额外注册后端 Action如调用文档解析服务、合规知识库。三、后端接入CopilotRuntime 与模型配置后端是整个系统的大脑所在。在 Next.js App Router 中标准的接入方式是创建src/app/api/copilotkit/[[...slug]]/route.ts实例化CopilotRuntime并通过 Hono 的handle导出GET/POST。仓库中的官方 v2 示例route.ts给出了可直接参考的骨架import { CopilotRuntime, createCopilotEndpoint, InMemoryAgentRunner, BuiltInAgent, } from copilotkit/runtime/v2; import { handle } from hono/vercel; const builtInAgent new BuiltInAgent({ model: determineModel(), // 依据环境变量选择模型 prompt: You are a helpful AI assistant., }); const runtime new CopilotRuntime({ agents: { default: builtInAgent }, runner: new InMemoryAgentRunner(), }); const app createCopilotEndpoint({ runtime, basePath: /api/copilotkit, }); export const GET handle(app); export const POST handle(app);在本示例中由于底层模型是GeminidetermineModel分支中可以直接返回google/gemini-3.8-flash该模型 ID 出现在官方示例的模型选择逻辑中对应GOOGLE_API_KEY环境变量。你也可以借鉴官方示例的做法用一个determineModel函数按环境变量自动回退const determineModel () { if (process.env.GOOGLE_API_KEY?.trim()) { return google/gemini-3.8-flash; // 优先使用 Gemini } if (process.env.OPENAI_API_KEY?.trim()) { return openai/gpt-5.2; } return openai/gpt-5.2; // 兜底默认值 };BuiltInAgent的构造参数来自 route.ts说明如下model字符串模型 ID 或由 AI SDK Provider 工厂返回的模型实例支持 OpenAI / Anthropic / Google / OpenRouter 等prompt系统提示词。对法律文档审查场景可以在 prompt 中注入审查规则例如你是资深法律合规顾问逐条识别潜在风险条款输出修订建议temperature采样温度法律审查类任务建议偏低如 0.20.5以控制输出稳定性与严谨性。此外CopilotRuntime还支持注册后端 Actionv1 风格的示例route.ts展示了在CopilotRuntime构造时通过actions数组声明工具的方式——每个 Action 包含name、description、parameters声明式参数描述与handler异步函数。在 Legal Document Reviewer 中你可以在后端注册诸如调用合规法规检索 API解析 PDF/文本文件之类的 Action将纯前端无法完成的外部能力挂载给 Agent。四、前端接入Provider、Chat 组件与文档输入前端层面页面需要包裹CopilotKitProvider并提供runtimeUrl指向上一节创建的 API 路由。官方 v2 示例single/page.tsx展示了完整写法use client; import { CopilotChat, CopilotKitProvider, useFrontendTool, defineToolCallRenderer, } from copilotkit/react-core/v2; export default function LegalReviewerPage() { return ( CopilotKitProvider runtimeUrl/api/copilotkit div style{{ height: 100vh, overflow: hidden }} LegalReviewerChat / /div /CopilotKitProvider ); }要点使用CopilotKitProvider必须将包含 Chat 的组件树包在其中页面文件需声明use clientruntimeUrl指向后端端点如/api/copilotkit也可使用useSingleEndpoint开启单端点模式见 route.ts 与 single/page.tsx 的配套用法CopilotChat是可深度定制的预置聊天组件用户在其中粘贴法律文档、向 Agent 提问Agent 的审查结果以工具调用 Generative UI 的形式回流到同一界面。对于文档输入实战上通常有两条路径直接粘贴文本用户在CopilotChat输入框中粘贴合同/协议正文由 Agent 在对话上下文中分析独立输入区页面顶部提供一个受控的textarea可搭配 Shadcn-UI 的 Textarea 组件用户粘贴文档后通过前端工具把文本注入 Agent 上下文。五、注册审查工具useCopilotAction 与 useFrontendTool法律审查系统的灵魂在于把分析高亮修订注册为 Agent 可调用的前端工具。仓库中useCopilotAction的源码注释use-copilot-action.ts完整说明了其使用模型通过name声明工具名通过parameters声明参数支持string、number、boolean、object、数组以及enum枚举可标记required通过handler接收参数并返回结果通过render渲染自定义 UI通过renderAndWaitForResponse实现需要用户确认的交互。以下是为 Legal Document Reviewer 设计的三个前端工具v1 风格语义清晰v2 中对应useFrontendTool参数改用 Zod schema 描述见 use-frontend-tool.tsx// 1. 分析文档让 Agent 提取条款结构并标注风险等级 useCopilotAction({ name: analyzeDocument, description: Analyze the pasted legal document, identify clauses, obligations and compliance risks, parameters: [ { name: documentText, type: string, description: Full text of the legal document, required: true }, { name: riskLevel, type: string, enum: [low, medium, high], required: false }, ], handler: async ({ documentText }) { // 这里可以做本地预处理例如保存原文、统计段落数 return { analyzed: true, length: documentText.length }; }, }); // 2. 高亮重要章节渲染带定位的条款卡片 useCopilotAction({ name: highlightSections, description: Highlight important sections and risky clauses in the document, parameters: [ { name: clauses, type: object[], attributes: [ { name: title, type: string }, { name: text, type: string }, { name: risk, type: string, enum: [low, medium, high] }, ]}, ], render: ({ status, args }) ( ClauseHighlightPanel clauses{args.clauses} status{status} / ), }); // 3. 生成修订建议以卡片形式给出原文与改写对照 useCopilotAction({ name: suggestRevision, description: Suggest a revised version of a clause to improve compliance and clarity, parameters: [ { name: clauseId, type: string, required: true }, { name: originalText, type: string, required: true }, { name: suggestedText, type: string, required: true }, { name: reason, type: string, description: Why this revision improves compliance or clarity, required: true }, ], render: ({ status, args }) ( RevisionCard original{args.originalText} suggested{args.suggestedText} reason{args.reason} status{status} / ), });从源码实现看useCopilotAction会根据配置自动分派到三条底层路径use-copilot-action.ts提供handler且无render时走frontend路径底层为useFrontendTool仅提供render时走render路径工具调用结果只渲染 UI提供renderAndWaitForResponse时走hitlHuman-in-the-Loop路径Agent 会暂停等待用户通过respond给出确认或修改。六、高亮与修订Generative UI 的落地形态高亮重要章节与建议修订是本示例最具代表性的Generative UI场景。所谓 Generative UI是指 Agent 在运行时根据工具参数动态生成并渲染 React 组件参见 README.md 对 Generative UI 的定义agents to dynamically render UI as part of their workflow。在 Legal Document Reviewer 中render函数返回的自定义组件可以直接使用Shadcn-UI Tailwind CSS构建。例如ClauseHighlightPanel可以用Card、Badge等 Shadcn 组件实现风险分级高亮// components/ClauseHighlightPanel.tsx import { Card, CardContent } from /components/ui/card; import { Badge } from /components/ui/badge; const riskColor { low: bg-green-100, medium: bg-yellow-100, high: bg-red-100 }; export function ClauseHighlightPanel({ clauses, status }: { clauses: { title: string; text: string; risk: low | medium | high }[]; status: string; }) { return ( div classNamespace-y-2 {clauses.map((clause, i) ( Card key{i} className{riskColor[clause.risk]} CardContent div classNameflex items-center justify-between h4 classNamefont-semibold{clause.title}/h4 Badge variantsecondary{clause.risk}/Badge /div p classNametext-sm mt-1{clause.text}/p {status executing p classNametext-xs text-mutedanalyzing.../p} /CardContent /Card ))} /div ); }同理RevisionCard用左右对照布局呈现原文 → 建议改写 → 修改理由让用户一眼看清 Agent 的合规性/清晰度判断依据。值得一提的是工具调用状态status如executing、completed、error会随着执行过程实时更新传入render这允许你在 Agent 分析过程中展示加载态在完成后展示最终结果——官方示例 single/page.tsx 中的 wildcard renderer 就展示了status与args的用法。七、人工确认闭环合规修订的 Human-in-the-Loop法律文本修改属于高风险操作直接由 Agent 静默改写并不稳妥。CopilotKit 的Human-in-the-Loop机制正好解决这个问题Agent 提出修订后暂停执行等待用户点击接受/拒绝再继续。仓库源码将其实现为hitl路径use-copilot-action.ts并提供了完整的交互示例react-textarea README 中的邮件确认场景。把该模式迁移到法律审查场景useCopilotAction({ name: approveRevision, description: Ask the user to approve or reject a suggested clause revision, parameters: [ { name: clauseId, type: string, required: true }, { name: suggestedText, type: string, required: true }, ], renderAndWaitForResponse: ({ args, status, respond }) { return ( RevisionApprovalDialog clauseId{args.clauseId} suggestedText{args.suggestedText} isExecuting{status executing} onApprove{() respond?.({ approved: true })} onReject{() respond?.({ approved: false })} / ); }, });关键点renderAndWaitForResponse渲染的组件必须通过respond把用户决策回传给 AgentAgent 收到后才继续后续流程这样既保留了 AI 的审查能力又把最终是否改写文档的决定权交给用户符合法律文档场景对严谨性的要求v2 中该能力由useHumanInTheLoop提供useCopilotAction在检测到renderAndWaitForResponse时自动切换到该底层实现。八、从零搭建完整项目实践路径参考原文档的技术栈与仓库中的官方示例完整的搭建步骤如下初始化 Next.js TypeScript 项目并安装 Tailwind CSS 与 Shadcn-UI执行npx shadcnlatest init并添加card、badge、textarea、dialog等组件安装 CopilotKit 依赖copilotkit/react-core前端与copilotkit/runtime后端搭建后端路由按第三节创建/api/copilotkit/[[...slug]]/route.ts用BuiltInAgent配置 Gemini 模型设置面向法律审查的系统提示词搭建前端页面按第四节在页面中包裹CopilotKitProvider并渲染CopilotChat提供法律文档粘贴输入注册前端工具按第五节注册analyzeDocument、highlightSections、suggestRevision三个工具并用 Shadcn-UI 组件实现render加入人工确认按第七节为修订落地增加renderAndWaitForResponse审批对话框本地运行验证配置GOOGLE_API_KEY环境变量运行npm run dev在聊天中粘贴一份合同文本观察 Agent 是否依次执行分析 → 高亮 → 修订建议 → 等待审批。若需要无后端 Agent 快速联调可参考官方单端点模式route.ts它用InMemoryAgentRunner在本地直接运行内置 Agent无需外部推理服务。九、源码参考索引本文涉及的关键实现均可在本仓库中继续深挖useCopilotAction 定义与分派逻辑工具注册、render / HITL / frontend 三条路径的判定源码v2 useFrontendTool 实现v2 时代前端工具注册与渲染器注册的底层逻辑v2 Runtime 后端路由示例BuiltInAgentCopilotRuntime的完整配置含模型选择与 providerOptionsv2 单端点示例CopilotKitProvider、useFrontendTool、defineToolCallRenderer的前端组合写法v1 后端 Actions 示例声明式parametershandler的后端工具注册范式HITL 交互示例renderAndWaitForResponserespond的确认闭环范式React 生态概览CopilotKit 能力总览与 AG-UI 协议说明。十、总结Legal Document Reviewer 示例的价值在于展示了一条清晰可复制的路径用 CopilotKit 的聊天 工具注册 Generative UI Human-in-the-Loop 四件套把文档分析 → 高亮 → 修订建议 → 人工审批串成一个完整的 Agent 工作流。本文从后端CopilotRuntime配置、前端CopilotKitProvider接入到useCopilotAction/useFrontendTool的工具注册、Shadcn-UI 渲染的审查卡片再到renderAndWaitForResponse的人工确认闭环逐一给出了可运行的实现方案并标注了仓库中的对应源码位置。以此为基础你不仅能复刻法律文档审查器还能将同一套模式迁移到合同审核、政策解读、审计复核等任何文本 合规类 Agent 应用中。赞分享人工智能AI AgentAgent 框架前端后端【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址https://gitcode.com/GitHub_Trending/co/CopilotKit点击查看免费下载相关推荐3分钟搞定200页合同审查用MCP Python SDK构建法律文档AI分析工具3分钟搞定200页合同审查用MCP Python SDK构建法律文档AI分析工具 法律文档分析常面临三大痛点条款识别慢、风险点遗漏多、跨文件比对难。本文基于人工智能MCP 服务MCP Clients终极指南Gradle构建合规性检查与法律风险防控全攻略终极指南Gradle构建合规性检查与法律风险防控全攻略 在当今软件开发中开源项目的法律合规性已成为企业风险管理的核心环节。Gradle作为一款功能强大的构建构建工具开发工具POCO代码混淆法律建议咨询与合规检查POCO代码混淆法律建议咨询与合规检查 开源许可基础检查 POCO项目采用 Boost Software License 1.0 https://link.g后端网络/通信数据库密码学Web框架创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考