AI tools (MCP)

The Neighborhood MCP server gives AI assistants live access to Neighborhood through the Model Context Protocol. It reads the current release, so your assistant uses the real component names, settings and slots instead of guessing. It works with Claude (the app and Claude Code), GitHub Copilot in VS Code, Cursor and Windsurf.

There’s nothing to install in your project. You point your AI client at the server, and it reaches for Neighborhood whenever it builds UI.

What it can do

With the server connected, your assistant can:

• look up any component’s properties, slots and events, with documented examples;
• write setup and usage code for Next.js and React, Vue, Angular, Svelte, Shopify, plain HTML and server templates, using a brand theme or the unbranded Base theme;
• check your markup for mistakes and v4 leftovers;
• walk through upgrades with the migration guides;
• generate Bloomreach content types for a component.

1. Request access

The server is private. Request the server URL and access token from IT Digital. AI tools access lists what to include.

Treat both like the package token: keep them out of source control, chat and tickets. The examples below read them from environment variables or prompts, so the files are safe to commit.

Set them on your machine:

export NBHD_MCP_URL="[NBHD_MCP_URL]"
export NBHD_MCP_TOKEN="[NBHD_MCP_TOKEN]"

Replace [NBHD_MCP_URL] and [NBHD_MCP_TOKEN] with the values you’re given.

2. Connect your client

Claude Code

Add the server for yourself, in every project:

claude mcp add --transport http --scope user neighborhood "$NBHD_MCP_URL" \
  --header "Authorization: Bearer $NBHD_MCP_TOKEN"

To give everyone on a project the server, commit a .mcp.json at the project root instead. Each person sets the two environment variables on their own machine:

{
  "mcpServers": {
    "neighborhood": {
      "type": "http",
      "url": "${NBHD_MCP_URL}",
      "headers": { "Authorization": "Bearer ${NBHD_MCP_TOKEN}" }
    }
  }
}

Claude app

The Claude app (claude.ai, desktop and mobile) connects through a custom connector.

Team and Enterprise: an Owner adds it once for the organization:

1. Open Organization settings → Connectors → Add → Custom → Web.
2. Name it Neighborhood and enter the server URL.
3. For authentication, choose a static credential that sends Authorization: Bearer [NBHD_MCP_TOKEN].
4. Save.

Each member then turns it on under Customize → Connectors → Neighborhood → Connect.

Pro and Max: open Customize → Connectors → Add custom connector and use the same name, URL and authentication.

VS Code (GitHub Copilot)

Add .vscode/mcp.json to the project, or run MCP: Open User Configuration from the Command Palette to add it for every workspace. VS Code asks for the URL and token once and keeps them in its secret storage:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "nbhd-mcp-url",
      "description": "Neighborhood MCP server URL",
      "password": true
    },
    {
      "type": "promptString",
      "id": "nbhd-mcp-token",
      "description": "Neighborhood MCP access token",
      "password": true
    }
  ],
  "servers": {
    "neighborhood": {
      "type": "http",
      "url": "${input:nbhd-mcp-url}",
      "headers": { "Authorization": "Bearer ${input:nbhd-mcp-token}" }
    }
  }
}

Select Start above the server entry, enter the values when prompted, then choose the Neighborhood tools in the Copilot Chat tool picker in agent mode.

Cursor and Windsurf

Add the server to .cursor/mcp.json (Cursor) or ~/.codeium/windsurf/mcp_config.json (Windsurf). These don’t prompt for values, so read them from the environment variables:

{
  "mcpServers": {
    "neighborhood": {
      "url": "${env:NBHD_MCP_URL}",
      "headers": { "Authorization": "Bearer ${env:NBHD_MCP_TOKEN}" }
    }
  }
}

Windsurf names the URL field serverUrl instead of url.

3. Check that it works

In Claude Code, run /mcp and check that neighborhood shows as connected. In VS Code, run MCP: List Servers. In the Claude app, check that the connector is on.

Then ask your assistant something like:

• “Build a Moen promo section with a hero split and three cards.”
• “Make an internal admin page for reviewing uploads, using Neighborhood with Base styling.”
• “Check this template for v4 leftovers,” followed by your markup.

If the answer uses nbhd- components and a Neighborhood stylesheet, you’re set. If the client can’t connect, check the URL and token, then ask for help.

Tips

• Install packages from the registry only. The assistant installs @fbin-web/* packages from GitHub Packages through your project’s .npmrc. It won’t copy them from another project on your computer. If you don’t have a token yet, it creates the .npmrc and asks you to request one from IT Digital (ITDigital@fbgpg.com).
• Name the brand. Say which brand the page is for, or ask for Base styling for non-brand work.
• Validate what you paste in. Ask the assistant to check existing markup before you change it, especially code written for v4.
• Check the result. Treat generated code as a starting point. Compare it with the component pages and Storybook before you ship it.

Next steps

• Installation: the package token, the packages and the brand stylesheet.
• Components: properties, slots, events and examples for every component.
• Requests and support: report a problem with the server or ask for access.