All guidesWorkflow

Use components directly in the editor via MCP

4 min read

The Model Context Protocol, MCP for short, connects AI editors with external sources. For a component library that means: your assistant can search and insert building blocks without you switching between browser and editor.

What MCP is

MCP is an open standard through which an AI editor talks to servers that provide extra capabilities and data. The editor stays the same but gains access to new sources.

For a library the server provides read-only access: the assistant can search components and fetch the source code.

The everyday benefit

Without MCP you copy code from the browser and paste it into the editor. With MCP you describe what you need and the assistant inserts the right building block straight into the right spot.

That saves context switches and errors. Especially with many small building blocks the time saved adds up.

Setup in a few steps

You add the server address once in your editor's configuration and restart it. After that, search and fetch are available in the chat. Supported are MCP-capable environments like Claude Code, Cursor and VS Code.

No content from your project is sent to the library. Access is read-only.