能力标签
🔌
MCP工具

个人作品集

基于 TypeScript · 让 AI 助手直接操作你的系统与工具
英文名:portfolio
⭐ 12 Stars 🍴 1 Forks 💻 TypeScript 📄 未公布协议 🏷 AI 8.0分
8.0AI 综合评分
nextjsreactjstypescript
✦ AI Skill Hub 推荐

AI Skill Hub 强烈推荐:个人作品集 是一款优质的MCP工具。AI 综合评分 8.0 分,在同类工具中表现稳健。如果你正在寻找可靠的MCP工具解决方案,这是一个值得深入了解的选择。

📚 深度解析
个人作品集 是一款基于 MCP(Model Context Protocol)标准协议的 AI 工具扩展。MCP 协议由 Anthropic 开发并开源,旨在建立 AI 模型与外部工具之间的标准化通信接口,目前已被 Claude Desktop、Claude Code、Cursor 等主流 AI 工具采纳。

通过安装 个人作品集,你的 AI 助手将获得额外的工具调用能力,可以用自然语言直接操控该工具的功能,无需学习复杂的命令行语法。MCP 工具的核心价值在于"一次配置,永久增强"——配置完成后,每次与 AI 对话时都可以无缝调用这些工具。

在技术实现上,MCP 工具通过标准的 JSON-RPC 协议与 AI 客户端通信,工具的功能以"工具列表"的形式暴露给 AI 模型,AI 可以按需调用。个人作品集 提供了结构化的工具调用接口,使 AI 模型能够精确地理解和使用每个功能点,显著降低 AI 在工具使用上的错误率。

与传统的 API 集成相比,MCP 工具的优势在于无需编写代码——用户只需在配置文件中添加几行 JSON,即可让 AI 获得全新能力。AI Skill Hub 将 个人作品集 评为 AI 评分 8.0 分,属于同类工具中的优质选择。
📋 工具概览

个人作品集 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。

GitHub Stars
⭐ 12
开发语言
TypeScript
支持平台
Windows / macOS / Linux
维护状态
轻量级项目,按需更新
开源协议
未公布
AI 综合评分
8.0 分
工具类型
MCP工具
Forks
1
📖 中文文档
以下内容由 AI Skill Hub 根据项目信息自动整理,如需查看完整原始文档请访问底部「原始来源」。

个人作品集 是一款遵循 MCP(Model Context Protocol)标准协议的 AI 工具扩展。通过 MCP 协议,它可以让 Claude、Cursor 等主流 AI 客户端直接访问和操作外部工具、数据源和服务,实现 AI 能力的无缝扩展。无论是文件操作、数据库查询还是 API 调用,都可以通过自然语言在 AI 对话中直接触发,极大提升生产效率。

📌 核心特色
  • 通过标准 MCP 协议与 Claude、Cursor 等主流 AI 客户端深度集成
  • 提供结构化工具调用接口,显著降低 AI 集成复杂度
  • 支持 Claude Desktop 和 Claude Code 无缝接入,开箱即用
  • 可与其他 MCP 工具组合叠加,构建完整 AI 工作站
  • 轻量无侵入设计,不影响现有系统架构
🎯 主要使用场景
  • 在 Claude Desktop 对话中直接调用本地工具,实现 AI 与系统的深度联动
  • 通过自然语言驱动复杂的多步骤自动化任务,代替繁琐手动操作
  • 将多个 MCP 工具组合使用,构建个人专属 AI 工作站
以下安装命令基于项目开发语言和类型自动生成,实际以官方 README 为准。
安装命令
# 方式一:通过 Claude Code CLI 一键安装
claude skill install https://github.com/erikunha/portfolio

# 方式二:手动配置 claude_desktop_config.json
{
  "mcpServers": {
    "-----": {
      "command": "npx",
      "args": ["-y", "portfolio"]
    }
  }
}

# 配置文件位置
# macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
# Windows: %APPDATA%/Claude/claude_desktop_config.json
📋 安装步骤说明
  1. 确认已安装 Node.js(v18 或以上版本)
  2. 打开 Claude Desktop 或 Claude Code 的 MCP 配置文件
  3. 按「交给 Agent 安装 → Claude Desktop」标签中的 JSON 配置填入 mcpServers 字段
  4. 保存配置文件并重启 Claude 客户端
  5. 重启后,在对话中即可使用本工具
以下用法示例由 AI Skill Hub 整理,涵盖最常见的使用场景。
常用命令 / 代码示例
# 安装后在 Claude 对话中直接使用
# 示例:
用户: 请帮我用 个人作品集 执行以下任务...
Claude: [自动调用 个人作品集 MCP 工具处理请求]

# 查看可用工具列表
# 在 Claude 中输入:"列出所有可用的 MCP 工具"
以下配置示例基于典型使用场景生成,具体参数请参照官方文档调整。
配置示例
// claude_desktop_config.json 配置示例
{
  "mcpServers": {
    "_____": {
      "command": "npx",
      "args": ["-y", "portfolio"],
      "env": {
        // "API_KEY": "your-api-key-here"
      }
    }
  }
}

// 保存后重启 Claude Desktop 生效
📑 README 深度解析 真实文档 完整度 32/100 查看 GitHub 原文 →
以下内容由系统直接从 GitHub README 解析整理,保留代码块、表格与列表结构。

erikunha.dev

Single-page Next.js 16 portfolio deployed to Vercel Edge. RSC-first composition of ~18 sections with four client islands, a streaming LLM endpoint, a durable contact form, and a CI pipeline that enforces performance, accessibility, and bundle size as hard contracts.

Live: erikunha.dev

<p> <img alt="Next.js 16" src="https://img.shields.io/badge/Next.js-16-000?logo=nextdotjs&logoColor=white" /> <img alt="React 19" src="https://img.shields.io/badge/React-19-149ECA?logo=react&logoColor=white" /> <img alt="TypeScript strict" src="https://img.shields.io/badge/TypeScript-strict-3178C6?logo=typescript&logoColor=white" /> <img alt="Vercel" src="https://img.shields.io/badge/Vercel-Edge-000?logo=vercel&logoColor=white" /> <img alt="pnpm 10" src="https://img.shields.io/badge/pnpm-10+-F69220?logo=pnpm&logoColor=white" /> <img alt="Node 22" src="https://img.shields.io/badge/Node-22+-417E38?logo=nodedotjs&logoColor=white" /> <img alt="Biome" src="https://img.shields.io/badge/Biome-lint%20%2B%20format-60A5FA?logo=biome&logoColor=white" /> <img alt="Vitest" src="https://img.shields.io/badge/Vitest-unit-6E9F18?logo=vitest&logoColor=white" /> <img alt="Playwright" src="https://img.shields.io/badge/Playwright-E2E%20%2B%20a11y-2EAD33?logo=playwright&logoColor=white" /> <img alt="Lighthouse CI" src="https://img.shields.io/badge/Lighthouse-CI%20gates-F44B21?logo=lighthouse&logoColor=white" /> <img alt="Anthropic" src="https://img.shields.io/badge/Anthropic-Haiku%204.5-D97757?logo=anthropic&logoColor=white" /> <img alt="License" src="https://img.shields.io/badge/code-MIT-blue" /> </p>

---

This is Erik Cunha's hiring artifact for Staff/Principal frontend and applied-AI roles. The codebase demonstrates the engineering it claims — a site that says "performance-first" but ships a 400 KB JS bundle is self-disqualifying. Every architectural decision is documented in ARCHITECTURE.md with trade-offs and reversibility notes.

The AI centerpiece is a streaming ask endpoint (Vercel AI Gateway + Anthropic Haiku 4.5, prompt-cached, rate-limited, budget-capped) with a correctness eval suite and a visible metrics panel — making AI quality observable to hiring reviewers. Agent-readiness surfaces include /.well-known/agent.json and a minimal MCP server.

---

Quickstart

git clone git@github.com:erikunha/portfolio.git
cd portfolio
pnpm install
cp .env.example .env.local   # fill in API keys
pnpm dev                      # http://localhost:3000
pnpm test                     # unit tests (vitest)
pnpm test:e2e                 # Playwright E2E + a11y
pnpm build                    # production build

The static page renders without environment variables. Runtime endpoints (/api/ask, /api/contact, /api/lighthouse) error until keys are set. See .env.example for the full variable list.

---

Reference docs

DocWhat it covers
[ARCHITECTURE.md](./ARCHITECTURE.md)System design, component deep-dives, trade-offs, what to revisit
[STANDARDS.md](./STANDARDS.md)Engineering bar — 11 domain chapters, each with an enforcement mechanism
[DECISIONS.md](./DECISIONS.md)Running ADR log — why decisions were made and how to reverse them
[CLAUDE.md](./CLAUDE.md)AI assistant instructions (auto-loaded by Claude Code each session)

---

🎯 aiskill88 AI 点评 A 级 2026-05-25

高质量的开源MCP工具,值得学习

📚 实用指南(长尾问题)
适合谁
  • 需要让 Claude / Cursor 操作本地工具的 AI 工程师
  • 构建多智能体协作系统的 Agent 开发者
最佳实践
  • 配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC,避免暴露公网
  • Agent 任务先做 dry-run 验证工具调用链,再开启自主执行
常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)
  • MCP 配置路径拼错或权限不足,重启 Claude Desktop 才生效
部署方案
  • 云端托管:可放在 Vercel / Railway / Fly.io 等 PaaS 平台
相关搜索
portfolio 中文教程portfolio 安装报错怎么办portfolio MCP 配置portfolio Agent 工作流portfolio 与同类工具对比portfolio 最佳实践portfolio 适合谁用
⚡ 核心功能
👥 适合谁
  • 需要让 Claude / Cursor 操作本地工具的 AI 工程师
  • 构建多智能体协作系统的 Agent 开发者
⭐ 最佳实践
  • 配置 MCP 服务器时建议使用 stdio 传输 + JSON-RPC,避免暴露公网
  • Agent 任务先做 dry-run 验证工具调用链,再开启自主执行
⚠️ 常见错误
  • API key 直接提交到 git 仓库(请用 .env 并加入 .gitignore)
  • MCP 配置路径拼错或权限不足,重启 Claude Desktop 才生效
👥 适合人群
Claude Desktop / Claude Code 用户AI 工具开发者需要扩展 AI 能力的专业人士自动化工程师
🎯 使用场景
  • 在 Claude Desktop 对话中直接调用本地工具,实现 AI 与系统的深度联动
  • 通过自然语言驱动复杂的多步骤自动化任务,代替繁琐手动操作
  • 将多个 MCP 工具组合使用,构建个人专属 AI 工作站
⚖️ 优点与不足
✅ 优点
  • +标准化 MCP 协议,生态互联性强
  • +与 Claude 官方生态无缝对接
  • +即插即用,配置简单快捷
⚠️ 不足
  • 未明确开源协议,商用场景需谨慎评估
  • 依赖 Claude 客户端,非 Claude 用户无法使用
  • MCP 协议仍在持续演进,接口可能变更
  • 需要一定的配置步骤
⚠️ 使用须知

该工具未明确声明开源协议,商业使用前请联系原作者确认授权范围,避免侵权风险。

AI Skill Hub 为第三方内容聚合平台,本页面信息基于公开数据整理,不对工具功能和质量作任何法律背书。

建议在沙箱或测试环境中充分验证后,再部署至生产环境,并做好必要的安全评估。

🔗 相关工具推荐
🧩 你可能还需要
基于当前 Skill 的能力图谱,自动补全的工具组合
❓ 常见问题 FAQ
portfolio 是一款TypeScript开发的AI辅助工具。开源MCP工具:Personal portfolio site built with Next.js 16 (App Router, RSC-first), React 19,。⭐12 · TypeScript 主要应用场景包括:展示个人项目和技能。
💡 AI Skill Hub 点评

总体来看,个人作品集 是一款质量优秀的MCP工具,在同类工具中具备一定竞争力。AI Skill Hub 将持续追踪其更新动态,建议收藏备用,结合自身场景选择合适时机引入使用。

⬇️ 获取与下载
⚠️ 该工具未声明开源协议,不提供直接下载。请访问原项目了解使用条款。
📚 深入学习 个人作品集
查看分步骤安装教程和完整使用指南,快速上手这款工具
🌐 原始信息
原始名称 portfolio
原始描述 开源MCP工具:Personal portfolio site built with Next.js 16 (App Router, RSC-first), React 19,。⭐12 · TypeScript
Topics nextjsreactjstypescript
GitHub https://github.com/erikunha/portfolio
语言 TypeScript
🔗 原始来源
🐙 GitHub 仓库  https://github.com/erikunha/portfolio 🌐 官方网站  https://erikunha.dev/

收录时间:2026-05-25 · 更新时间:2026-05-26 · License:未公布 · AI Skill Hub 不对第三方内容的准确性作法律背书。