Tools

AI Assistance (MCP Server)

If your AI coding agent supports the Model Context Protocol (MCP), you can run a small local MCP server that exposes the packaged documentation from /docs.

Run the server from your project (where @dnb/eufemia is installed):

Example MCP config (e.g. .vscode/mcp.json):

{
  "servers": {
    "eufemia": {
      "command": "node",
      "args": [
        "${workspaceFolder}/node_modules/@dnb/eufemia/mcp/mcp-docs-server.js"
      ]
    }
  }
}

CLI (Claude MCP):

claude mcp add --transport stdio eufemia -- node node_modules/@dnb/eufemia/mcp/mcp-docs-server.js

How to use

The MCP server helps AI apply Eufemia patterns more accurately in code, but results can still be imperfect. So always review the output carefully!
The MCP server provides documentation context only; it does not execute code or access the network.
Ask your AI tool to search or summarize Eufemia docs, e.g. "Find the spacing system rules in Eufemia."
If the server fails to start, confirm @dnb/eufemia is installed and the path points to node_modules/@dnb/eufemia/mcp/mcp-docs-server.js.

Code Editor Extensions

The Visual Studio Code Extension

It supports:

plain px to rem conversion.
annotation for px and rem equivalent values.
auto completion for the spacing system.
auto completion for font-size and line-height.

Install the VSCode Extension or view the source code.

Screenshots

Spacing System example

Auto completion for px/rem spacing system

Equivalent to px or rem value example

font-size example

ESLint Plugin

You may have a look at the Eufemia ESLint Plugin it will over time extend with more rules that can help you detect issues or recommendations.

#Tools

#AI Assistance (MCP Server)

#How to use

#Code Editor Extensions

#The Visual Studio Code Extension

#Screenshots

#ESLint Plugin