Loop Skills MCP
Loop's design & brand skills, served as an MCP server so anyoneat Loop can use them from any MCP client — Nexus, Claude (claude.ai / Claude Code / Desktop), Cursor, etc.
A skill is a markdown playbook (plus supporting files and brand assets) that teaches an AI agent howto do a Loop task the right way: on-brand, grounded in real components/assets, with verification steps.
Skills served
| Skill | Use for |
|---|---|
loop-brand-deck |
Client-facing sales/marketing decks (.pptx) grounded in the real brand system |
loop-marketing-subpage |
New bankonloop.com sub-page prototypes (HTML, pre-Webflow) |
generate-loop-ui |
Product UI screens/components in next-app using real components |
prototype-loop-ui |
Sandboxed, throwaway product-UI prototypes (never touches real code) |
loop-email-template |
Transactional email templates (MJML → SendGrid) |
reconcile-loop-design-system |
Audit code vs design tokens; document components into Figma |
How agents use it
list_skills— catalog of skills + when to use eachget_skill(name)— the full SKILL.md instructions + a manifest of supporting filesget_skill_file(skill, path)— supporting text files (docs, build scripts, specs)- Binary assets (logos, fonts, backgrounds, product shots) are plain HTTPS URLs under
/skills/<skill>/…— agents download what the instructions reference.
Connecting a client
- Endpoint:
https://<deployment>/mcp(Streamable HTTP; SSE at/sseneedsREDIS_URL) - Auth: set the
MCP_AUTH_TOKENenv var on Vercel, then clients sendAuthorization: Bearer <token>. If the env var is unset the server is open — fine for localdev, not for the deployed instance (brand assets are proprietary).
Nexus: add an MCP server with the URL above and the bearer token, same as the payments MCP.
Claude Code: claude mcp add --transport http loop-skills https://<deployment>/mcp --header "Authorization: Bearer <token>"
Adding or updating a skill
- Drop a folder into
skills/<skill-name>/containing aSKILL.mdwith YAML frontmatter(name:anddescription:— the description is what tells agents when to use it). - Put supporting docs/scripts/assets anywhere inside the folder; reference them by relativepath from the SKILL.md.
- Push. Vercel rebuilds;
scripts/build-manifest.mjspicks the skill up automatically(it runs on every build — no server code changes needed).
Editing a skill = editing its files and pushing. The manifest and asset URLs regenerate on build.
Local dev
npm install
npm run dev # manifest is generated automatically, then http://localhost:3000
Smoke test:
curl -s http://localhost:3000/mcp -X POST \
-H 'content-type: application/json' -H 'accept: application/json, text/event-stream' \
-d '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}'
Deploying (Vercel)
- Import this repo into Vercel (framework preset: Next.js — no special settings).
- Add env var
MCP_AUTH_TOKEN(generate one:openssl rand -hex 24). - Optionally
PUBLIC_BASE_URL=https://<your-domain>if serving behind a custom domain,so asset URLs in tool responses point at the right host. - Register the URL + token in Nexus.
Repo layout
skills/ ← the skills themselves (source of truth; add here)
scripts/build-manifest.mjs ← scans skills/ → lib/skills-manifest.json + public/skills/
app/[transport]/route.ts ← the MCP server (mcp-handler): list_skills / get_skill / get_skill_file
app/page.tsx ← human-readable landing page listing the skills
Internal to Loop Financial — brand assets are proprietary; keep the repo private and thedeployment token-protected.
