前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
返回 AI 情报前线
All News · 全部资讯8655
  • AI 安全是工程问题:Agent 堆栈每一层的防护实践
  • Agent 系统的瓶颈不是模型,是架构设计
  • 防御式 Agent 架构:Schema 注入与超时控制
  • 自研研究 Agent 拦截 AI 编程幻觉:文档先行策略
  • 像物理学家一样剪枝 LLM:区块移除的伊辛模型优化
  • Mac mini上的AI开发新范式:OpenClaw与Codex实战
  • Cloudflare Python Workers 正式上线,可用纯 Python 开发边缘应用
  • 浏览器直接给 ESP32 烧录 Claude 写的宏,无需 IDE 或工具链
  • Google 发布 Agent 安全风险报告:5 万美元循环消耗与凭证窃取案例
  • 多 Agent 合规流水线:用 RAG + 自修正架构对抗 WCAG 幻觉问题
  • Anthropic 发布金融领域 Claude 参考智能体套件
  • OpenAI 披露强化学习模型在上下文压缩时插入 Prompt 注入
  • Jev 决策模型实测:0.3秒完成意图分类和工具路由,$0.00004/次
  • Kimi Code Desktop 上线:图形界面 + 内置终端 + Git 状态,支持 Swarm 多 Agent 协
  • StepFun Step 5 Preview:600B 总参数 MoE 模型,1M 超长上下文,10 月开源
  • JSON-Render:通吃 React/Vue/Svelte/React Native 等 10+ 框架的生成式 UI
  • Agent-Native:让 Agent 能力同时暴露给 LLM 工具调用和 UI 操作的 TypeScript 框架
  • 清华联合无问芯穹开源具身智能体RPent,GPT-6 Astra注入机器人
  • AI Agent工具调用边界case:路由错误比想象中更脆弱
  • AI按它能读的契约编程,而非你想要的
  • MCP 远程服务器实现 AI 驱动的确定性 UI 编排
  • 阶跃Step 5 Preview实测:27B参数开源模型冲至Top2
  • 用Responses API构建有边界的GPT-6 Astra Agent
  • 用破坏不变量法审查 AI 生成代码
  • AI 编程测试冻结:保存异常指纹而非测试名
  • 程序员亲历:全公司用 Claude Code 批量生产代码,没人读代码,12 小时工作制
  • 自托管Llama部署成本全解析:GPU之外容易被忽视的隐性开销
  • Builder.io开源Agent-Native框架:让人与AI共享同一操作层
  • 让AI编程代理在中断后从断点恢复:session化执行轨迹方案
  • CI如何验证AI代理真的跑了测试而不是伪造结果
  • llm-keys-ui:让Coding Agent安全获取API密钥的插件
  • AI产品定价数学:固定费率如何悄悄亏损
  • ZCode事件:AI编程工具静默上传全部Git历史
  • Anthropic自评:R&D自动化率26%,但完全自主为0
  • 阿里Qwen-Image-2.1:70亿参数开源图像生成拳打闭源模型
  • OWASP CRS 规则引擎:给 LLM 和 MCP 加上 WAF
  • 智谱 MaaS 上线数据不留存机制,可申请开通
  • 如何界定可完成的AI工程范围
  • Cursor中直接查询技术文档的MCP方案
  • AI Agent的过度自信陷阱
  • Cursor与.NET周报:七个实战规则
  • AI Agent失效?模型可能不是根源
  • Qwen-Image-2.1开源:7B参数兼顾生图与编辑
  • 阿里开源 Qwen-Image-2.1:7B 参数兼顾透明图生成与多图编辑
  • 免费模型Trace不能支持的五个评估主张
  • AI重构前的副作用冻结术:先录 Ledger 再动格式
  • Agent能改Oracle则Green Build不足为信:独立检查三原则
  • AI编程导致代码质量下降?根子在质量管理
  • AI连接数据库必须先脱敏:PII保护实战指南
  • Anthropic与埃森哲20亿美元共建AI安全评估体系
  • Copilot CLI恢复检查点导致1GB未跟踪文件被删
  • 已加载 51 / 8655
8.0
热点
AI SCORE
编程提效2026-09-21 12:04

MCP 远程服务器实现 AI 驱动的确定性 UI 编排

dev.to · AI#MCP#AI编程#架构设计
Editor brief · 编辑速览

将 MCP 协议从数据读取扩展到运行时应用编排,通过 JSON 规则替代临时 React 组件,避免 bundle 膨胀和 SSR 水合问题。

文章思维导图
Knowledge map
拖拽缩放
Full translation

完整中文译文

Model Context Protocol(MCP)通常被定位为让 LLM 读取本地文件或查询 SQL 数据库的方式。但 MCP 最高价值的应用场景并非读取数据——而是运行时应用编排。

如果你的 AI 编码 Agent 能直接在终端里发布应用内公告、情境式新手引导和功能提示,而无需编写临时 UI 代码呢?

LLM 动态生成前端代码的问题

让 AI Agent 为临时公告临时编写 React 组件存在风险:

  • 会引入打包体积膨胀和废弃组件
  • CSS 风格很快会侵蚀你的设计系统
  • 在 SSR 水合过程中有破坏页面布局的风险

更好的架构模式是由 MCP 管控的确定性 JSON 规则(Deterministic JSON Rules)。

远程 MCP 流程是如何工作的

架构如下:

Agent 工具调用:你向 Claude Code 或 Cursor 发出发布公告的指令。

MCP 远程服务器:Agent 通过 OAuth 2.1 PKCE S256 连接到 https://www.neotic.app/api/mcp。

规则规范:Agent 发出一个结构化载荷,声明触发条件:

{
  "slot_id": "onboarding-welcome-modal",
  "rules": {
    "path_pattern": "/onboarding/*",
    "user_properties": {
      "account_age_days": { "lte": 3 },
      "completed_setup": false
    }
  },
  "content": {
    "headline": "Welcome to the new dashboard",
    "cta": { "label": "Take 1-min Tour", "url": "/tour" }
  }
}

客户端评估:浏览器使用一个 micro-SDK(<4KB)在本地评估这些规则,零服务器延迟。

将 MCP 连接到你的 Claude / Cursor 配置

你可以在 mcp.json 或 Claude 桌面配置中进行配置:

{
  "mcpServers": {
    "neotic": {
      "url": "https://www.neotic.app/api/mcp",
      "transport": "sse"
    }
  }
}

查看 Neotic 的开发者文档以了解完整的 MCP 规范并测试远程触发功能。

你的团队目前如何管理应用内公告和功能新手引导?是将弹窗硬编码到 React 里、使用外部脚本,还是通过 MCP 自动化?在下方分享你的想法!

(如果你在使用 Next.js 或 AI 编码 Agent 进行开发,可以了解一下 Neotic 以及我们在 https://www.neotic.app/api/mcp 的远程 MCP 端点!)

Original source

本文由 AI 翻译整理自 dev.to · AI,原文版权归原作者所有。

阅读英文原文
上一篇
AI按它能读的契约编程,而非你想要的
下一篇
阶跃Step 5 Preview实测:27B参数开源模型冲至Top2