Decorator-Driven Development

FrontMCP uses TypeScript decorators as the primary API. Every component — servers, apps, tools, resources, prompts, agents, skills, providers, plugins, and flows — is defined with a decorator on a class or function.

Decorator Inventory

Decorator	Purpose	Base Class
`@FrontMcp`	Server entry point	—
`@App`	Capability container	—
`@Tool`	AI-callable action	`ToolContext`
`@Resource` / `@ResourceTemplate`	Data endpoint	`ResourceContext`
`@Prompt`	Message template	`PromptContext`
`@Agent`	LLM-powered actor	`AgentContext`
`@Skill`	Workflow guide	`SkillContext`
`@Provider`	DI service	—
`@Plugin`	Extension	`DynamicPlugin`
`@Adapter`	Dynamic capabilities	`DynamicAdapter`
`@Flow`	Lifecycle pipeline	`FlowBase`

One Snippet Per Decorator

@FrontMcp — Server Entry Point

import 'reflect-metadata';
import { FrontMcp } from '@frontmcp/sdk';

@FrontMcp({
  info: { name: 'My Server', version: '1.0.0' },
  apps: [MyApp],
  http: { port: 3000 },
})
export default class Server {}

@App — Capability Container

import { App } from '@frontmcp/sdk';

@App({
  id: 'crm',
  name: 'CRM App',
  tools: [CreateLeadTool, GetContactsTool],
  resources: [LeadResource],
  prompts: [OutreachPrompt],
})
class CrmApp {}

@Tool — AI-Callable Action

@Tool({
  name: 'greet',
  description: 'Greets a user by name',
  inputSchema: { name: z.string() },
})
class GreetTool extends ToolContext {
  async execute({ name }: { name: string }) {
    return `Hello, ${name}!`;
  }
}

const GreetTool = tool({
  name: 'greet',
  description: 'Greets a user by name',
  inputSchema: { name: z.string() },
})(({ name }) => `Hello, ${name}!`);

@Resource — Data Endpoint

@Resource({
  name: 'config',
  uri: 'config://app',
  mimeType: 'application/json',
})
class ConfigResource extends ResourceContext {
  async execute(uri: string) {
    return { contents: [{ uri, mimeType: 'application/json', text: '{}' }] };
  }
}

@ResourceTemplate({
  name: 'user',
  uriTemplate: 'users://{userId}',
  mimeType: 'application/json',
})
class UserResource extends ResourceContext {
  async execute(uri: string, params: Record<string, string>) {
    return { contents: [{ uri, text: JSON.stringify({ id: params.userId }) }] };
  }
}

@Prompt — Message Template

@Prompt({
  name: 'summarize',
  arguments: [
    { name: 'topic', description: 'Topic to summarize', required: true },
  ],
})
class SummarizePrompt extends PromptContext {
  async execute(args: Record<string, string>): Promise<GetPromptResult> {
    return {
      messages: [{ role: 'user', content: { type: 'text', text: `Summarize: ${args.topic}` } }],
    };
  }
}

@Agent — LLM-Powered Actor

@Agent({
  name: 'researcher',
  description: 'Research agent that gathers information',
  llm: { model: 'claude-sonnet-4-5-20250514' },
  tools: ['web_search', 'summarize'],
  systemInstructions: 'You are a thorough research assistant.',
})
class ResearcherAgent extends AgentContext {
  async execute(input: unknown) { /* ... */ }
}

@Skill — Workflow Guide

@Skill({
  name: 'review-pr',
  description: 'Review a GitHub pull request',
  instructions: `## Steps\n1. Fetch PR details\n2. Review files\n3. Submit review`,
  tools: [
    { name: 'github_get_pr', purpose: 'Fetch PR metadata', required: true },
    { name: 'github_submit_review', purpose: 'Submit review verdict' },
  ],
})
class ReviewPRSkill extends SkillContext {}

@Provider — DI Service

export const DB_TOKEN = Symbol('Database');

@Provider({ token: DB_TOKEN, scope: 'singleton' })
export class DatabaseProvider {
  static factory() { return new DatabaseProvider(); }
}

@Plugin — Extension

@Plugin({ name: 'audit', description: 'Audit logging plugin' })
class AuditPlugin extends DynamicPlugin {
  async onRegister(ctx: PluginRegistrationContext) {
    // Register hooks, providers, context extensions
  }
}

@Flow — Lifecycle Pipeline

@Flow({
  name: 'custom:pipeline',
  plan: { steps: ['pre', 'execute', 'post', 'finalize'] },
})
class PipelineFlow extends FlowBase {
  async pre() { /* validate */ }
  async execute() { /* process */ }
  async post() { /* transform */ }
  async finalize() { /* respond */ }
}

Get Started

FrontMCP

Features

Extensibility

Testing

React SDK

Guides

Decorator-Driven Development

Decorator Inventory

One Snippet Per Decorator

@FrontMcp — Server Entry Point

@App — Capability Container

@Tool — AI-Callable Action

@Resource — Data Endpoint

@Prompt — Message Template

@Agent — LLM-Powered Actor

@Skill — Workflow Guide

@Provider — DI Service

@Plugin — Extension

@Flow — Lifecycle Pipeline

Learn More

Decorator Reference

Context Classes

​Decorator Inventory

​One Snippet Per Decorator

​@FrontMcp — Server Entry Point

​@App — Capability Container

​@Tool — AI-Callable Action

​@Resource — Data Endpoint

​@Prompt — Message Template

​@Agent — LLM-Powered Actor

​@Skill — Workflow Guide

​@Provider — DI Service

​@Plugin — Extension

​@Flow — Lifecycle Pipeline

​Learn More

Decorator Reference

Context Classes

Decorator Inventory

One Snippet Per Decorator

@FrontMcp — Server Entry Point

@App — Capability Container

@Tool — AI-Callable Action

@Resource — Data Endpoint

@Prompt — Message Template

@Agent — LLM-Powered Actor

@Skill — Workflow Guide

@Provider — DI Service

@Plugin — Extension

@Flow — Lifecycle Pipeline

Learn More