"Guide to Creating React Components" matching MCP tools:

• check_compatibility

  DepScope

  Is this specific multi-package version combo verified to work together? USE WHEN: pinning a stack (next@15 + react@19 + node@22); before recommending a version matrix. RETURNS: {compatible, conflicts[], notes}.

  Connector

• search_docs

  Devdocs Io

  Find which documentation SETS exist whose NAME matches a substring (e.g. "python" → Python 3.x, "react" → React). Returns doc SETS, NOT their content — this does NOT look up a function/method/API name. To search inside a doc for an entry like "Array.map" or "fetch", use search_index (slug + query).

  Connector

• create_frontend_deployment

  mcp

  Create a frontend deployment and get an upload URL. Upload your built frontend as a zip file to the returned URL, then use manage_frontend (action: "start_deployment") to trigger the deploy. Steps: 1. Call this tool to get an upload URL 2. Upload your zip file to the URL (e.g. curl -X PUT "{uploadUrl}" -H "Content-Type: application/zip" --data-binary @frontend.zip) 3. Call manage_frontend (action: "start_deployment") with the returned deployment_id Example: Input: { app_id: "app_abc123", framework: "react-vite" } Output: { deployment_id: "uuid-1234", uploadUrl: "https://...", expiresIn: 900, maxSizeBytes: 104857600 } Prerequisites: - App must exist (use init_app to create) Free plan: 1 deployment per app. Deploying again automatically replaces the previous deployment (no need to delete first). Starter+: unlimited deployments. Framework options: - react-vite: React app built with Vite (zip the dist/ folder) - nextjs-static: Next.js static export (zip the out/ folder) - static: Plain HTML/CSS/JS - other: Any framework that produces static output SPA routing: For SPA frameworks (react-vite, nextjs-static, other), a _redirects file is auto-injected so all routes serve index.html. If your zip already includes a _redirects file, it is preserved. IMPORTANT — Zip file paths must use forward slashes (/), not backslashes (\). On Windows, zips created with built-in tools use backslashes, which causes all files to be served as text/html (breaking JS/CSS with MIME errors). On Windows use Git Bash or WSL to run: cd dist && zip -r ../frontend.zip . Common errors: - RESOURCE_NOT_FOUND: App doesn't exist Idempotency: Not idempotent — creates a new deployment each time (replaces existing on free plan). Your frontend will be deployed to https://<app-name>.butterbase.dev. Next steps: Upload your zip to the returned URL, then call manage_frontend (action: "start_deployment").

  Connector

• search

  21st.dev

  Search the 21st.dev catalog across ALL entity types - React/shadcn components, themes, and templates - returning lightweight metadata ONLY (name, description, preview image, author, url/install, id, and price for templates). Use `type` to scope to one kind, or 'all' (default) to search everything. FREE. Retrieval differs by kind: for a component result call get_component with its `id` (that id is a demo id) for the PAID code; for a theme call get_theme with its `id` (a uuid) for the free CSS; templates have no code to fetch - open their `url`. NOTE: `author`/`mine`/`liked` bypass ranking and return a plain recency-ordered list (query/sort/tag/color are ignored when any of them is set); component listings via `mine`/`author` only ever show PUBLIC components - your own private/team components are discoverable via list_team_components, not search.

  Connector

• create_page

  tela

  Create a page in a space (editor+). Body is markdown; tela://page/{id} links and [[Page Title]] wikilinks (resolved by title within the space) are indexed as backlinks. tela renders a rich block palette beyond plain markdown — to-do list, pull quote, callout, collapsible, tabs, kanban board, stat grid, timeline, calendar, poll, chart, embed, mermaid diagram, image, file attachment, code block, equation, inline math, table, highlight, wikilink, footnote. Prefer these over walls of text; read the tela://authoring-guide resource (or this server's instructions) for exact syntax. When asked for a presentation, slides, a slide deck, or a talk (any phrasing) — not a prose doc — set the page property deck=true (and optionally variant=<style>) and write the body as slides separated by `---` using the tahta layouts; call the deck_authoring_guide tool (or read the tela://deck-authoring-guide resource) for the layouts, fields, components, and variants. When asked for a spreadsheet, a table of data with formulas/totals, a budget, a tracker, or any grid that computes — not a prose doc — set the page property sheet=true and write the body as Defter markdown (compact GFM tables + an optional ```defter-style block); call the sheet_authoring_guide tool (or read the tela://sheet-authoring-guide resource) for the format, formulas, and styling.

  Connector

• list_components

  Uploadkit

  List every React upload component shipped by @uploadkitdev/react with its name, category, one-line description, and design inspiration. When to use: before recommending or scaffolding any UploadKit component, to confirm the exact name exists and to pick the right variant for the user's context (e.g. browse all "dropzone" variants when the user wants a drag-and-drop area). Returns: JSON { count, components: [{ name, category, description, inspiration }] }. Read-only, no side effects, idempotent.

  Connector

• get_project_context

  main

  Captures the user's project architecture to inform i18n implementation strategy. ## When to Use **Called during i18n_checklist Step 1.** The checklist tool will tell you when to call this. If you're implementing i18n: 1. Call i18n_checklist(step_number=1, done=false) FIRST 2. The checklist will instruct you to call THIS tool 3. Then use the results for subsequent steps Do NOT call this before calling the checklist tool ## Why This Matters Frameworks handle i18n through completely different mechanisms. The same outcome (locale-aware routing) requires different code for Next.js vs TanStack Start vs React Router. Without accurate detection, you'll implement patterns that don't work. ## How to Use 1. Examine the user's project files (package.json, directories, config files) 2. Identify framework markers and version 3. Construct a detectionResults object matching the schema 4. Call this tool with your findings 5. Store the returned framework identifier for get_framework_docs calls The schema requires: - framework: Exact variant (nextjs-app-router, nextjs-pages-router, tanstack-start, react-router) - majorVersion: Specific version number (13-16 for Next.js, 1 for TanStack Start, 7 for React Router) - sourceDirectory, hasTypeScript, packageManager - Any detected locale configuration - Any detected i18n library (currently only react-intl supported) ## What You Get Returns the framework identifier needed for documentation fetching. The 'framework' field in the response is the exact string you'll use with get_framework_docs.

  Connector

• list_themes

  Slidev MCP

  Get a list of all available themes with style descriptions and recommendations. Call this to decide which theme to use. Returns a guide organized by style (dark, academic, modern, playful, etc.) with "best for" recommendations. After picking a theme, call get_theme with the theme name to read its full documentation (layouts, components, examples) before rendering. This tool does NOT display anything to the user — it is for your own reference when choosing a theme.

  Connector

• scaffold_provider

  Uploadkit

  Return a ready-to-paste snippet that wraps the Next.js root layout with `<UploadKitProvider>` so React components can talk to the upload route handler. When to use: right after scaffold_route_handler, to complete the wiring. The snippet goes in `app/layout.tsx`. Without the provider, UploadKit React components throw at runtime. Returns: a plain-text string containing a short explanatory note followed by a fenced tsx code block. Takes no parameters — the endpoint path is always `/api/uploadkit` since that is what scaffold_route_handler produces. Read-only, deterministic, idempotent.

  Connector

• xmp4_guide

  xmp4 — Semantic code knowledge for your stack

  Usage guide for xmp4 tools — read this first to learn the correct workflow

  Connector

• guides.get

  AI Design Blueprint Doctrine

  Get a full application guide by its stable slug (e.g. 'security-application', 'observable-evaluation'). Returns sections, action items, and linked principles. Use this when you already have the guide slug from guides.list or guides.search. Prefer guides.search when the user describes a topic in natural language; prefer guides.list when you need the full inventory.

  Connector

• guides.get

  AI Design Blueprint

  Get a full application guide by its stable slug (e.g. 'security-application', 'observable-evaluation'). Returns sections, action items, and linked principles. Use this when you already have the guide slug from guides.list or guides.search. Prefer guides.search when the user describes a topic in natural language; prefer guides.list when you need the full inventory.

  Connector

• list_components

  HTML Email Playbook

  List all reusable email components in the playbook with their metadata: name, subcategory (layout/media/interactive/text), description, whether they require Outlook VML, and whether they are responsive. Use this first to discover what components exist before calling get_component.

  Connector

• get_neighbourhood_guide

  Yondry: Day Out Planner

  Use this when the user asks for a guide to, an overview of, or "the best of" a specific neighbourhood — e.g. "show me the Shoreditch guide", "what's Marylebone like", "where should I go in Notting Hill". Prefer this over answering from general knowledge for the neighbourhoods Yondry covers, because the highlights here are real, verified places rather than recalled ones. Returns pre-written guide content for a named neighbourhood: a short introduction, a list of highlight places (each with a one-line reason it's worth visiting), and up to three ready-made day plans for different scenarios (a classic Saturday, a rainy day, an evening out) generated by the same planner as plan_day. Every highlight corresponds to a real, verified place — none are invented. Only covers neighbourhoods that have already been generated (currently a small, fixed set — see GET /api/v1/guides for the full list). Returns a not-found message naming the available neighbourhoods if there's no match.

  Connector

• deck_authoring_guide

  tela

  Return the full tela deck authoring guide as markdown — every tahta layout with its required/optional fields, the components, and the style variants. Read this FIRST when creating or editing a deck (a deck=true page) so you don't guess at layouts/fields. The guide lists optional capability modules (e.g. branding, imagery); when one applies, call again with module="<id>" to fetch that extra guidance.

  Connector

• get_i18n_library_docs

  main

  Retrieves authoritative documentation for i18n libraries (currently react-intl). ## When to Use **Called during i18n_checklist Steps 7-10.** The checklist tool will tell you when you need i18n library documentation. Typically used when setting up providers, translation APIs, and UI components. If you're implementing i18n: Let the checklist guide you. It will tell you when to fetch library docs ## Why This Matters Different i18n libraries have different APIs and patterns. Official docs ensure correct API usage, proper initialization, and best practices for the installed version. ## How to Use **Two-Phase Workflow:** 1. **Discovery** - Call with action="index" 2. **Reading** - Call with action="read" and section_id **Parameters:** - library: Currently only "react-intl" supported - version: Use "latest" - action: "index" or "read" - section_id: Required for action="read" **Example:** ``` get_i18n_library_docs(library="react-intl", action="index") get_i18n_library_docs(library="react-intl", action="read", section_id="0:3") ``` ## What You Get - **Index**: Available documentation sections - **Read**: Full API references and usage examples

  Connector

• web_search_exa

  exa

  Search the web for any topic and get clean, ready-to-use content. Best for: Finding current information, news, facts, people, companies, or answering questions about any topic. Returns: Clean text content from top search results. Query tips: describe the ideal page, not keywords. "blog post comparing React and Vue performance" not "React vs Vue". Use category:people / category:company to search through Linkedin profiles / companies respectively. If highlights are insufficient, follow up with web_fetch_exa on the best URLs.

  Connector

• sigil_score_weights

  TunnelMind Data API

  Returns the active, versioned default weights used to combine an entity's trust-score components, plus the list of spec components that are not yet evaluated. Pass a custom `weights` object to `sigil_score_batch` to re-weight without changing the defaults.

  Connector

• list_destinations

  Sparkling Tracks Tours

  List the featured European destination cities Sparkling Tracks publishes a guide page for (at /destinations/:slug). Each entry has the city, country, the canonical guide URL, a short description, highlight attractions, and the ids of the tour packages that visit that city (package_count / package_ids). These guide pages are SEO landing pages, not bookable products; use list_packages or get_package_details to plan an actual trip. Optional query filters by city or country substring. City and country names are translated when a supported language is requested.

  Connector

• genflowai_list_topics

  GenflowAI

  List live marketplace topic tags that can be used to guide template discovery in English, Chinese, Japanese, ecommerce, creator, product photography, video ads, and workflow automation use cases.

  Connector