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 the code. 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 component is chosen, your AI calls [class]get_byq_component[/class] with that component's id. What comes back isn't just code — it's a full integration prompt: ready-to-paste React and Tailwind, setup notes, and style-adaptation steps so the component can be tuned to your project rather than dropped in raw.

‍

4. Let your AI place it

Your AI takes the integration prompt and works it into your project — adding the markup, wiring up any required setup, and adapting class names or tokens to fit what you're building. Because the components are React and Tailwind, they slot into modern frontend projects directly.

‍

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 components your AI can fetch follow your account's access. Designated free sections are available on Free; the rest of the library follows your Pro or Ultra plan — 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.