@frontmcp/skills 1.0.4 → 1.1.0

package/catalog/frontmcp-deployment/references/mcp-client-integration.md

@@ -0,0 +1,225 @@
+---
+name: mcp-client-integration
+description: Configure MCP clients (Claude Desktop, Claude Code, Cursor, VS Code) to connect to a FrontMCP server via stdio, HTTP, or Unix socket
+---
+
+# MCP Client Integration
+
+Configure MCP clients to connect to your FrontMCP server. Covers all transport types (stdio, HTTP, Unix socket) and all major clients (Claude Desktop, Claude Code, Cursor, VS Code).
+
+## When to Use This Skill
+
+### Must Use
+
+- Configuring `.mcp.json`, `claude_desktop_config.json`, or any MCP client config file to point at a FrontMCP server
+- Publishing a FrontMCP server to npm for use with `npx` and `--stdio`
+- Setting up a local daemon for IDE integration
+
+### Recommended
+
+- Choosing between stdio, HTTP, and Unix socket transport for your deployment scenario
+- Passing environment variables or auth tokens to your server from the MCP client config
+
+### Skip When
+
+- Building the server itself (see `frontmcp-development`)
+- Configuring server-side transport options (see `frontmcp-config` → `configure-transport`)
+- Deploying to cloud platforms (see `deploy-to-vercel`, `deploy-to-lambda`)
+
+> **Decision:** Use this skill when you have a working FrontMCP server and need to connect an MCP client to it.
+
+## Transport Selection
+
+| Scenario                              | Transport   | Server Command                   | Config Key                          |
+| ------------------------------------- | ----------- | -------------------------------- | ----------------------------------- |
+| npm package for public distribution   | Stdio       | `npx my-server --stdio`          | `command` + `args`                  |
+| Local CLI binary for personal use     | Stdio       | `./my-server --stdio`            | `command` + `args`                  |
+| Remote/cloud server                   | HTTP        | `my-server serve -p 3000`        | `type: "http"`, `url`               |
+| Local persistent daemon (low latency) | Unix Socket | `my-server daemon start`         | `type: "http"`, `url`, `socketPath` |
+| Background daemon on specific port    | HTTP        | `my-server daemon start -p 4000` | `type: "http"`, `url`               |
+| Vibe coding with AI agent (dev mode)  | HTTP        | `frontmcp dev`                   | `type: "http"`, `url`               |
+
+## Development with AI Coding Agents
+
+When building a FrontMCP server with a coding agent (Claude Code, Cursor, Windsurf), use **HTTP transport with `frontmcp dev`** for live hot reload. The agent edits code, the server auto-restarts, and the MCP client reconnects — no manual restart needed.
+
+### Setup
+
+1. Start the dev server: `npm run dev` (or `frontmcp dev`)
+2. Register in `.mcp.json`:
+   ```json
+   {
+     "mcpServers": {
+       "my-server": {
+         "type": "http",
+         "url": "http://localhost:3000/mcp"
+       }
+     }
+   }
+   ```
+3. Code and iterate — every file save triggers a server reload
+
+### Why HTTP for development (not stdio)
+
+- **Hot reload:** Server restarts on file change (~200ms), client reconnects automatically
+- **Multiple clients:** Agent + MCP Inspector + you can all connect simultaneously
+- **Debugging:** Logs visible in terminal, Inspector UI available via `npm run inspect`
+- **Persistence:** Server stays running across edits, no new process per connection
+
+## Stdio Transport
+
+The most common transport. The MCP client spawns your server as a child process and communicates via stdin/stdout JSON-RPC.
+
+**Key points:**
+
+- Pass `--stdio` flag to the binary (detected before CLI framework loads)
+- All logs are automatically redirected to stderr and `~/.frontmcp/logs/`
+- stdout contains ONLY MCP JSON-RPC protocol messages
+- One client per process (no multiplexing)
+
+### npx (published npm package)
+
+```json
+{
+  "mcpServers": {
+    "my-server": {
+      "command": "npx",
+      "args": ["-y", "my-frontmcp-server", "--stdio"],
+      "env": {
+        "API_KEY": "sk-xxxxx"
+      }
+    }
+  }
+}
+```
+
+### Local binary
+
+```json
+{
+  "mcpServers": {
+    "my-server": {
+      "command": "/path/to/my-server",
+      "args": ["--stdio"]
+    }
+  }
+}
+```
+
+### Node.js bundle
+
+```json
+{
+  "mcpServers": {
+    "my-server": {
+      "command": "node",
+      "args": ["/path/to/my-server.bundle.js", "--stdio"]
+    }
+  }
+}
+```
+
+## HTTP Transport
+
+Connect to a running FrontMCP HTTP server. The server must be started separately.
+
+```json
+{
+  "mcpServers": {
+    "my-server": {
+      "type": "http",
+      "url": "http://localhost:3005/mcp"
+    }
+  }
+}
+```
+
+With authentication:
+
+```json
+{
+  "mcpServers": {
+    "my-server": {
+      "type": "http",
+      "url": "https://my-server.example.com/mcp",
+      "headers": {
+        "Authorization": "Bearer token-here"
+      }
+    }
+  }
+}
+```
+
+## Unix Socket Transport
+
+Connect to a FrontMCP daemon running on a Unix socket. Start the daemon first with `my-server daemon start`.
+
+```json
+{
+  "mcpServers": {
+    "my-server": {
+      "type": "http",
+      "url": "http://localhost/mcp",
+      "socketPath": "/Users/you/.frontmcp/sockets/my-server.sock"
+    }
+  }
+}
+```
+
+The `url` hostname is ignored for Unix sockets; only the path (`/mcp`) is used for HTTP routing.
+
+## Publishing to npm
+
+1. Build: `frontmcp build --target cli --js`
+2. Set `bin` in `package.json`:
+   ```json
+   { "bin": { "my-server": "./dist/my-server-cli.bundle.js" } }
+   ```
+3. Publish: `npm publish`
+4. Users configure: `{ "command": "npx", "args": ["-y", "my-server", "--stdio"] }`
+
+## Client Config File Locations
+
+| Client         | File                         | Location                                        |
+| -------------- | ---------------------------- | ----------------------------------------------- |
+| Claude Code    | `.mcp.json`                  | Project root or `~/.claude/.mcp.json`           |
+| Claude Desktop | `claude_desktop_config.json` | `~/Library/Application Support/Claude/` (macOS) |
+| Cursor         | `.cursor/mcp.json`           | Project root                                    |
+| VS Code        | `.vscode/mcp.json`           | Project root                                    |
+| Windsurf       | `mcp_config.json`            | `~/.codeium/windsurf/`                          |
+
+## Common Patterns
+
+| Pattern     | Correct                       | Incorrect              | Why                                                 |
+| ----------- | ----------------------------- | ---------------------- | --------------------------------------------------- |
+| Stdio flag  | `["--stdio"]` as arg          | `"--stdio"` in env var | Flag must be in process argv                        |
+| HTTP path   | `url` ends with `/mcp`        | `url` ends with `/`    | FrontMCP serves MCP protocol at `/mcp` by default   |
+| Socket URL  | Include `url` field with path | Only `socketPath`      | HTTP routing needs the URL path even for sockets    |
+| npx flag    | `"-y"` to auto-confirm        | Omit `-y`              | Without `-y`, npx prompts and blocks the MCP client |
+| Env secrets | Use `env` in config           | Hardcode in args       | Env vars are not visible in process listings        |
+
+## Troubleshooting
+
+| Problem                        | Cause                     | Solution                                               |
+| ------------------------------ | ------------------------- | ------------------------------------------------------ |
+| "Connection failed" with stdio | Server crashes on startup | Check `~/.frontmcp/logs/` for stack traces             |
+| Garbled protocol in stdio      | Logs leaking to stdout    | Ensure `--stdio` flag is passed (auto-redirects logs)  |
+| `ENOENT` for command           | Binary not found          | Use absolute path or ensure it's in PATH               |
+| `ECONNREFUSED` for HTTP        | Server not running        | Start server first: `my-server serve -p PORT`          |
+| Socket not found               | Daemon not started        | Run `my-server daemon start`                           |
+| npx timeout                    | Package download slow     | Run `npx -y my-server --stdio` manually first to cache |
+
+## Examples
+
+| Example                                                                                | Level        | Description                                                                                                  |
+| -------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------ |
+| [`stdio-npx`](../examples/mcp-client-integration/stdio-npx.md)                         | Basic        | Publish a FrontMCP server to npm and configure MCP clients to use it with npx --stdio.                       |
+| [`http-remote`](../examples/mcp-client-integration/http-remote.md)                     | Basic        | Connect an MCP client to a FrontMCP server running as an HTTP server, locally or remotely.                   |
+| [`stdio-binary-with-env`](../examples/mcp-client-integration/stdio-binary-with-env.md) | Intermediate | Configure a local FrontMCP CLI binary with environment variables and custom arguments in MCP client configs. |
+
+> See all examples in [`examples/mcp-client-integration/`](../examples/mcp-client-integration/)
+
+## Reference
+
+- **Docs:** <https://docs.agentfront.dev/frontmcp/deployment/mcp-clients>
+- **Related skills:** `build-for-cli`, `deploy-to-node`, `frontmcp-config`

package/catalog/frontmcp-development/examples/create-agent/basic-agent-with-tools.md

@@ -20,8 +20,7 @@ An autonomous agent that uses inner tools to review GitHub pull requests.
 
 ```typescript
 // src/apps/review/tools/fetch-pr.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'fetch_pr',
@@ -44,8 +43,7 @@ class FetchPRTool extends ToolContext {
 
 ```typescript
 // src/apps/review/tools/post-review.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'post_review_comment',
@@ -70,8 +68,7 @@ class PostReviewCommentTool extends ToolContext {
 
 ```typescript
 // src/apps/review/agents/pr-reviewer.agent.ts
-import { Agent, AgentContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, z } from '@frontmcp/sdk';
 
 @Agent({
   name: 'pr_reviewer',

package/catalog/frontmcp-development/examples/create-agent/custom-multi-pass-agent.md

@@ -19,8 +19,7 @@ An agent that overrides `execute()` to perform multi-pass LLM reasoning with `th
 
 ```typescript
 // src/apps/review/agents/structured-reviewer.agent.ts
-import { Agent, AgentContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, z } from '@frontmcp/sdk';
 
 @Agent({
   name: 'structured_reviewer',

package/catalog/frontmcp-development/examples/create-agent/nested-agents-with-swarm.md

@@ -19,8 +19,7 @@ Composing specialized sub-agents and configuring swarm-based handoff between age
 
 ```typescript
 // src/apps/support/agents/billing.agent.ts
-import { Agent, AgentContext, Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'lookup_invoice',
@@ -65,8 +64,7 @@ class TechnicalAgent extends AgentContext {}
 
 ```typescript
 // src/apps/support/agents/triage.agent.ts
-import { Agent, AgentContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, z } from '@frontmcp/sdk';
 
 @Agent({
   name: 'triage_agent',

package/catalog/frontmcp-development/examples/create-agent-llm-config/anthropic-config.md

@@ -19,8 +19,7 @@ Configuring an agent with the Anthropic provider and common model options.
 
 ```typescript
 // src/apps/main/agents/summarizer.agent.ts
-import { Agent, AgentContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, z } from '@frontmcp/sdk';
 
 @Agent({
   name: 'summarizer',

package/catalog/frontmcp-development/examples/create-agent-llm-config/openai-config.md

@@ -19,8 +19,7 @@ Configuring an agent with the OpenAI provider and different model options.
 
 ```typescript
 // src/apps/main/agents/data-pipeline.agent.ts
-import { Agent, AgentContext, Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'extract_data',

package/catalog/frontmcp-development/examples/create-job/basic-report-job.md

@@ -18,8 +18,7 @@ A minimal job that generates a report with progress tracking and structured outp
 
 ```typescript
 // src/jobs/generate-report.job.ts
-import { Job, JobContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Job, JobContext, z } from '@frontmcp/sdk';
 
 @Job({
   name: 'generate-report',

package/catalog/frontmcp-development/examples/create-job/job-with-permissions.md

@@ -19,8 +19,7 @@ A data export job with declarative permission controls, plus a function-style jo
 
 ```typescript
 // src/jobs/data-export.job.ts
-import { Job, JobContext, job } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Job, job, JobContext, z } from '@frontmcp/sdk';
 
 @Job({
   name: 'data-export',
@@ -79,7 +78,7 @@ const CleanupTempFiles = job({
 
 ```typescript
 // src/server.ts
-import { FrontMcp, App } from '@frontmcp/sdk';
+import { App, FrontMcp } from '@frontmcp/sdk';
 
 @App({
   name: 'data-app',

package/catalog/frontmcp-development/examples/create-job/job-with-retry.md

@@ -19,8 +19,7 @@ A job that syncs data from an external API with automatic retry, exponential bac
 
 ```typescript
 // src/jobs/sync-external-api.job.ts
-import { Job, JobContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Job, JobContext, z } from '@frontmcp/sdk';
 
 @Job({
   name: 'sync-external-api',

package/catalog/frontmcp-development/examples/create-plugin-hooks/tool-level-hooks-and-stage-replacement.md

@@ -20,9 +20,7 @@ Demonstrates two advanced patterns: adding `@Will`/`@Did` hooks directly on a `@
 
 ```typescript
 // src/tools/process-order.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { ToolHook } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, ToolHook, z } from '@frontmcp/sdk';
 
 const { Will, Did } = ToolHook;
 
@@ -70,8 +68,7 @@ class ProcessOrderTool extends ToolContext {
 
 ```typescript
 // src/plugins/mock.plugin.ts
-import { Plugin } from '@frontmcp/sdk';
-import { ToolHook } from '@frontmcp/sdk';
+import { Plugin, ToolHook } from '@frontmcp/sdk';
 
 const { Stage } = ToolHook;
 

package/catalog/frontmcp-development/examples/create-provider/basic-database-provider.md

@@ -31,9 +31,10 @@ export const DB_TOKEN: Token<DatabaseService> = Symbol('DatabaseService');
 
 ```typescript
 // src/apps/main/providers/database.provider.ts
-import { Provider } from '@frontmcp/sdk';
 import { createPool, Pool } from 'your-db-driver';
 
+import { Provider } from '@frontmcp/sdk';
+
 @Provider({ name: 'DatabaseProvider' })
 class DatabaseProvider implements DatabaseService {
   private pool!: Pool;
@@ -61,8 +62,8 @@ class DatabaseProvider implements DatabaseService {
 
 ```typescript
 // src/apps/main/tools/query-users.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
+
 import { DB_TOKEN } from '../tokens';
 
 @Tool({

package/catalog/frontmcp-development/examples/create-skill-with-tools/directory-skill-with-tools.md

@@ -74,8 +74,7 @@ const DeployServiceSkill = await skillDir('./skills/deploy-service');
 
 ```typescript
 // src/skills/audit.skill.ts
-import { Skill, SkillContext, Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Skill, SkillContext, Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'analyze_codebase',
@@ -120,7 +119,7 @@ class CodebaseAuditSkill extends SkillContext {}
 
 ```typescript
 // src/server.ts
-import { FrontMcp, App } from '@frontmcp/sdk';
+import { App, FrontMcp } from '@frontmcp/sdk';
 
 @App({
   name: 'audit-app',

package/catalog/frontmcp-development/examples/create-tool/basic-class-tool.md

@@ -19,8 +19,7 @@ A minimal tool using the class-based pattern with Zod input validation and outpu
 
 ```typescript
 // src/apps/main/tools/greet-user.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'greet_user',

package/catalog/frontmcp-development/examples/create-tool/tool-with-di-and-errors.md

@@ -30,8 +30,8 @@ export const DATABASE: Token<DatabaseService> = Symbol('database');
 
 ```typescript
 // src/apps/main/tools/delete-record.tool.ts
-import { Tool, ToolContext, ResourceNotFoundError } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { ResourceNotFoundError, Tool, ToolContext, z } from '@frontmcp/sdk';
+
 import { DATABASE } from '../tokens';
 
 @Tool({

package/catalog/frontmcp-development/examples/create-tool/tool-with-rate-limiting-and-progress.md

@@ -20,8 +20,7 @@ A batch processing tool that uses rate limiting, concurrency control, progress n
 
 ```typescript
 // src/apps/main/tools/batch-process.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'batch_process',

package/catalog/frontmcp-development/examples/create-tool-annotations/destructive-delete-tool.md

@@ -20,8 +20,7 @@ Demonstrates annotating a tool that deletes data, enabling MCP clients to warn u
 
 ```typescript
 // src/tools/delete-user.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'delete_user',
@@ -52,8 +51,7 @@ class DeleteUserTool extends ToolContext {
 
 ```typescript
 // src/tools/send-email.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'send_email',

package/catalog/frontmcp-development/examples/create-tool-annotations/readonly-query-tool.md

@@ -20,8 +20,7 @@ Demonstrates annotating a tool that only reads data, signaling to MCP clients th
 
 ```typescript
 // src/tools/search-users.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'search_users',

package/catalog/frontmcp-development/examples/create-tool-output-schema-types/primitive-and-media-outputs.md

@@ -20,8 +20,7 @@ Demonstrates using primitive string literals and media types as `outputSchema` f
 
 ```typescript
 // src/tools/summarize.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 // Primitive literal: returns plain text
 @Tool({
@@ -42,8 +41,7 @@ class SummarizeTextTool extends ToolContext {
 
 ```typescript
 // src/tools/generate-chart.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 // Media type: returns base64 image data
 @Tool({
@@ -66,8 +64,7 @@ class GenerateChartTool extends ToolContext {
 
 ```typescript
 // src/tools/analyze-document.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 // Multi-content array: returns text + image
 @Tool({

package/catalog/frontmcp-development/examples/create-tool-output-schema-types/zod-raw-shape-output.md

@@ -19,8 +19,7 @@ Demonstrates the recommended approach of using a Zod raw shape as `outputSchema`
 
 ```typescript
 // src/tools/get-user-profile.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'get_user_profile',

package/catalog/frontmcp-development/examples/create-tool-output-schema-types/zod-schema-advanced-output.md

@@ -19,8 +19,7 @@ Demonstrates using full Zod schema objects (not raw shapes) as `outputSchema`, i
 
 ```typescript
 // src/tools/list-products.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 // z.object() -- structured object output
 @Tool({
@@ -56,8 +55,7 @@ class GetOrderStatusTool extends ToolContext {
 
 ```typescript
 // src/tools/search-catalog.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 // z.discriminatedUnion() -- different shapes based on a type field
 const ProductResult = z.discriminatedUnion('type', [

package/catalog/frontmcp-development/examples/decorators-guide/agent-skill-job-workflow.md

@@ -21,8 +21,7 @@ Demonstrates the advanced decorator types: `@Agent` for autonomous AI agents, `@
 
 ```typescript
 // src/agents/research.agent.ts
-import { Agent, AgentContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Agent, AgentContext, z } from '@frontmcp/sdk';
 
 @Agent({
   name: 'research_agent',
@@ -61,8 +60,7 @@ class CodeMigrationSkill {}
 
 ```typescript
 // src/jobs/sync-data.job.ts
-import { Job, JobContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Job, JobContext, z } from '@frontmcp/sdk';
 
 @Job({
   name: 'sync_data',
@@ -110,7 +108,7 @@ class DeployPipeline {}
 
 ```typescript
 // src/server.ts
-import { FrontMcp, App } from '@frontmcp/sdk';
+import { App, FrontMcp } from '@frontmcp/sdk';
 
 @App({
   name: 'platform',

package/catalog/frontmcp-development/examples/decorators-guide/basic-server-with-app-and-tools.md

@@ -20,8 +20,7 @@ Demonstrates the minimal decorator hierarchy to create a working FrontMCP server
 
 ```typescript
 // src/tools/search-users.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'search_users',
@@ -88,10 +87,11 @@ class CodeReviewPrompt extends PromptContext {
 
 ```typescript
 // src/server.ts
-import { FrontMcp, App } from '@frontmcp/sdk';
-import { SearchUsersTool } from './tools/search-users.tool';
-import { AppConfigResource } from './resources/app-config.resource';
+import { App, FrontMcp } from '@frontmcp/sdk';
+
 import { CodeReviewPrompt } from './prompts/code-review.prompt';
+import { AppConfigResource } from './resources/app-config.resource';
+import { SearchUsersTool } from './tools/search-users.tool';
 
 @App({
   name: 'analytics',

package/catalog/frontmcp-development/examples/decorators-guide/multi-app-with-plugins-and-providers.md

@@ -47,8 +47,7 @@ class AuditPlugin {}
 
 ```typescript
 // src/tools/query.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'run_query',
@@ -68,8 +67,7 @@ class QueryTool extends ToolContext {
 
 ```typescript
 // src/tools/report.tool.ts
-import { Tool, ToolContext } from '@frontmcp/sdk';
-import { z } from 'zod';
+import { Tool, ToolContext, z } from '@frontmcp/sdk';
 
 @Tool({
   name: 'generate_report',
@@ -90,7 +88,7 @@ class ReportTool extends ToolContext {
 
 ```typescript
 // src/resources/dashboard.resource.ts
-import { ResourceTemplate, ResourceContext } from '@frontmcp/sdk';
+import { ResourceContext, ResourceTemplate } from '@frontmcp/sdk';
 
 @ResourceTemplate({
   name: 'dashboard',
@@ -109,7 +107,7 @@ class DashboardResource extends ResourceContext {
 
 ```typescript
 // src/server.ts
-import { FrontMcp, App } from '@frontmcp/sdk';
+import { App, FrontMcp } from '@frontmcp/sdk';
 
 @App({
   name: 'analytics',