home / mcp / ai code toolkit mcp server

AI Code Toolkit MCP Server

Delivers MCP-based scaffolding, design guidance, and automated reviews to streamline code project creation and edits.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "agiflow-aicode-toolkit": {
      "command": "npx",
      "args": [
        "-y",
        "@agiflowai/scaffold-mcp",
        "mcp-serve",
        "--admin-enable"
      ],
      "env": {
        "YOUR_TOKEN": "YOUR_TOKEN"
      }
    }
  }
}

You can run and coordinate MCP-based tooling to scaffold projects, apply design rules, and discover design systems. This MCP server set helps you generate boilerplate, enforce patterns before edits, and discover frontend design assets, making it easier to build consistent, well-structured codebases.

How to use

You work with an MCP client to initialize workspaces, configure MCP servers, and then guide the agent through common development tasks. Typical flows include creating a new project, adding a feature, editing files safely, and styling components. The agent can list available boilerplates, apply a chosen scaffold, provide file-design patterns before edits, and perform reviews of code changes against defined RULES.

How to install

Prerequisites: ensure Node.js version 18 or newer is installed on your system.

Step 1. Create or prepare your workspace with the scaffold MCP toolkit. Use the provided initialization commands to set up templates and settings.

Step 2. Configure MCP servers to run with the toolkit. Use the example configuration below to enable the scaffold, architect, and style-system MCP servers using npx.

Configuration example for MCP servers

{
  "mcpServers": {
    "scaffold-mcp": {
      "command": "npx",
      "args": ["-y", "@agiflowai/scaffold-mcp", "mcp-serve", "--admin-enable"]
    },
    "architect-mcp": {
      "command": "npx",
      "args": [
        "-y", "@agiflowai/architect-mcp", "mcp-serve",
        "--admin-enable",
        "--design-pattern-tool", "codex",
        "--review-tool", "gemini-cli"
      ]
    },
    "style-system": {
      "command": "npx",
      "args": ["-y", "@agiflowai/style-system", "mcp-serve"]
    }
  }
}

Typical workflow

Create a project by asking the agent to generate a Next.js app, then have the agent list boilerplates and apply the chosen boilerplate. The agent confirms the project is generated.

Add a feature by requesting a scaffold method for a specific feature, then apply that scaffold and generate the feature files.

Edit a file safely by retrieving a file design pattern, applying the pattern and rules to edits, then running a code review to fix violations.

Template structure and available templates

Templates include scaffolds for Next.js apps and TypeScript libraries. You can customize or author templates and rules through admin tools to fit your project needs.

Project types and template references

Projects reference templates either via a project.json in monorepos or via a toolkit settings file for monoliths. This enables consistent template-driven scaffolding across multiple packages or apps.

Built-in templates and supported agents

Built-in templates cover Next.js apps with App Router, TypeScript libraries, and MCP packages. The system supports several agents for MCP communication and can be extended with custom templates.

Tools and capabilities you can use with MCP servers

Core toolsets are exposed by the servers to support scaffolding, design-pattern discovery, and component styling. You can invoke these tools to list boilerplates, apply scaffolds, discover design patterns, and review changes.

Notes on security and usage

Keep your MCP server configuration secure and restrict admin tools to trusted users. When enabling admin tooling with --admin-enable, control access to template authoring and design-pattern management.

Troubleshooting tips

If the agent stops responding or cannot list boilerplates, restart the agent or verify the MCP server configuration in your settings. Ensure the npx commands are available and that the specified packages are installed.

Available tools

list-boilerplates

List available project boilerplates that you can apply to generate new projects or features.

use-boilerplate

Apply a chosen boilerplate to create a new project structure.

list-scaffolding-methods

List available methods for scaffolding features within a project.

use-scaffold-method

Apply a selected scaffolding method to generate feature files and structure.

generate-boilerplate

Admin tool to create a new boilerplate from templates.

generate-feature-scaffold

Admin tool to generate scaffolding for a specific feature.

generate-boilerplate-file

Admin tool to create or update boilerplate-related files.

get-file-design-pattern

Retrieve design patterns applicable to a specific file before edits.

review-code-change

Review a code change against RULES.yaml and identify violations.

add-design-pattern

Add a new design pattern rule for future edits.

add-rule

Add a new rule to the RULES.yaml for code review.

list_themes

List available design system themes.

get_css_classes

Discover CSS class mappings used by the design system.

get_component_visual

Preview visual representation of a component.

list_shared_components

List components shared across apps.

list_app_components

List components used within a specific app.