Pulling components into your project

The component workflow turns a plain description into a production-grade section in your project. You don't browse a gallery or copy code by hand — you tell your AI what you need, it searches BYQ, and it brings back everything required to build the section properly. Here's how the flow runs.

‍

1. Describe what you want

Start with the kind of section and any qualities that matter. The more specific the description, the better the search:

• "a pricing table with a monthly/yearly toggle"
• "a hero with a video background"
• "a three-column feature grid with icons"

Behind the scenes this becomes a [class]search_byq_components[/class] call. You can also lean on categories — Hero, Pricing, Features, Footer, and more — by saying something like "show me pricing components from BYQ."

‍

2. Choose from the matches

The search returns a shortlist, each with a name, description, tags, and thumbnail. Your AI will usually pick the closest fit, but you stay in control — if it picked one you don't love, ask to see the others, or point it at a specific result by name. This is the moment to steer, before any code is fetched.

‍

3. Fetch the integration prompt

Once a section is chosen, your AI calls [class]get_byq_component[/class] with its id. What comes back is not a code snippet — it's a full brief for building the section:

• A reference implementation in React with TypeScript and Tailwind, marked explicitly as a reference rather than something to paste.
• A full spec — layout and structure, exact colours, typography and spacing, a content inventory, hover and scroll interactions, animation notes, and the responsive behaviour at each breakpoint.
• Setup notes — the Google Fonts to load, any npm packages needed, and whether it has to be a client component.
• Style-adaptation steps — which hardcoded colours, fonts and radii to swap for your project's own tokens.
• Integration steps that begin by telling your AI to read two or three of your existing components first.

‍

4. Let your AI adapt and place it

This is the part that matters. The prompt explicitly instructs your AI not to copy the reference verbatim — it's told to read your project's conventions and rewrite the section to match your container widths, colour tokens, font stack and naming before it lands.

So what ends up in your codebase isn't a foreign block wedged into the middle of it. It reads like the rest of your code, because your AI wrote it that way on purpose.

‍

Getting better matches

A few habits make the search sharper:

• Name the section type first. "Pricing," "hero," "footer" anchors the search far better than describing the contents alone.
• Add one or two distinguishing features. "with a toggle," "with logos," "centered" narrows results without over-constraining them.
• Browse the library when you're unsure. If you'd rather see options visually first, the Sections library on the site shows everything the MCP can reach — find what you like there, then ask your AI for it by name.

‍

What you can pull

The MCP is part of Pro and Ultra, and once connected your AI can reach the sections your plan gives you — the same access you'd have browsing the site. The MCP doesn't change what's available to you; it just makes reaching it faster.