Next.jsReact启动器

chamade-template-vercel-nextjs — Next.js 启动器模板

作者 Nafis-Chamade

Chamade Webhook 处理器的 Vercel 起步模板,基于 Next.js 15 App Router,在 /api/chamade-webhook 路由中校验 HMAC 签名、把 dm.received 事件交给 Claude 处理,并将回复回传到 Chamade。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

从已核对的演示页面实际渲染并截图。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-16查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

单一 API 路由 /api/chamade-webhook,对原始请求体做 HMAC 签名校验

02

dm.received 事件经 Anthropic SDK 交给 Claude 处理,再用 reply_token 回传到 /api/reply/dm

03

agent.timeout 返回默认的延迟致歉消息,webhook.test 与未知事件仅做确认

04

环境变量包括必填的 CHAMADE_WEBHOOK_SECRET、ANTHROPIC_API_KEY,以及可选的 CHAMADE_BASE_URL、ANTHROPIC_MODEL

05

README 提示幂等去重默认用内存 Set,多区域部署需改用 KV/Redis 等共享状态

模板详细介绍

这是一个面向 Chamade Webhook 的 Vercel 起步模板,使用 Next.js 15 App Router。README 说明它只包含一个 API 路由 /api/chamade-webhook,负责三件事:对原始请求体校验 HMAC 签名、把 dm.received 事件分派给 Claude(Anthropic SDK)、再通过 /api/reply/dm 携带事件中的 reply_token 把模型回复 POST 回 Chamade。

事件处理方面,README 列出的行为是:dm.received 把 event.data.text 发给 Claude 并回帖;agent.timeout 用默认的延迟致歉消息做异步回复;webhook.test 仅确认;其余事件也仅确认,需要自行扩展 route.ts 来接入语音等场景。

部署路径为:先把模板推到 GitHub 等 Git 托管,再在 Vercel 导入项目并配置环境变量,然后把稳定的 alias URL(而非单次部署 URL)填入 Chamade 后台的频道 Webhook 配置,最后用仪表盘的 Send test 验证。README 还给出了本地开发方式(npm run dev 配合 ngrok)以及若干注意事项,包括 Vercel 函数超时上限、冷启动、签名密钥轮换与多区域幂等状态等。README 未提供关于模板 UI 界面、数据库或除 Anthropic 之外集成的说明。

Next.js启动器

适合你的项目吗?

适用场景

  • 为 Chamade 的私信事件接入 Claude 自动回复
  • 在 Vercel 上搭建并验证 Chamade Webhook 的签名校验链路
  • 以本地 npm run dev 加 ngrok 的方式调试 Chamade Webhook 投递
  • 在现有 switch 分支上扩展语音(call.transcript)等新事件类型

适合人群

  • 需要在 Vercel 上快速跑通 Chamade Webhook 收发流程的开发者
  • 使用 Next.js App Router 并希望以 Claude 作为回复模型的团队
  • 准备自行替换内存幂等与对话记忆实现、接入 KV 或 Redis 的工程人员

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    把模板复制到本地仓库并推送到 GitHub 等 Git 托管,再在 Vercel 导入该仓库

  2. 2

    在 Vercel 项目设置或 vercel env 中配置 CHAMADE_WEBHOOK_SECRET 与 ANTHROPIC_API_KEY,按需设置 CHAMADE_BASE_URL、ANTHROPIC_MODEL

  3. 3

    把稳定的 alias URL(如 https://<project-name>.vercel.app/api/chamade-webhook)填入 Chamade 后台的频道 Webhook 配置,不要使用单次部署 URL

  4. 4

    在仪表盘点击 Send test,确认投递日志中出现 HTTP 200

  5. 5

    本地开发时执行 npm install、复制 .env.example 为 .env.local 并填入密钥,再运行 npm run dev,可用 ngrok 暴露端口

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 必须设置 CHAMADE_WEBHOOK_SECRET 环境变量,该密钥在保存 Webhook URL 后于 /dashboard/keys 一次性显示。
  • 必须设置 ANTHROPIC_API_KEY 环境变量,需在 Anthropic 控制台获取。
  • 可选环境变量 CHAMADE_BASE_URL 默认指向 https://chamade.io,可改为 https://dev.chamade.io 以对接开发环境。
  • 可选环境变量 ANTHROPIC_MODEL 默认使用 claude-sonnet-4-6。
  • 必须使用稳定的 alias URL 而非单次部署 URL,否则环境变量轮换后 Chamade 仍会命中旧函数。
  • 幂等去重默认使用以 event_id 为键的内存 Set,多区域 Vercel 部署需改用 KV/Redis 等共享状态。
  • Vercel 函数超时受限:Hobby 计划 60 秒,Pro/Enterprise 300 秒,长回复或链式工具调用可能超时,需在 route.ts 设置 maxDuration。
  • Vercel 冷启动可能达 1-2 秒;若需稳定亚秒级响应,需改用 Edge Functions 或安排低流量预热。
  • 若在仪表盘轮换签名密钥,必须先部署新值再触发新事件,否则 Chamade 会重试直至进入 DLQ。
  • 跨消息记忆需自行用 Vercel KV 或 Upstash Redis 替换内存 SEEN 集合,并按 conversation_id 存储会话历史。
  • 语音(call.transcript)等场景需自行在 switch 中扩展,调用 lib/chamade.ts 的 replyCallSay。
  • 除 dm.received、agent.timeout、webhook.test 外的事件仅做确认,需自行扩展 route.ts 接入语音等场景。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

| `CHAMADE_WEBHOOK_SECRET` | yes | One-time reveal in `/dashboard/keys` after saving the webhook URL |

README 原文

| `ANTHROPIC_API_KEY` | yes | <https://console.anthropic.com> |

README 原文

| `CHAMADE_BASE_URL` | no | Defaults to `https://chamade.io`. Set to `https://dev.chamade.io` to test against dev |

README 原文

| `ANTHROPIC_MODEL` | no | Defaults to `claude-sonnet-4-6` |

README 原文

> ⚠️ **Use the stable alias, NOT the per-deploy URL.**

README 原文

- **Idempotency persistence**: the starter uses an in-memory Set keyed by `event_id`. For multi-region Vercel deployments use KV/Redis instead — retries from the same instance dedupe locally, retries that bounce across regions need shared state.

README 原文

- Vercel function timeout: Hobby plan caps at 60s, Pro/Enterprise at 300s. Long Claude responses + chained tool use can exceed this — set `maxDuration` in `route.ts` to match your plan

README 原文

- Cold starts on Vercel can hit 1-2s; if you need consistently sub-second replies, use Vercel Edge Functions (swap `runtime = "nodejs"` to `"edge"` — `crypto` from `node:crypto` is available in the Edge runtime since 2024) or pre-warm with a low-traffic ping schedule

README 原文

- The signature verifies against `process.env.CHAMADE_WEBHOOK_SECRET` — if you rotate it in the dashboard, deploy the new value too **before** any new event fires, otherwise Chamade retries until DLQ

README 原文

- **Memory across messages**: replace the in-memory `SEEN` set with Vercel KV or Upstash Redis; store conversation history keyed by `event.data.conversation_id`

README 原文

- **Voice (`call.transcript`)**: add a case in the `switch` calling `replyCallSay(event, text)` from `lib/chamade.ts`

README 原文

- **everything else** → ack only (extend `app/api/chamade-webhook/route.ts` as you wire voice etc.)

README 原文
https://github.com/Nafis-Chamade/chamade-template-vercel-nextjs/blob/main/LICENSEhttps://github.com/Nafis-Chamade/chamade-template-vercel-nextjs/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-14。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 80 / 100
技术栈
Next.js · React
网站类型
启动器
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-05-22
截图检查日期
2026-10-16

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: a78e7905b048f1c60f5ddca7a9fedc87c62938a044c95693e8c139134f1d6bc7

2026-10-14T19:53:24.025Z

来源文件 / 仓库
# Chamade webhook handler — Vercel starter

Next.js 15 App Router. One API route at `/api/chamade-webhook` that:
1. Verifies the HMAC signature on the raw body
2. Dispatches `dm.received` to Claude (Anthropic SDK)
3. POSTs the model's reply back to Chamade via `/api/reply/dm` with the
   `reply_token` from the event

Reference for the wire format: <https://chamade.io/docs/webhooks>.

## Deploy

**1. Push to your GitHub** (Vercel needs a Git host; Codeberg/GitLab also work):

```bash
cp -r docs/templates/vercel-nextjs ~/my-chamade-handler
cd ~/my-chamade-handler
git init && git add -A && git commit -m "init" && git remote add origin <your-repo> && git push -u origin main
```

**2. Import on Vercel:** New Project → pick the repo → set env vars (next step) → Deploy.

**3. Set env vars** (Vercel project settings or `vercel env`):

| Variable | Required | Notes |
|---|---|---|
| `CHAMADE_WEBHOOK_SECRET` | yes | One-time reveal in `/dashboard/keys` after saving the webhook URL |
| `ANTHROPIC_API_KEY` | yes | <https://console.anthropic.com> |
| `CHAMADE_BASE_URL` | no | Defaults to `https://chamade.io`. Set to `https://dev.chamade.io` to test against dev |
| `ANTHROPIC_MODEL` | no | Defaults to `claude-sonnet-4-6` |

**4. Copy the ALIAS URL** into Chamade dashboard → channel → Webhook → Configure.

> ⚠️ **Use the stable alias, NOT the per-deploy URL.**
>
> The output of `vercel` shows a deploy-specific URL like
> `https://chamade-handler-fw1y8znp6-<scope>.vercel.app`. Don't use that —
> it's a frozen snapshot of one specific deploy. The next time you rotate
> a secret or `vercel env add` a new var, **that URL keeps its original
> env-var snapshot** and Chamade keeps hitting a stale function.
>
> Use the alias instead: `https://<project-name>.vercel.app/api/chamade-webhook`
> (e.g. `https://chamade-handler.vercel.app/api/chamade-webhook`). The alias
> auto-tracks every `vercel --prod` so your env-var rotations are honored.
>
> Check aliases with `npx vercel alias ls`.

**5. Click "Send test" in the dashboard.** You should see HTTP 200 in the delivery log within a couple of seconds.

## What the handler does

- **`dm.received`** → send `event.data.text` to Claude, post the reply to `/api/reply/dm`
- **`agent.timeout`** → async-reply with a default "sorry for the delay" message
- **`webhook.test`** → ack only (verifies signing works end-to-end)
- **everything else** → ack only (extend `app/api/chamade-webhook/route.ts` as you wire voice etc.)

## Customizing

- **System prompt / model behavior**: edit `handleDmReceived` in `app/api/chamade-webhook/route.ts`
- **Memory across messages**: replace the in-memory `SEEN` set with Vercel KV or Upstash Redis; store conversation history keyed by `event.data.conversation_id`
- **Voice (`call.transcript`)**: add a case in the `switch` calling `replyCallSay(event, text)` from `lib/chamade.ts`
- **Idempotency persistence**: the starter uses an in-memory Set keyed by `event_id`. For multi-region Vercel deployments use KV/Redis instead — retries from the same instance dedupe locally, retries that bounce across regions need shared state.

## Local development

```bash
npm install
cp .env.example .env.local
# fill CHAMADE_WEBHOOK_SECRET + ANTHROPIC_API_KEY
npm run dev
# in another terminal, expose with ngrok:
ngrok http 3000
# paste the ngrok URL + /api/chamade-webhook into Chamade dashboard
```

Localhost + `*.ngrok-free.app` are HTTPS-bypassed in Chamade's dispatcher so http://localhost:3000 also works directly if you run Chamade in your own machine.

## Caveats

- Vercel function timeout: Hobby plan caps at 60s, Pro/Enterprise at 300s. Long Claude responses + chained tool use can exceed this — set `maxDuration` in `route.ts` to match your plan
- Cold starts on Vercel can hit 1-2s; if you need consistently sub-second replies, use Vercel Edge Functions (swap `runtime = "nodejs"` to `"edge"` — `crypto` from `node:crypto` is available in the Edge runtime since 2024) or pre-warm with a low-traffic ping schedule
- The signature verifies against `process.env.CHAMADE_WEBHOOK_SECRET` — if you rotate it in the dashboard, deploy the new value too **before** any new event fires, otherwise Chamade retries until DLQ

## License

Pick whatever you ship under — this starter is MIT.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。