What your AI can do once it's connected

The MCP adds four tools to your AI's toolkit — two for components, two for design systems. You'll rarely call them by name, but knowing what each does helps you prompt better.

Once connected, your AI gains four new abilities from BYQ. You'll never call these by name — your AI picks the right one from what you ask — but a quick look at them helps you write better prompts. They come in two simple pairs: one ability to find components and one to grab them, then the same pair for design systems.


Components: search, then fetch

Components are the section building blocks from the BYQ library — heroes, pricing tables, feature grids, footers, and more — delivered as React and Tailwind.

  • search_byq_components — searches the section library by keyword or category. It returns a shortlist of matches, each with an id, name, description, tags, and a thumbnail, so your AI (and you) can pick the right one. Categories include Hero, Pricing, Features, Footer, and more.
  • get_byq_component — takes the id of a component you've found and fetches its full integration prompt: ready-to-paste React and Tailwind code, setup notes, and style-adaptation steps. This is the piece your AI drops into your project.

The two work as a pair: search narrows the field, fetch pulls the one you want.

Design systems: search, then fetch

Design systems are the visual language extracted from premium templates — colors, typography, spacing, and the rules around them. They're covered in depth in the Design Systems track.

  • search_byq_styles — searches curated marketplace design systems (and any you've extracted yourself). It returns each system's name, tagline, and theme mode (light or dark), so you can match the mood you're after.
  • get_byq_style — fetches a full design system in the format you need: DESIGN.md for teaching an AI the whole visual language, tokens.json for raw design tokens, or theme.css / variables.css to drop straight into your project.

Same pattern as components: search to find, fetch to apply.

Why find and grab are separate

Keeping the two apart lets your AI work the way you would: it looks over a few matches before settling on one, the same way you'd glance at thumbnails before clicking. Give it a loose prompt and it leans on searching; name something specific and it can go almost straight to grabbing it. Either way, what you get is pulled from the real library rather than made up.

You prompt in plain language

None of this requires you to memorize tool names. A prompt like "find a testimonial section with logos and apply our dark design system" naturally maps to a component search, a component fetch, a style search, and a style fetch — your AI sequences them for you. The chapters that follow show how each workflow plays out in practice.

The component workflow end to end — searching by keyword or category, picking a match, and dropping the code in.