> ## 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.

# Introducing FrontMCP

> The TypeScript-first framework for building production-grade MCP servers with decorators, DI, and Streamable HTTP.

<img noZoom className="blog-full-image light-img" src="https://mintcdn.com/frontegg-7f203039/7CkIPzCpfNE4vSLj/assets/logo/banner.light.png?fit=max&auto=format&n=7CkIPzCpfNE4vSLj&q=85&s=28aaab5926cde6ea1b37b33eaf353957" width="1280" height="640" data-path="assets/logo/banner.light.png" />

<img noZoom className="blog-full-image dark-img" src="https://mintcdn.com/frontegg-7f203039/7CkIPzCpfNE4vSLj/assets/logo/banner.dark.png?fit=max&auto=format&n=7CkIPzCpfNE4vSLj&q=85&s=f926f68cc094f109af018eda3fb97333" width="1280" height="640" data-path="assets/logo/banner.dark.png" />

## Why another MCP framework?

If you've tried wiring up the Model Context Protocol (MCP) by hand, you already know the drill:

* Define JSON schemas manually
* Hand-roll HTTP endpoints
* Keep auth, sessions, logging and transports consistent across tools
* Copy-paste boilerplate just to expose "one more" operation ([GitHub][1])

That's fine for a weekend experiment, but painful for a real agentic backend.

**FrontMCP** exists to make this boring part disappear.

FrontMCP is a **TypeScript-first framework for MCP**: you describe servers, apps, tools, resources and prompts with decorators, and the framework handles protocol details, transport, dependency injection, sessions/auth, and execution flow for you. ([FrontMCP][2])

<Note>
  If you're new to MCP: it's an open specification for how LLM clients talk to tools and data sources in a consistent
  way. FrontMCP gives you a batteries-included way to implement those servers in TypeScript.
</Note>

***

## FrontMCP in one sentence

> **FrontMCP is the TypeScript way to build MCP servers with decorators, DI, and Streamable HTTP.** ([FrontMCP][2])

You write clean, typed code; FrontMCP takes care of:

* Protocol & transport (MCP Streamable HTTP)
* Sessions & streaming
* Auth & security (remote and local OAuth)
* Logging, hooks, and extensibility via adapters and plugins ([FrontMCP][2])

<Tip>Already sold? You can skip ahead to the Quickstart docs and have a server running in a few minutes.</Tip>

***

## The pillars of FrontMCP

<Columns cols={2}>
  <Card title="TypeScript-native DX" icon="code">
    Use decorators and <code>zod</code> schemas to describe tools and apps, with strong typing from inputs to
    responses. FrontMCP stays out of your way and lets the TypeScript type system do the heavy lifting.
  </Card>

  <Card title="Spec-aligned transport" icon="cloud">
    FrontMCP speaks MCP Streamable HTTP out of the box, including sessions and streaming responses, so you can plug
    it
    into any MCP-capable client without custom plumbing.
  </Card>

  <Card title="Security & auth built-in" icon="shield-check">
    Configure remote OAuth with your existing IdP, or use built-in local OAuth. Combine that with scoped execution
    and
    hooks for logging, rate limits, and policy checks.
  </Card>

  <Card title="Adapters & plugins" icon="puzzle-piece">
    Generate tools from OpenAPI, enable transparent caching, wire custom logging transports, and more—without
    turning
    your codebase into a tangle of middleware.
  </Card>
</Columns>

***

## Core concepts (in 5 steps)

At the heart of FrontMCP there are a few concepts you'll see everywhere in the docs.

<Steps titleSize="h3">
  <Step title="Server" stepNumber={1} icon="server">
    A <b>Server</b> is your decorated entry point, defined with <code>@FrontMcp</code>.
    It describes server info (name, version), which apps are available, HTTP settings, logging, session
    configuration, and optional auth & providers.
  </Step>

  <Step title="App" stepNumber={2} icon="boxes-stacked">
    An <b>App</b> is a logical bundle of tools and related pieces, declared with <code>@App</code>.
    You group tools, resources, prompts, adapters and plugins into apps so you can split behavior cleanly—per
    product, per tenant, or per domain.
  </Step>

  <Step title="Tool" stepNumber={3} icon="wrench">
    A <b>Tool</b> is an active unit of work. You describe it with <code>@Tool</code> (class tools)
    or <code>tool()(handler)</code> (function tools), and attach typed input/output schemas
    using <code>zod</code>.
  </Step>

  <Step title="Hooks & Providers" stepNumber={4} icon="plug">
    <b>Hooks</b> give you cross-cutting behavior—auth checks, logging, rate limiting, request
    transforms—while <b>providers</b> are dependency-injected singletons for things like config, DB, Redis, or KMS.
    You control scopes per app, per session, or per request.
  </Step>

  <Step title="Adapters & Plugins" stepNumber={5} icon="sitemap">
    <b>Adapters</b> generate tools/resources/prompts from external definitions (like OpenAPI),
    and <b>plugins</b> layer on cross-cutting behavior such as caching or tracing—without polluting your business
    logic.
  </Step>
</Steps>

***

## A tiny FrontMCP server

Let's look at a small, but realistic, FrontMCP server. It exposes a single tool that greets a user by name, grouped into a simple app.

```ts title="src/main.ts" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import 'reflect-metadata';
import { App, FrontMcp, Tool } from '@frontmcp/sdk';
import { z } from 'zod';

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

@App({
  id: 'hello',
  name: 'Hello App',
  tools: [GreetTool],
})
class HelloApp {}

@FrontMcp({
  info: {
    name: 'Hello MCP',
    version: '0.1.0',
  },
  apps: [HelloApp],
})
export default class HelloServer {}
```

With less than a screenful of code you've just:

* Defined a strongly typed tool
* Grouped it into an app
* Exposed a fully MCP-compatible server entrypoint with a clean contract ([FrontMCP][2])

***

## Installation in under a minute

You can either scaffold a new project or add FrontMCP to an existing TypeScript codebase.

### Option A — Create a new project

```bash title="Create a new FrontMCP project" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
npx frontmcp create my-app
```

This will:

* Scaffold a new project under `./my-app`
* Configure `tsconfig.json` correctly for decorators and modern ESM
* Generate a `package.json` with useful scripts
* Install dev dependencies like TypeScript, `tsx`, `zod`, and `reflect-metadata` for you ([FrontMCP][3])

### Option B — Add to an existing project

```bash title="Install the CLI and Node types" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
npm i -D frontmcp @types/node@^22
```

Then initialize FrontMCP in your project root:

```bash title="Initialize FrontMCP" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
npx frontmcp init
```

The `init` step updates your scripts, checks your `tsconfig.json`, and validates that your layout fits FrontMCP's expectations. ([FrontMCP][3])

### Scripts you'll see

After using `create` or `init`, your `package.json` will include scripts like:

```json title="package.json (scripts)" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "scripts": {
    "dev": "frontmcp dev",
    "build": "frontmcp build",
    "inspect": "frontmcp inspector",
    "doctor": "frontmcp doctor"
  }
}
```

* `frontmcp dev` – run your server in watch mode
* `frontmcp build` – compile your entry to `dist`
* `frontmcp inspector` – launch the MCP Inspector to explore tools live
* `frontmcp doctor` – validate Node/npm versions, tsconfig, and project setup ([FrontMCP][3])

<Tip>
  Once things look healthy, run <code>npm run dev</code> and connect any MCP-capable client to start calling your tools.
</Tip>

***

## From "Hello MCP" to production

FrontMCP is designed so that the same primitives you use for a toy project scale all the way to hardened, production workloads.

Some of the features you get out of the box:

* **Sessions & Transport**
  Choose between stateful and stateless session modes and configure how transport IDs are issued (`uuid` or `jwt`), depending on whether you run a single node or a distributed cluster. ([GitHub][1])

* **Authentication**
  Use **remote OAuth** to integrate with an external IdP (like your B2B identity provider), or **local OAuth** for projects that want to keep everything inside the MCP server. Either way, you can scope auth per server or per app. ([GitHub][1])

* **Logging transports**
  Ship logs to console, JSONL, or custom HTTP sinks by defining

  <code>@LogTransport</code> providers and wiring them into your server config. ([GitHub][1])

* **Adapters & plugins**
  Use the OpenAPI adapter to turn existing REST APIs into MCP tools, and plug in caching, tracing, or policy engines as plugins—no need to wrap every tool manually. ([FrontMCP][4])

All of this is accessible from TypeScript, with type inference helping you stay honest as your server grows.

***

## FrontMCP in the AgentFront ecosystem

This is the **first post in the AgentFront blog**, and FrontMCP is a big part of why.

We're betting on a future where:

* MCP is the default protocol for LLM tools and data access
* TypeScript is the default language for web-scale infrastructure
* Agentic systems are composed of many small, well-typed servers, not one giant monolith

FrontMCP is our open-source foundation for that world:

* 📦 **Source code**: [`agentfront/frontmcp` on GitHub](https://github.com/agentfront/frontmcp) ([GitHub][1])
* 📚 **Docs**: [`/docs`](/frontmcp/getting-started/welcome) for the latest 0.3 series ([FrontMCP][2])

We'll be using this blog to share patterns, real-world architectures, and deep dives into features like adapters, auth, and deployment.

***

## Where to go next

<Columns cols={2}>
  <Card title="Read the Welcome doc" href="/frontmcp/getting-started/welcome" icon="book-open" arrow="true" cta="Start here">
    Get the high-level overview of FrontMCP's concepts and how it fits into MCP.
  </Card>

  <Card title="Follow the Quickstart" href="/frontmcp/getting-started/quickstart" icon="rocket" arrow="true" cta="Build your first server">
    Go step-by-step from empty folder to a running MCP server with a real tool.
  </Card>
</Columns>

<Columns cols={2}>
  <Card title="Check out the examples" href="https://github.com/agentfront/frontmcp/tree/main/apps/demo" icon="code-branch" arrow="true" cta="Browse demos">
    Explore example apps and tools that showcase patterns you can reuse in your own servers.
  </Card>

  <Card title="Star the repo & contribute" href="https://github.com/agentfront/frontmcp" icon="star" arrow="true" cta="Join the project">
    FrontMCP is open source (Apache-2.0). Issues, PRs, and feedback are very welcome.
  </Card>
</Columns>

***

This is just the beginning. In upcoming posts, we'll dig into:

* Designing tool interfaces your LLMs actually use
* Using adapters to wrap existing APIs
* Building secure multi-tenant MCP servers with remote OAuth
* Observability patterns with custom logging transports and hooks

If you build something cool with FrontMCP, we'd love to hear about it—and maybe feature it here.

[1]: https://github.com/agentfront/frontmcp "GitHub - agentfront/frontmcp: FrontMCP Framework"

[2]: /frontmcp/getting-started/welcome "Welcome to FrontMCP - FrontMCP"

[3]: /frontmcp/getting-started/installation "Installation - FrontMCP"

[4]: /frontmcp/getting-started/quickstart "Quickstart - FrontMCP"