frontmcp-guides

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.

Ir para a instalação

Repositório: agentfront/frontmcp
Última atividade na origem: 5 de junho de 2026 às 00:39
Idioma detectado do SKILL.md: inglês
Estrelas: 147
Forks: 6

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

npx skills add https://github.com/agentfront/frontmcp --skill frontmcp-guides

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

13 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

Voltar à pesquisa Voltar à instalação

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.
tags	["guides","examples","best-practices","architecture","walkthrough","end-to-end"]
category	guides
targets	["all"]
bundle	["recommended","full"]
priority	10
visibility	both
license	Apache-2.0
metadata	{"docs":"https://docs.agentfront.dev/frontmcp/guides/your-first-tool"}
examples	[{"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

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

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	`frontmcp-deployment`

Practice	Why	Reference
One class per file with `<name>.<type>.ts` naming	Consistency, generator compatibility, clear imports	`project-structure-standalone`
Group by feature, not by type, for 10+ components	Feature folders scale better than flat `tools/` directories	`project-structure-standalone`
Extract shared logic into `@Provider` classes	Testable, lifecycle-managed, injected via DI	`create-provider`

Practice	Why	Reference
Always define `outputSchema` on tools	Prevents data leaks, enables CodeCall chaining	`create-tool`
Use `this.fail()` with MCP error classes	Proper error codes in protocol responses	`create-tool`
Use `this.get(TOKEN)` not `this.tryGet(TOKEN)!`	Clear error on missing dependency vs silent null	`create-provider`
Use Zod raw shapes, not `z.object()`	Framework wraps internally; double-wrapping breaks validation	`create-tool`

Pattern	Correct	Incorrect	Why
Project start	Plan apps and auth first, then build tools	Jump straight into writing tools	Architecture decisions are expensive to change later
Code organization	Feature folders with `<name>.<type>.ts`	Flat directory with generic names	Scales to large projects and matches generator output
Shared state	`@Provider` with DI token	Module-level singleton or global variable	DI is testable, lifecycle-managed, and scoped per request
Error handling	`this.fail(new ResourceNotFoundError(...))`	`throw new Error('not found')`	MCP error codes enable proper client error handling
Testing	Unit tests per component + E2E for protocol	Only E2E tests or only unit tests	Both layers catch different types of bugs

Problem	Cause	Solution
Unsure where to start	No project plan	Run through the Planning Checklist above before writing code
Architecture feels wrong	Wrong app boundaries or component types	Review the Scenario Routing Table in `frontmcp-development`
Feature works locally but fails deployed	Environment-specific config (storage, auth, transport)	Check the Target Comparison in `frontmcp-deployment`
Tests pass but coverage below 95%	Missing error path or branch tests	Run `jest --coverage` and add tests for uncovered lines
Provider state leaking between requests	Using module-level state instead of DI	Move state into a `@Provider` scoped per request

Example	Level	Description
`agent-and-plugin`	Advanced	Shows an autonomous research agent with inner tools and configurable depth, and a plugin that hooks into tool execution for audit logging.
`multi-app-composition`	Basic	Shows how to compose multiple apps (Ingestion, Search, Research) into a single server with shared providers, plugins, and agent registration.
`vector-search-and-resources`	Intermediate	Shows a semantic search tool with embedding generation and a resource template for retrieving documents by ID using URI parameters.

Example	Level	Description
`auth-and-crud-tools`	Basic	Shows how to create CRUD tools with authentication, using `this.context.session` for user isolation and `this.get()` for dependency injection.
`authenticated-e2e-tests`	Advanced	Shows how to write E2E tests with authentication using `TestTokenFactory`, and unit tests for tools that require session context.
`redis-provider-with-di`	Intermediate	Shows how to create a Redis-backed provider with a DI token, lifecycle hooks (`onInit`/`onDestroy`), and how tools inject it.

Example	Level	Description
`server-and-app-setup`	Basic	Shows the server entry point, app registration, and static resource for a beginner FrontMCP weather API server.
`unit-and-e2e-tests`	Intermediate	Shows how to write unit tests for tools by mocking context methods, and E2E tests using `McpTestClient` and `TestServer`.
`weather-tool-with-schemas`	Basic	Shows how to create a tool with Zod input and output schemas, use `this.fetch()` for HTTP calls, and handle errors with `this.fail()`.

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.

frontmcp-guides

Informações da origem

Opções de instalação

Revise os arquivos de origem

Mais deste repositório

FrontMCP End-to-End Guides

When to Use This Skill

Must Use

Recommended

Skip When

Prerequisites

Steps

Planning Checklist

1. What does the server do?

2. How is it organized?

FrontMCP End-to-End Guides

When to Use This Skill

Must Use

Recommended

Skip When

Prerequisites

Steps

Planning Checklist

1. What does the server do?

2. How is it organized?

3. How is it secured?

4. Where does it deploy?

5. How is it tested?

Example 1: Weather API (Beginner)

Architecture

Key Code

Example 2: Task Manager (Intermediate)

Architecture

Key Code

Example 3: Knowledge Base (Advanced)

Architecture

Key Code

Best Practices

Planning

Organizing Code

Writing Code

Common Patterns

Verification Checklist

Architecture

Code Quality

Production Readiness

Troubleshooting

Examples

example-knowledge-base

example-task-manager

example-weather-api

Accessing This Skill

Reference

Mais deste repositório

`example-knowledge-base`

`example-task-manager`

`example-weather-api`