Henry's Log.

Search articles

前端面试 P081：StrictMode 的检查与版本边界JavaScript 函数传参：值传递与对象引用前端面试 P018：手写柯里化与参数个数边界前端面试 P010：普通函数、箭头函数与 this前端面试 P088：Immer 草稿与结构共享前端面试 P006：对象遍历与属性键的选择前端面试 P009：执行上下文、调用栈与词法作用域前端面试 P094：SSE 分片解码与事件边界前端面试 P097：请求并发池、任务启动与失败释放前端面试 P076：Fiber 的协作调度与不可中断边界前端面试 P013：节流、防抖与取消待执行任务前端面试 P033：Object.create、描述符与共享属性前端面试 P057：Vue Router 配置、历史模式与导航前端面试 P030：构造函数与 new 的返回规则前端面试 P077：key、组件身份与状态重置前端面试 P039：同源策略、CORS 与请求是否发出前端面试 P032：instanceof、原型链与自定义判断前端面试 P047：Proxy 与 Vue 2 属性拦截的区别前端面试 P019：函数组合与同步数据管道前端面试 P004：手写深拷贝、循环引用与实现边界前端面试 P059：导航守卫、顺序与权限边界前端面试 P083：函数式更新、队列与纯度前端面试 P014：call、apply、bind 与模拟实现边界前端面试 P012：高阶函数、柯里化与部分应用前端面试 P041：事件委托、目标匹配与 React 事件前端面试 P048：track、trigger、动态依赖与清理前端面试 P066：自定义指令与 DOM 资源清理前端面试 P075：props 只读、状态归属与派生数据前端面试 P062：Pinia 创建、实例范围与使用前端面试 P073：JSX 编译、React 元素与表达式前端面试 P026：Promise 延迟与顺序任务队列前端面试 P016：纯函数、副作用与参数共享前端面试 P094：流式文本的 SSE 与 WebSocket 取舍前端面试 P064：storeToRefs 与 action 解构纠错前端面试 P044：Composition API 与组合式函数前端面试 P051：副作用清理与过期请求前端面试 P021：事件循环、微任务与渲染机会前端面试 P003：原始值、对象共享与赋值行为前端面试 P098：用户偏好存储、TTL 与命名空间前端面试 P056：插槽作用域与 slot props前端面试 P011：闭包、变量绑定与循环回调前端面试 P027：async 错误处理与 return await前端面试 P036：CSP、nonce 与防护边界前端面试 P007：隐式转换、ToPrimitive 与空数组比较前端面试 P035：继承方式对照与寄生组合式继承前端面试 P025：手写 Promise 的最小状态机前端面试 P079：受控表单与非受控输入前端面试 P072：虚拟 DOM 的价值与性能边界前端面试 P005：数组方法、可变性与回调副作用前端面试 P100：Proxy 沙箱为何不是安全边界前端面试 P040：发布订阅、事件总线与退订前端面试 P053：props、组件事件与 v-model 约定前端面试 P008：相等比较、NaN 与 Object.is前端面试 P065：Pinia 最小变更与对象替换的取舍前端面试 P087：Redux 单向数据流与状态边界前端面试 P002：数据类型与 typeof 的陷阱前端面试 P085：useReducer 与 useState 的实际取舍前端面试 P078：React 合成事件与旧事件池纠错前端面试 P025：Promise 解析过程与实现验收前端面试 P043：Vue 渐进式与声明式 UI前端面试 P091：SWR、TanStack Query 与服务端缓存前端面试 P074：函数组件快照与类实例的输出纠错前端面试 P071：UI 是状态映射与渲染纯度前端面试 P054：provide、inject 与跨层级依赖前端面试 P061：何时引入全局状态管理前端面试 P097：请求去重、缓存键与过期策略前端面试 P086：Context 拆分与订阅更新边界前端面试 P024：Promise 并发组合与空输入边界前端面试 P089：Redux middleware、next 与异步返回值前端面试 P022：Promise 状态、链式调用与错误传播前端面试 P084：状态提升、单一来源与范围选择前端面试 P034：class、super 与语法糖的边界前端面试 P058：路由参数、query 与组件 props前端面试 P020：定时器延迟、轮询重叠与清理前端面试 P029：对象原型、prototype 与属性查找前端面试 P095：AI SDK、编排框架与生成 UI 工具前端面试 P092：Signals、细粒度依赖与 React 集成边界前端面试 P046：Vue 响应式陷阱与 ref 自动解包纠错前端面试 P090：Zustand、Jotai 与状态作用域前端面试 P100：微前端 JS 隔离方案与资源生命周期前端面试课程：学习目录与纠错记录前端面试 P023：async、await、异步恢复与并发前端面试 P068：Vue 2 与 Vue 3 的列表 diff 区别前端面试 P015：IIFE、作用域隔离与现代模块前端面试 P063：Pinia 状态、getter 与 action前端面试 P052：Vue 条件、列表与表单指令前端面试 P050：Vue 生命周期、DOM 时机与 SSR前端面试 P060：路由 meta、合并与界面配置前端面试 P045：ref、reactive、computed 与 watch前端面试 P096：令牌无感刷新、重试与安全边界前端面试 P093：MCP 架构与前端集成场景前端面试 P080：组合、children 与自定义 Hook前端面试 P082：useState 更新请求、快照与批处理前端面试 P067：Vue 模板编译与运行时边界前端面试 P031：手写 new 与 Reflect.construct 的区别前端面试 P069：nextTick 等待 DOM 刷新与绘制的区别前端面试 P055：默认插槽、具名插槽与内容接口前端面试 P038：嵌套定时器的最小延迟与调度选择前端面试 P099：倒计时截止时间、漂移与完成事件前端面试 P019：记忆化缓存与递归调用的纠错前端面试 P049：Vue 与 React 的更新范围和批处理前端面试 P004：浅拷贝、深拷贝与 structuredClone前端面试 P042：Vue 面试导学与学习顺序前端面试 P096：共享刷新 Promise 与并发失败恢复前端面试 P070：React 面试导学与复习主线前端面试 P028：异步输出顺序的逐步推演前端面试 P001：var、let、const 与暂时性死区前端面试 P037：内存泄漏的快照与引用链排查前端面试 P017：手写 bind、重复绑定与构造调用Welcome to Henry’s LogA place to keep programming notes, project updates and the things I learn along the way.
Esc to close
All articles

前端面试 P093：MCP 架构与前端集成场景

前端2 minutes

Showing the original in Chinese (China)

来源：方格前端讲面试 · 场景题篇：：AI工具中，经常提到的 mcp 是什么，有哪些与前端方向结合的场景？，14 分 23 秒。

回看定位：04:05 协议定义 · 06:58 组成 · 09:43 前端场景

MCP 标准化哪一层

Model Context Protocol 为 AI 应用连接外部能力提供协议。可区分 host 应用、host 中的 client、提供能力的 server；模型参与生成意图或参数，实际连接、授权、调用和结果注入通常由宿主系统管理。

它不只是“模型直接连 USB”：工具、资源、提示等有不同协议语义，发现能力、协商、调用与错误处理也要有明确边界。

能与前端结合什么

  • 开发工具获取项目文件、设计稿、接口文档等上下文，帮助生成或校验代码。
  • 应用接入受控查询、可视化或业务操作，前端展示调用进度、参数、结果和错误。
  • 把组件文档、设计系统、测试或构建等能力做成可复用服务，供多个兼容宿主使用。

MCP 并不保证任意 client 支持所有能力，也不自动解决文档准确性与业务数据模型。

纠正“协议本身自动安全”的理解

有结构化协议不等于权限已正确配置。调用方仍要管理身份、最小可用能力、参数校验和对有后果操作的用户意图；工具返回文本是数据，不应被当成可以覆盖用户请求的指令。

结果放入上下文通常不是重新训练模型权重。模型可利用新数据回答，不意味着它永久学习并保存了工具内容。

浏览器与后端分工

浏览器不适合持有长期服务密钥或直接暴露不受控文件、数据库能力。可通过自己的后端或具备正确授权边界的宿主接入，前端保留操作可见性和失败恢复路径。

面试项目应讲实际解决的问题、能力契约、调用链和验证结果，不能只说“接上 MCP 就变智能体、提高通过率”。

参考：MCP 架构。关联：前端面试 P095：AI SDK、编排框架与生成 UI 工具。

#前端面试#前端工程#AI#MCP
More articles →