Tutorials, end-to-end walkthroughs, and complete reference projects for FrontMCP. Use when you want a getting-started guide, a full worked example, or to learn best practices by following a step-by-step build rather than a single API reference. Includes a beginner weather-API server (tool plus static resource, Zod schemas, E2E tests), an authenticated task manager (CRUD tools, Redis storage, OAuth, Vercel deploy, authenticated E2E tests), and a multi-app knowledge base (vector search, semantic resources, an AI research agent, audit logging). Triggers: tutorial, walkthrough, how do I build, getting started, end-to-end example, sample project, learn FrontMCP, full app example.
Instrucciones de origen · Vista previa de solo lectura
name
frontmcp-guides
description
Tutorials, end-to-end walkthroughs, and complete reference projects for FrontMCP. Use when you want a getting-started guide, a full worked example, or to learn best practices by following a step-by-step build rather than a single API reference. Includes a beginner weather-API server (tool plus static resource, Zod schemas, E2E tests), an authenticated task manager (CRUD tools, Redis storage, OAuth, Vercel deploy, authenticated E2E tests), and a multi-app knowledge base (vector search, semantic resources, an AI research agent, audit logging). Triggers: tutorial, walkthrough, how do I build, getting started, end-to-end example, sample project, learn FrontMCP, full app example.
[{"scenario":"Build a simple weather API MCP server from scratch","expected-outcome":"Working server with tools, resources, and tests deployed to Node"},{"scenario":"Build a task manager with auth, Redis, and multi-tool patterns","expected-outcome":"Authenticated server with CRUD tools, session storage, and E2E tests"},{"scenario":"Build a multi-app knowledge base with agents and plugins","expected-outcome":"Composed server with multiple apps, AI agents, caching, and Vercel deployment"}]
FrontMCP End-to-End Guides
Complete build walkthroughs and best practices for FrontMCP servers. Each example starts from an empty directory and ends with a deployed, tested server. Every pattern references the specific skill that teaches it.
When to Use This Skill
Must Use
Starting a new FrontMCP project from scratch and want a complete walkthrough to follow
Learning FrontMCP architecture by building progressively complex real examples
Need to see how multiple skills work together in a complete application
Recommended
Planning a new project and want to see how similar architectures are structured
Onboarding a team member who learns best from complete working examples
Reviewing best practices for file organization, naming, and code patterns
Skip When
You need to learn one specific component type (use the specific reference, e.g., create-tool under frontmcp-development/references/)
Looking for the right reference for a task (use domain routers: frontmcp-development, frontmcp-deployment, etc.)
You need CLI/install instructions for the skills system (see frontmcp-skills-usage)
Decision: Use this skill when you want to see how everything fits together. Open individual references under each router's references/ directory when you need focused instruction.
Prerequisites
Node.js 24+ and npm/yarn installed
Familiarity with TypeScript and decorators
frontmcp CLI available globally (npm install -g frontmcp)
Steps
Choose an example that matches your project's complexity level (Beginner, Intermediate, Advanced)
Work through the Planning Checklist to define your project's scope
Follow the example code and architecture, referencing individual skills for deeper guidance
Verify your implementation using the Verification Checklist at the end of this skill
Planning Checklist
Before writing any code, answer these questions:
1. What does the server do?
What tools does it expose? (actions AI clients can call)
What resources does it expose? (data AI clients can read)
What prompts does it expose? (conversation templates)
2. How is it organized?
Single app or multiple apps? (see multi-app-composition)
Standalone project or Nx monorepo? (see project-structure-standalone, project-structure-nx)
3. How is it secured?
Public (no auth), transparent (passthrough), local (self-contained), or remote (OAuth)? (see configure-auth)
What session storage? Memory (dev), Redis (prod), Vercel KV (serverless)? (see configure-session)
4. Where does it deploy?
Node, Vercel, Lambda, Cloudflare, CLI, browser, or SDK? (see frontmcp-deployment)
What transport? stdio (local), SSE (streaming), Streamable HTTP (stateless)? (see configure-transport)
Use the class itself as the DI token (this.get(TaskStoreProvider)). For factory-built singletons (e.g. when you need async setup before the class is constructed), use AsyncProvider({ provide, name, scope, useFactory }) instead.
@Agent({
name: 'research_topic',
description: 'Research a topic across the knowledge base and synthesize findings',
inputSchema: {
topic: z.string().describe('Research topic'),
depth: z.enum(['shallow', 'deep']).default('shallow'),
},
llm: {
provider: 'anthropic',
model: 'claude-sonnet-4-6',
apiKey: { env: 'ANTHROPIC_API_KEY' },
maxTokens: 4096,
}, // provider and model are client-configurableexecution: { maxIterations: 5 },
systemInstructions:
'Search for relevant documents using search_docs, synthesize findings, and produce a structured summary with source attribution.',
tools: [SearchDocsTool, IngestDocumentTool],
})
exportclassResearcherAgentextendsAgentContext {}
The framework drives the LLM tool-use loop via the agents:call-agent flow — you don't override execute(). Configure iteration limits and other runtime knobs through the @Agent({ execution: { maxIterations } }) block.
Full working code: See references/example-knowledge-base.md
Best Practices
Planning
Practice
Why
Reference
Start with the @App boundaries, not individual tools
Apps define module boundaries; tools are implementation details
multi-app-composition
Choose auth mode and storage before writing tools
Auth affects session handling, which affects storage requirements
configure-auth, configure-session
Pick your deployment target early
Target determines transport, storage, and build constraints
Shows how to create a tool with Zod input and output schemas, use this.fetch() for HTTP calls, and handle errors with this.fail().
Accessing This Skill
Skills are distributed as plain SKILL.md files plus a sibling references/
and examples/ tree, so consumers can pick whichever access mode fits:
Mode
How it works
Filesystem
Read libs/skills/catalog/frontmcp-guides/ directly from a clone of the catalog repo, or from a published @frontmcp/skills install. SKILL.md is the entry point.
frontmcp CLI
frontmcp skills list, frontmcp skills read frontmcp-guides, frontmcp skills read frontmcp-guides:references/<file>.md, frontmcp skills install frontmcp-guides — no server required.
MCP skill://
When a developer mounts this skill into their own FrontMCP server (@FrontMcp({ skills: [...] })), the SDK exposes it via SEP-2640 resources: skill://frontmcp-guides/SKILL.md, skill://frontmcp-guides/references/{file}.md, etc. The server’s skill://index.json returns the SEP-2640 discovery document for everything mounted on it.
The catalog itself is not an MCP server. The skill:// URIs only resolve
when a server has been configured to host this skill.
Core references: setup-project, create-tool, create-resource, create-provider, create-agent, configure-auth, setup-testing (each lives under its parent router's references/ directory, e.g. frontmcp-development/references/create-tool.md)
Mandatory boundaries: import MCP protocol types and McpError from @frontmcp/protocol (never directly from @modelcontextprotocol/sdk); use @frontmcp/utils for crypto and file-system operations.
