怀来县建设局网站做网站都有哪些费用

怀来县建设局网站,做网站都有哪些费用,主动营销的方式有哪些,wordpress怎么开发主题claude mcp add chrome-devtools npx chrome-devtools-mcplatest它默认是项目级别的#xff0c;只对当前这个项目生效#xff1b;如果想对所有的项目生效#xff0c;可以在后面加两个**--scope user**#xff0c;添加了这个参数以后#xff0c;这个MCP就变成了用户级…claude mcp add chrome-devtools npx chrome-devtools-mcplatest它默认是项目级别的只对当前这个项目生效如果想对所有的项目生效可以在后面加两个**--scope user**添加了这个参数以后这个MCP就变成了用户级这个电脑上的所有项目都会生效。安装完成以后我们启动一下Claude Code然后输入这个命令/mcp回车这里打上一个对勾显示connected就配置完成了。接下来我们来看另外一个AI编程工具Codex怎么配置MCP。我这个电脑上已经安装过Codex了有关Codex怎么安装配置在这期视频里面有过详细介绍了。https://www.bilibili.com/video/BV1wm4UzfEbr我们来到这个地址C:/用户/{你的用户名}/.codex进来以后找到这个文件config.toml如果没有这个文件的话可以新建一个。苹果电脑或者Linux系统的话就是这个地址 ~/.codex/config.toml 。这里我们先以Windows电脑为例我们把Windows电脑的这一串配置复制下来粘贴过来可以把这个启动时间适当调高一点这里我调成60秒。[mcp_servers.chrome-devtools]command cmdargs [/c,npx,-y,chrome-devtools-mcplatest,]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files }startup_timeout_ms 60_000Windows上面配置Codex MCP比较繁琐如果是苹果电脑的话可以进行简化把下面这两行删掉npx可以放到上面下面的/c跟npx都不用写苹果电脑可以简化成这个样子。[mcp_servers.chrome-devtools]command npxargs [-y,chrome-devtools-mcplatest]这里我还是回退成Windows把配置文件保存一下然后我们还是进入测试文件夹输入命令Codex先把Codex启动起来等待了一会启动完成我们输入/mcp可以看到我们添加的MCP Server这样在Codex这边就配置完成了。这个MCP的基础用法就是让AI操作浏览器自动化完成一些操作。我让Codex打开Github然后找到这个项目给它点个star。我们看到它调用了MCP工具打开了Github找到了搜索栏然后输入对应的搜索指令成功搜索到了我们需要的项目这里也点上了star。除了基础的操作浏览器它这里面还有一些工具可以帮助我们辅助调试代码比如可以获取网络请求然后列出控制台的报错等等。我让AI测试一下这个网站的提交按钮看看如果有报错的话应该如何修改。我们看到AI触发了测试并且控制台已经有了报错他通过MCP工具读取到控制台信息还有网络请求然后Codex在代码里面找到了报错原因应该把这个put请求改成post这样使用Chrome dev tools MCP成功进行了页面的调试并且精准地修改好了代码非常的方便。NeonNeon是一个基于Postgres封装的免费的云端数据库。 https://neon.com 我们接入它的MCP就可以让AI瞬间获得一个免费的云端数据库。这里找到Docs然后搜索MCP找到这个文档Connect MCP里面列出了各个客户端的配置方式。我们先看Claude Code这里有一个一键配置命令。claude mcp add --transport http neon https://mcp.neon.tech/mcp配置新的MCP Server之前我先把旧的移除掉。MCP Server不是配置越多越好每配置一个MCP Server都会增加一部分的上下文占用所以MCP Server最好是用哪个配置哪个。输入claude mcp list这里列出的是之前装过的MCP。我把上一个移除掉输入命令claude mcp remove然后粘贴上MCP的名字这样就移除干净了。我们把Neon的这个命令复制过来添加进去再启动下claude输入/mcp这里显示Neon的需要登录授权一下。我们回车浏览器会打开一个窗口要求授权点击approve这里显示授权完成。我们回到Claude CodeNeon这里显示Connected就配置成功了。接下来我们看一下Codex怎么配置。这里来到Codex配置文件Codex直接配置http的MCP会有问题这里我从文档里面找一个npx的配置方式C:/用户/{你的用户名}/.codex/config.toml[mcp_servers.Neon]command cmdargs [/c,npx,-y,mcp-remotelatest,https://mcp.neon.tech/mcp]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files }startup_timeout_ms 60_000如果您是苹果电脑~/.codex/config.toml[mcp_servers.Neon]command npxargs [-y,mcp-remotelatest, Ihttps://mcp.neon.tech/mcp]回到Codex输入命令/mcp这样Neon MCP在Codex这边也配置完成了。我准备了一个CSV文件的测试数据这里面存储的是学生的学号名字还有分数。我准备让AI创建一个数据库然后把这个表存进去。我说新建一个project把这个数据存到一个表里面。Codex调用了Neon MCP先新建了一个project然后执行SQL语句把表建出来了。接下来执行SQL语句把数据插入了表里面。我们来到Neon的控制台就可以看到刚才新建的project在project里面就可以看到我们的数据表。这样我们的code agent就有一个完全操作一个数据库的能力。我们也可以使用AI在这里面把相应的数据表都建出来再让AI帮我们生成后端代码形成一个完整的具有数据库的后端应用。SupaBase MCPSupabase比Neon的功能更加强大在强大的Postgres数据库的基础上封装了用户认证、文件存储、可视化的运维面板等功能为开发者提供了一整套开箱可用的后端基础设施。我们来把Supabase的MCP也配置一下。我们先来到Supabase的控制台创建一个新的项目给项目起个名字填个密码点击创建。我们来到Supabase的文档站在project这里选择我们刚才建的项目。这里有一个配置方式这是一个远程调用的MCP Server我们先在Claude Code里面配置一下claude mcp add supabase --transport http https://mcp.supabase.com/mcp?project_refjnwzzd1lytseoseovqfbr注意https://mcp.supabase.com/mcp?project_refjnwzzd1lytseoseovqfbr 这是官网的提供的mcp地址每个项目都不一样回车启动一下Claude Code输入/mcp选择Supabase回车在浏览器打开的窗口下面点击授权这样就配置完成了。我还是让他创建一个表把这个数据写进去这样在Supabase的后台就可以看到我们创建的表了。我让AI用nextjs写一个项目利用Supabase自带的用户鉴权功能实现用户登录代码写完了。项目里需要配置两个环境变量一个是URL还有一个Key。这个完全可以使用MCP自动生成一个。我跟AI说一下你用MCP把环境变量填一下。这里他成功调用了MCP帮我们填写好了URL还有API Key。接下来我们把项目启动起来试一下npm run dev。进来以后是一个非常简单的登录跟注册页面这里我填一个邮箱点击注册注册链接就发到了我的邮箱。来到邮箱收一下验证邮件邮箱验证完成以后点击登录这里显示登录成功。我们去supabase后台看一下在左侧Authentication里面就可以看到刚才注册进来的这个用户。然后我们还可以结合上面的数据库创建一些业务表。我们通过Supabase MCP就可以创建一个完整的带用户登录加后台数据库的一个完整应用。我们看一下Codex怎么配置SupabaseWindows电脑 C:/用户/{你的用户名}/.codex/config.toml[mcp_servers.supabase]command cmdargs [/c,npx,-y,mcp-remotelatest,https://mcp.supabase.com/mcp?project_refjnwzzdllytseseovqfbr]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files }startup_timeout_ms 60_000苹果电脑~/.codex/config.toml[mcp_servers.supabase]command npxargs [-y,mcp-remotelatest,https://mcp.supabase.com/mcp?project_refjnwzzdllytseseovqfbr]Figma MCPFigma成为了今年最流行的网页与APP设计工具可以让团队在浏览器上合作设计而不必依赖复杂笨重的本地软件。Figma里面有上百款可以免费使用的UI设计模板这里我找到一个登录页面并且把它改造了一下我想让AI把这个页面实现成一个网站。我们可以使用Figma MCP把这个设计稿对接到coding agent里面一句话就能生成这样的网页。我们先在Claude Code里面把它配置一下。这个MCP有点特殊它后面需要填这些参数。我们先把基础的配置好跟之前一样claude mcp add figma npx然后把这个MCP包的名字复制过来后面参数可以不用填直接回车。它会告诉我们MCP是安装到这个文件里面。接下来我们在电脑的目录里面找到这个文件把它打开找到我们的MCP。这里需要把没完成的配置给它添加上。我们回到自己的Figma网站左上角点击Settings在Security - Generate new TOKEN然后把下面的这些权限都勾选上创建TOKEN把API Key复制一下填写到配置文件里面打个逗号还有最后一个参数也就是--stdio。这样就配置完成。在Claude Code这边遇到这种参数比较复杂的MCP我们可以先在命令行这里把基础的配置好然后进入配置文件里面再把参数填写上。然后我们来看Codex这是Windows电脑上[mcp_servers.figma]command cmdargs [/c,npx,-y,figma-developer-mcp,--figma-api-keyfigd_zYMLXKdr9arw3akf4pzxlfpfnxaqr3UT0Y5SnnWT,--stdio]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files }startup_timeout_ms 60_000这是在Mac电脑上面配置Figma MCP的方式。[mcp_servers.figma]command npxargs [-y,figma-developer-mcp,--figma-api-keyfigd_zYMLXKdr9arw3akf4pzx1fpfnxaqr3UT0Y5SnnWT,--stdio]配置好MCP我们来试一下。我的提示词是用Next.js 15框架制作一个登录页面严格遵照这个Figma的设计稿。我们选中这个设计稿的页面当然也可以选择某个区域或者某些元素。选中页面右键copy - copy link to selection然后把链接粘贴过来这样执行。Codex调用了Figma MCP获取到了这个设计稿的结构信息。他还调用了Download的方法把设计稿里面的图片下载了下来然后根据设计稿开始编写代码。我们来看一下最终的效果最后生成的网页跟我的原始设计稿差不多有9成的相似稍微调整一下让AI补充一些后台逻辑就可以直接上线使用了。Context 7众所周知AI大模型的知识都是有截止日期的AI写一些经典代码可以完全胜任但是许多的新技术都在AI的知识体系之外了。Context7 MCP可以帮助AI查找文档补充最新的编程知识。我们先把它来配置一下这里我还是先从Claude Code来配置一下。我们把配置命令复制一下claude mcp add --transport http context7 https://mcp.context7.com/mcp后面的API Key可以不用填如果调用量不大。这样回车配置完成。启动一下claude。我们来看一个例子Python 3.14于25年10月7日发布这里面有一个新特性叫做模板字符串也叫做t-字符串。我让AI写一个Python文件来演示t字符串有什么用。我们看到AI没有理解我的意思我说的是t字符串它给我弄成了r字符串生成的代码也是完全错误的。我把这个代码删除。我在刚才的提示词后面加了一个use context7也就是让AI在编码之前先用context7 MCP查找文档。我们看到AI调用context 7 MCP成功查找到了一些文档然后开始编写代码。我们看到AI这次写的代码这是Python 3.14引入的t字符串也就是模板字符串下面有它的主要作用可以进行延迟求值自定义处理最重要的一个安全检查基本上把t字符串的功能都列清楚了代码生成的很不错。从这个例子里面我们使用context 7 MCP为AI引入了Python 3.14的最新知识。在它的GitHub文档里面有Codex的配置方式苹果电脑就用这一串[mcp_servers.context7]args [-y, upstash/context7-mcp, --api-key, YOUR_API_KEY]command npx然后Windows电脑就用这一串[mcp_servers.context7]command cmdargs [/c,npx,-y,upstash/context7-mcp,--api-key,YOUR_API_KEY]env { SystemRootC:\Windows }startup_timeout_ms 20_000这里我就不赘述了。Ref MCP与context7 MCP类似的是这一个Ref MCP也可以用来查找文档。https://github.com/ref-tools/ref-tools-mcp它们的主要区别是Context7 MCP只能从它的Context7的标准文件库里面进行检索而这个Ref MCP就更加灵活一些它可以从更冷门的地方进行文档的深入检索比如检索论文检索Github仓库等等。下面也有详细的配置方式它跟context7的功能用起来差不多这里我就不详细演示了。Replica MCP我们使用AI编程的时候有时候想快速生产一个产品原型但是这里面的配图不太好找这时候完全可以让AI帮我们先生成一张图片放在这里面先用着。这样可以改善产品的美观度大幅提高观感。这里我用的图片生成网站是Replicate。https://replicate.com它提供API的调用方式来生成AI图片。Replicate也有MCP我们把这个MCP来配置一下。我们先在Claude Code里面配置修改生产的配置文件C:\Users\你的用户名.claude.json我们这里要做的是把这个参数添加上这里需要一个Replicate API TOKEN。我们来到Replicate的首页这里找到API TOKEN随便起个名字然后点击create这样把TOKEN复制一下粘贴到配置文件里面。{mcpServers: {Replicate Flux MCP: {command: npx,args: [-y,replicate-flux-mcp],env: {REPLICATE_API_TOKEN: 你的API KEY}}}}这样就配置成功了。我们启动下Claude Code。我让它生成一个可爱的猫的图片提示词注意用英文的。调用了Replicate MCP工具然后生成了一张图片。我们快速来看一下怎么在Codex里面配置这个MCP。进入Codex的配置文件这是在Windows上面的配置方法[mcp_servers.replicate]command cmdargs [/c,npx,-y,replicate-flux-mcp]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files, REPLICATE_API_TOKENr8_MPwJVCYxBSvrYNSETThDE69JQwAAk9SC3r7XSW }startup_timeout_ms 60_000注意我们要在配置项里面把replicate的API token写上。接下来这是Mac电脑的配置文件写法。[mcp_servers.replicate]command npxargs [-y,replicate-flux-mcp]env {REPLICATE_API_TOKENr8_MPwJVCYxbSvrYNSETHDE69JQwAAk9sC3r7XSW}我们来看一个实际案例给这个热气球网站新建一个销售套餐网页设计6个套餐可供选择图片调用Replicate生成后端可以先不用实现。AI开始编写代码了这里它调用了Replicate MCP工具一口气生成了6个图片。我们看到它的配图跟这个套餐还是很贴合的基本上完美的实现了我们的需求而且给网页增色不少。Vercel代码写好了现在需要一个平台快速把它部署上线。Vercel就是一个免费提供项目部署的平台。Next.js就是由Vercel开发维护的框架我们使用Next.js开发的這個热气球网站跟Vercel平台是绝配。接下来我们就使用Vercel的MCP一句话把它部署上线。我们来到Vercel 的文档站https://vercel.com/docs这里搜索MCP在左侧找到Vercel MCP Server。这里有Claude Code的配置方式把这个配置命令复制一下把命令粘贴过来回车。我们启动一下Claude Code/mcp这里Vercel的MCP需要先登录一下回车浏览器会自动打开一个窗口我们点击授权授权完成以后就连接成功了。我让AI用MCP把这个项目部署到Vercel上面这样就完成了部署。这里有一个预览地址我们看一下Vercel的这个域名只有在国外的上网环境才可以看到。https://hot-air-balloon-travel-ixqulcc39-tech-shrimps-projects.vercel.app/页面都成功显示出来了部署完成。除了部署项目Vercel MCP还可以用来查找信息。比如我问他我有哪些Vercel项目他先调用MCP工具获取到我的团队信息然后查找这个团队下面所有的项目最终查找到了这三个项目是完全正确的。我们来快速看一下怎么把Vercel的MCP配置到Codex里面这是Windows系统的配置文件的写法。[mcp_servers.vecel]command cmdargs [/c,npx,-y,mcp-remotelatest,https://mcp.vercel.com]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files }startup_timeout_ms 60_000这是Mac电脑上面配置文件的写法。[mcp_servers.vecel]command npxargs [-y,mcp-remotelatest,https://mcp.vercel.com]Edgeone PagesVercel是一个国外的部署平台在国内使用可能会遇到各种各样的网络问题。在国内也有一个类似的部署平台EdgeOne Pageshttps://console.tencentcloud.com/edgeone/pages它同样提供MCP工具可以把项目一键免费部署到EdgeOne Pages上面。在这期视频里面我对EdgeOne Pages MCP有过详细介绍了这里我就不赘述了。https://www.bilibili.com/video/BV1o6ngztEKx/Cloudflare另外一个重要的无服务器部署平台就是Cloudflare。https://github.com/cloudflare/mcp-server-cloudflareCloudflare提供了很多种MCP Server可以用来查找文档可以把项目部署到Cloudflare Worker上面可以用来监控日志可以用来查询全球互联网流量趋势启动沙箱开发环境等等。每个MCP Server后面都有一个对应的URL我们在配置的时候注意把后面的URL替换一下就可以获得各种各样的功能。如果想知道它的具体功能可以点击这个链接进行更深入的查看。基本上Cloudflare所有的API功能都被整合进来了。它的用法跟Vercel比较相似这里我就不展开演示了。GithubGithub MCP Server由Github的官方推出https://github.com/github/github-mcp-server可以把我们的AI coding agent直接连接到Github平台。这样AI就能读取到资源库还有代码文件可以用来管理问题和创建PR分析代码并且自动化的执行流程。这里我先从Claude Code配置一下claude mcp add github --transport http https://api.githubcopilot.com/mcp/接下来我们来到配置文件再把API Key添加上。我们来到GitHub右上角settings左边找到Developer settings - generate new TOKEN这里选择经典随便起个名字然后在下面把权限都给它勾选上然后点击生成把创建出来的TOKEN复制一下粘贴到配置文件里面(Bearer 后面就是API Key)。我们再启动一下Claude Code配置完成。我们就把AI跟GitHub平台完全打通了。我们来快速看一下Codex上面怎么配置GitHub MCP Server这是Windows的配置文件的写法[mcp_servers.github]command cmdargs [/c,npx,-y,mcp-remotelatest,https://api.githubcopilot.com/mcp/,--header,Authorization: Bearer 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]env { SystemRootC:\Windows, PROGRAMFILESC:\Program Files }startup_timeout_ms 60_000注意这里要添一个参数叫header然后在里面填写上GitHub的API TOKEN。这是Mac电脑上面的配置文件的写法。[mcp_servers.github]command npxargs [-y,mcp-remotelatest,https://api.githubcopilot.com/mcp/,--header,Authorization: Bearer ghp_AchbdqXqYqGCsVHU5HQZGK447lCfgT0Vyyd6]我有这么一个AI你画我猜的游戏右下角的这个让AI猜一猜的按钮非常的淡看不清楚写的是什么。然后代码是在Github上面的这时候可能下载到我这套代码的人会在上面提一个issue。有人会提交issue说提交按钮看不清楚。然后我们就可以让AI结合Github MCP自动把这个问题修复。我的提示词是你看一下issue3然后自动修复一下创建一个pull request。它调用了Github MCP先获取到了这个issue。AI进行了代码修改修复了这个问题。我们看到按钮已经可以看得清楚了。然后他又调用了Github MCP创建了一个pull request把刚才的修改以一个PR的形式提交了上去。我们在Github的pull request里面就可以看到AI推送上来的代码这里有他的改动内容最终任务完成。这样一个从Github这边产生的issueAI对代码进行了本地修改又以一个pull request的形式推送到了Github上面把一个bug修复的全流程就跑通了。StripeStripe是近期最流行的收款服务平台。Stripe MCP就是把Stripe平台的各种能力对接给AI。这是我的一个测试账号现在只创建了一个沙盒环境。我们使用它来演示一下Stripe MCP。在Claude Code里面执行claude mcp add stripe --transport http https://mcp.stripe.com/然后进入Claude Code/mcp这里登录一下在浏览器点击授权。我的提示词是用Next.js创建一个商品支付页面商品信息用MCP从Stripe获取只实现基础的支付功能即可无需复杂的后台逻辑。AI调用了Stripe MCP获取了商品的信息调用Stripe MCP获取到了这些商品的价格然后他开始编写业务代码。代码编写完成以后我们需要从Stripe的控制台获取这两个key一个公钥一个私钥。配置完成以后我们把项目启动起来看一下。这里有3个商品是从我Stripe的产品目录读取的。然后客户可以下单购买这里我填写一个测试环境可以用的银行卡然后点击支付支付成功。这个流程就跑通了。在Stripe的后台里面就可以看到这条交易信息。这样我们使用Stripe MCP给产品接入了支付的能力。..ShadCNShadCN是一个非常好用的前端组件库https://ui.shadcn.com/#在这里面几乎可以找到任何一种前端组件美观又好用。我们可以在component这里选中一个组件然后在code这里把代码复制到我们的项目里面来。当然我们也可以让AI自动来这边查找然后把代码给我们复制到项目里面。在左边找到MCP Server这里面有Claude Code的配置方式。把这个命令复制下来执行一下。我让AI帮我弄一个ShadCN的Button组件这样AI就完成了代码的编写。这个MCP用起来很方便。Semgrep我们使用AI写代码最不放心的就是它的安全性。Semgrep MCP可以帮助我们进行安全漏洞的扫描。https://semgrep.dev/docs/mcp?utm_sourcechatgpt.com它是一个安全静态分析工具内置了5,000多条安全规则。我们可以使用这个MCP Server把它的安全扫描能力对接给AI对我们的项目进行一个整体扫描及时发现漏洞。在文档站这里有一个Github链接下面有它的配置方式。这也是一个Http的。我们从Claude Code里面配置一下我让他用这个MCP对代码进行安全扫描。我们看到AI调用了MCP工具对代码进行静态的安全扫描。扫描完成未发现安全问题。下面是这些扫描项都完美的符合了我们的代码还是写得不错的。MCP SDK终于我们来到了视频的最后第15个MCP这里我不准备介绍具体的MCP Server了。我们看的是GitHub MCP的官方仓库https://github.com/modelcontextprotocol这里面提供了很多的SDK我们可以使用这些SDK创建属于我们自己的MCP Server。别人的写的再好终究不如自己的好用。如果有什么想法我们可以选择自己喜爱的编程语言创建属于自己的MCP Server。在这期视频里面我详细介绍了