项目聊天
插入式聊天小部件，让用户与您的项目对话。由Claude Agent SDK提供支持，可基于MCP访问您的文档、代码和页面上下文。
想想内部通信，但代理实际上理解你的项目。
快速入门（Next.js）
npm install project-chatapp/api/chat/route.ts
import { createHandler, createNextHandler } from 'project-chat/server'
import { createProjectContextServer } from 'project-chat/mcp'
const projectContext = createProjectContextServer({
docsDir: './docs',
codeDir: './src',
})
const handler = createHandler({
systemPrompt: 'You help users understand this project. Search docs and code to answer questions.',
mcpServers: {
'project': { type: 'sdk', instance: projectContext.server },
},
})
export const { POST } = createNextHandler(handler)app/layout.tsx
import { AgentChatProvider, AgentChat } from 'project-chat'
export default function Layout({ children }) {
return (
{children}
)
}集 ANTHROPIC_API_KEY 在您的环境中。完成。
这有什么不同
大多数聊天小部件都是LLM API的包装器。这个给了代理人 基于MCP访问项目的实际上下文:
- 项目背景 --为文档和源代码建立索引。代理人会搜索他们以准确回答问题。
- 页面上下文 --知道用户在哪个页面上。答案是根据他们当前的位置量身定制的。
- 自定义上下文 -添加MCP服务器用于数据库查询、API查找、用户特定数据或其他任何操作。
- Claude代码技能 —
.claude/skills/文件允许Claude Code自动将小部件集成到任何项目中。
建筑
User → React Widget → SSE → Backend Handler → Agent SDK query() → MCP Servers
├── Project docs/code
├── Page context
└── Your custom servers三层，一包，五个入口点：
| 导入 | 什么 |
|---|---|
project-chat | React小部件+钩子 |
project-chat/embed | 非React项目的Vanilla JS挂载（Astro、静态HTML） |
project-chat/server | 后端处理程序+框架适配器 |
project-chat/mcp | MCP服务器工厂 |
project-chat/protocol | 共享SSE类型 |
前端API
插入式小部件
非React项目（Astro、静态HTML）
import { mountProjectChat } from 'project-chat/embed'
mountProjectChat({
endpoint: '/api/chat',
greeting: 'Ask me anything about this project.',
})
需要React 18+作为对等依赖（安装在项目中）。
通过钩子自定义UI
import { useAgentChat } from 'project-chat'
function MyChat() {
const { messages, send, isStreaming, activeTools, error } = useAgentChat({
endpoint: '/api/chat',
})
return (
{messages.map(m =>
{m.content}
)}
e.key === 'Enter' && send(e.target.value)} />
)
}服务器应用程序接口
处理程序配置
createHandler({
systemPrompt: string, // What the agent should do
model?: string, // Default: claude-sonnet-4-5-20250514
allowedTools?: string[], // Default: ['Read', 'Glob', 'Grep']
mcpServers?: Record,
maxBudgetUsd?: number, // Default: 0.25
maxTurns?: number, // Default: 10
maxInputLength?: number, // Default: 4000
sessionStore?: SessionStore, // Default: in-memory
onMessageStart?: (sessionId) => void,
onMessageEnd?: (sessionId) => void,
onError?: (error, sessionId) => void,
})框架适配器
// Next.js App Router
export const { POST } = createNextHandler(handler)
// Express
app.post('/api/chat', createExpressHandler(handler))
// Hono
app.post('/api/chat', createHonoHandler(handler))MCP上下文
内置：项目背景
在启动时索引文档和代码。显示供代理搜索的工具。
createProjectContextServer({
docsDir: './docs',
codeDir: './src',
include: ['**/*.md', '**/*.ts'],
exclude: ['**/node_modules/**'],
maxFileSize: 100000,
apiSpec: './openapi.yaml',
})内置：页面上下文
自动知道用户所在的页面（URL、标题、路径名）。前端在每次请求时都会发送此消息。
createPageContextServer()自定义MCP服务器
为项目特定上下文添加任何MCP服务器：
import { createSdkMcpServer, tool } from '@anthropic-ai/claude-agent-sdk'
import { z } from 'zod'
const myServer = createSdkMcpServer({
name: 'my-context',
tools: [
tool('get_user', 'Get user details', { id: z.string() }, async ({ id }) => {
const user = await db.users.find(id)
return { content: [{ type: 'text', text: JSON.stringify(user) }] }
}),
],
})
// Add to handler
createHandler({
mcpServers: {
'project': { type: 'sdk', instance: projectContext.server },
'users': { type: 'sdk', instance: myServer },
},
})Claude代码技能
此图书馆随附 .claude/skills/ 对于自主集成：
integrate-project-chat--5阶段集成：分析主机、安装、后端、前端、验证add-mcp-context-添加自定义数据库/API/服务上下文customize-theme--将小部件与主机的设计系统相匹配deploy-project-chat--生产：安全、限速、监控
安全
- API密钥保持在服务器端（从不在客户端捆绑包中）
- 默认工具是只读的：
Read,Glob,Grep - 每个请求的预算上限(
maxBudgetUsd) - 每个请求的转弯限制(
maxTurns) - 输入长度验证(
maxInputLength) - 会话存储是可插拔的（实现
SessionStore适用于Redis、DB等）
许可证
麻省理工学院