> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentfront.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Decorator-Driven Development

> Build MCP servers entirely with TypeScript decorators

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`   |
| `@Channel`                        | Notification stream  | `ChannelContext`  |
| `@Adapter`                        | Dynamic capabilities | `DynamicAdapter`  |
| `@Flow`                           | Lifecycle pipeline   | `FlowBase`        |

***

## One Snippet Per Decorator

### @FrontMcp — Server Entry Point

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { App } from '@frontmcp/sdk';

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

### @Tool — AI-Callable Action

<CodeGroup>
  ```ts Class Style theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  @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}!`;
    }
  }
  ```

  ```ts Function Style theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  const GreetTool = tool({
    name: 'greet',
    description: 'Greets a user by name',
    inputSchema: { name: z.string() },
  })(({ name }) => `Hello, ${name}!`);
  ```
</CodeGroup>

### @Resource — Data Endpoint

<CodeGroup>
  ```ts Static Resource theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  @Resource({
    name: 'config',
    uri: 'config://app',
    mimeType: 'application/json',
  })
  class ConfigResource extends ResourceContext {
    async execute(uri: string) {
      return { contents: [{ uri, mimeType: 'application/json', text: '{}' }] };
    }
  }
  ```

  ```ts Resource Template theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  @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 }) }] };
    }
  }
  ```
</CodeGroup>

### @Prompt — Message Template

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
@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

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
@Agent({
  name: 'researcher',
  description: 'Research agent that gathers information',
  llm: {
    provider: 'anthropic',
    model: 'claude-sonnet-4-20250514',
    apiKey: { env: 'ANTHROPIC_API_KEY' },
  },
  tools: [WebSearchTool, SummarizeTool],
  systemInstructions: 'You are a thorough research assistant.',
})
class ResearcherAgent extends AgentContext {
  async execute(input: unknown) { /* ... */ }
}
```

### @Skill — Workflow Guide

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
@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

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { Provider, ProviderScope } from '@frontmcp/sdk';

@Provider({ name: 'DatabaseProvider', scope: ProviderScope.GLOBAL })
export class DatabaseProvider {
  async query(sql: string) { /* ... */ }
}
```

### @Plugin — Extension

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { Plugin, DynamicPlugin } from '@frontmcp/sdk';

interface AuditOptions { destination: string }

@Plugin({ name: 'audit', description: 'Audit logging plugin' })
export default class AuditPlugin extends DynamicPlugin<AuditOptions> {
  constructor(private readonly options: AuditOptions) {
    super();
  }
}

// Usage: register via the static init() method
@FrontMcp({
  info: { name: 'Server', version: '1.0.0' },
  apps: [MyApp],
  plugins: [AuditPlugin.init({ destination: 's3://logs' })],
})
class Server {}
```

### @Flow — Lifecycle Pipeline

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
@Flow({
  name: 'tools:call-tool',
  plan: {
    pre: ['parseInput', 'authorize'],
    execute: ['runTool'],
    post: ['validateOutput'],
    finalize: ['respond'],
  },
  inputSchema: callToolInputSchema,
  outputSchema: callToolOutputSchema,
  access: 'authorized',
})
class CallToolFlow extends FlowBase<'tools:call-tool'> {
  @Stage('parseInput')     async parseInput() { /* validate */ }
  @Stage('authorize')      async authorize() { /* check access */ }
  @Stage('runTool')        async runTool() { /* execute */ }
  @Stage('validateOutput') async validateOutput() { /* validate output */ }
  @Stage('respond')        async respond() { /* respond */ }
}
```

***

## Learn More

<CardGroup cols={2}>
  <Card title="Decorator Reference" icon="code" href="/frontmcp/sdk-reference/decorators/overview">
    Complete API reference for every decorator
  </Card>

  <Card title="Context Classes" icon="layer-group" href="/frontmcp/sdk-reference/contexts/overview">
    Base classes that provide DI, logging, and auth
  </Card>
</CardGroup>