App builders like Lovable, Bolt, v0 and Replit write the code themselves, and that is exactly their weak spot on the interface: the agent reinvents every hero section, and after three projects they all look alike. The way out is to give the agent finished components instead of having it describe them. Since 2025 all four accept their own MCP servers, tools the agent calls during the chat. A server for a component library lets the agent search it and fetch the full source instead of guessing. This guide shows where the entry sits in each of the four tools, how an API key comes along, how to prompt afterwards and when it is quicker to simply copy a component.
- All four accept an MCP server by its address: Lovable under Connectors with the Custom MCP card, Bolt under Connectors (MCP) with Custom MCP server, v0 through Add MCP, Replit under Integrations or through an install link.
- A key travels as a header. Bolt, v0 and Replit have a field for it, Lovable relies on signing in with OAuth. Free servers need neither.
- Good prompts name the kind, the place and the content: which section, where on the page and with which copy. The name from the catalog is the surest way to the right component.
- For a single, known component copying is quicker. MCP pays off when the agent should search or when a whole page is built from several parts.
How do ready-made UI components get into Lovable, Bolt, v0 or Replit?
Through an MCP server that you enter once as a custom connector. After that the agent can search the library in the chat and fetch the full source of a component instead of reinventing it from a description.
MCP, the Model Context Protocol, is an open standard for tools a language model can call. A remote MCP server is an address on the web that answers such calls. All four builders speak this protocol over HTTP, so the entry is built the same way everywhere: a name, the address and, if the server requires it, a sign-in or a key.
The difference from copying out of the library is who searches. When copying, you search yourself and paste the code into the chat. With MCP you say what you need, and the agent searches, compares and fetches the code itself.
How do I connect an MCP server to Lovable?
Under Connectors, at the bottom of the All view, choose the Custom MCP card, paste the address and click Add server. If the server requires a sign-in, the button reads Add & authorize, and Lovable opens the provider's sign-in.
Lovable calls this a chat connector: the server is available to the agent in the chat, not to the finished app. That is exactly right for a component library, since it is needed while building, not in production.
Two places mislead. Custom connector is meant for building API integrations, not for existing MCP servers. And if the option is greyed out, an admin has turned custom servers off for the workspace. Lovable can also include whole directories of MCP servers, so-called registries, which an admin adds once.
How do I connect an MCP server to Bolt?
On the Connectors (MCP) page, click Custom MCP server and enter three things: the address, the transport and the authentication. For remote servers the transport is usually HTTP, the authentication None for servers without sign-in, API key for a key or OAuth for a sign-in.
Bolt lets you enable the server for every project or just one and switch connectors on and off per project. For a library you need everywhere, enabling it for every project is more convenient. New tools the provider adds later are discovered by Bolt itself.
How do I connect an MCP server to v0?
Click Add MCP, either in settings under MCP Connections or right in the prompt field, then create a custom server and paste the address. For authentication v0 offers No Auth, Custom Headers and Bearer Token.
If you use v0 through its API, you create the server there with a name and an address and pass its ID in the mcpServerIds field of a chat. That way the same library can also be used in your own tools built on v0.
How do I connect an MCP server to Replit?
Quickest is an install link: one click, and Replit adds the server with name, address and, if needed, a header. By hand it works under Integrations with Add MCP server, which has fields for custom headers such as Authorization.
The link is nothing more than a JSON object, base64-encoded and appended to https://replit.com/integrations?mcp=. Providers put it in their documentation, but you can also build it yourself, for instance to share a server with your own key inside a team.
One particularity: Replit sends every MCP call through a security scanner of its own that checks tool definitions and planned calls and blocks suspicious ones. If it rejects a tool, the agent says so in the chat.
{ "displayName": "Component library", "baseUrl": "https://example.com/api/mcp", "headers": [{ "key": "Authorization", "value": "Bearer YOUR_KEY" }]} // https://replit.com/integrations?mcp= + base64(JSON above)
How do I tell the agent which component to use?
With three details: what kind of section, where it goes and what content belongs in it. The agent then calls the search itself, compares the results and fetches the code. If you have already seen a particular component in the catalog, name it; that is the surest way.
The most important sentence comes last: the agent should take the component as it arrives and only swap copy and images. App builders like to adapt code to their project and in doing so rewrite exactly the parts that make a component special, such as an animation or a line break that is set on purpose.
Use the component library MCP server.Search for a hero section with a large photo and a single call to action.Put it at the top of the home page, above the pricing section.Headline: Book a table in two taps. Button: Reserve now.Use the component exactly as returned, only change the copy and the image.
When is copying better than an MCP server?
When you already know the component and only need one. Then copying and pasting is shorter: no entry, no search, and you see exactly what arrives beforehand. Many libraries offer a ready-made prompt with the code for this that fits straight into the builder's chat.
MCP pays off as soon as there is searching to do or a page is built from several parts: hero, features, pricing, footer, all from one source and in the same style. Then the agent saves the trips between browser and chat, and the parts fit together.
And there are cases where neither helps. A component that needs packages the builder cannot install, or one tailored to a different framework, will not arrive cleanly either way. A look at the dependencies before building it in is therefore worth it.
