Skip to content
Home

Tools

AI Assistance and MCP Server (beta)

NB: This feature is experimental and may change in the future. Please give us feedback on your experience with it!

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:

Install the VSCode Extension or view the source code.

Screenshots

  1. Spacing System example
Auto completion for px/rem spacing system
  1. Equivalent to px or rem value example
Tooltip for px/rem equivalent
  1. font-size example
Auto completion for font-size

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.