add Partner badge and Tavily as first partner MCP (#948)

avoguru · github-actions[bot] · emmithood · web-flow · commit 599fc3041426 · 2026-04-24T22:14:45.000-07:00
* feat(integrations): add Partner badge and Tavily as first partner MCP

- Add `isPartner` flag to ToolkitWithDocsLink so toolkits can render a
  Partner badge alongside BYOC/Pro on catalog cards (Handshake icon, pink).
- Treat Generic icon from @arcadeai/design-system as "no match" in
  getToolkitIconWithFallback so toolkits with publicIconUrl render their
  own SVG instead of the placeholder.
- New PARTNER_TOOLKITS data source for partner remote MCP listings.
  Tavily ships first as type "verified" with isPartner=true and a
  templated mcpUrl.
- Hand-crafted Tavily detail page at /search/tavily with proper markdown
  heading, MCP Server URL block, and a 4-step "Add to your Arcade
  project" walkthrough.
- Add `.npmrc` so contributors can install @arcadeai/* from public npm
  without needing GitHub Packages auth.

Made-with: Cursor

* 🤖 Regenerate LLMs.txt

* fix(integrations): make useToolkitFilters generic to preserve docs-local fields

Vercel build was failing TypeScript compilation because
useToolkitFilters typed its parameter as `Toolkit[]` from
@arcadeai/design-system, narrowing the array element type and
discarding the `isPartner` and `docsLink` fields that ToolkitsClient
needs.

Make the hook (and its compareToolkits helper) generic over `T extends
Toolkit` so caller-side fields flow through. No runtime change.

Made-with: Cursor

* Update app/en/resources/integrations/search/tavily/page.mdx

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;

* Update app/en/resources/integrations/search/tavily/page.mdx

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;

* Update app/en/resources/integrations/search/tavily/page.mdx

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;

* Update app/en/resources/integrations/search/tavily/page.mdx

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;

---------

Co-authored-by: github-actions[bot] &lt;github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: emmithood &lt;emmithood@gmail.com&gt;
Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+@arcadeai:registry=https://registry.npmjs.org/
diff --git a/app/_data/partner-toolkits.ts b/app/_data/partner-toolkits.ts
@@ -0,0 +1,42 @@
+import type { Toolkit } from "@arcadeai/design-system";
+
+/**
+ * Docs-local partner toolkits (remote MCP Servers offered by our partners).
+ *
+ * These entries are merged into the live integrations catalog alongside the
+ * TOOLKITS exported from @arcadeai/design-system. Each partner toolkit uses
+ * a standard ToolkitType (typically "verified") plus an `isPartner: true`
+ * flag that renders a Partner badge next to BYOC/Pro on catalog cards.
+ *
+ * Once DS adds an explicit `isPartner` field to its Toolkit shape, migrate
+ * these entries into the DS TOOLKITS array and delete this file.
+ */
+
+export type PartnerToolkit = Toolkit & {
+  isPartner: true;
+  /**
+   * Remote MCP Server URL displayed on the partner detail page. Use a
+   * placeholder like `YOUR_API_KEY` for any per-user secrets so the URL can
+   * be copied without leaking credentials. Updating this field updates the
+   * detail page automatically.
+   */
+  mcpUrl: string;
+};
+
+export const PARTNER_TOOLKITS: PartnerToolkit[] = [
+  {
+    id: "Tavily",
+    label: "Tavily",
+    category: "search",
+    publicIconUrl: "/images/partners/tavily.svg",
+    isBYOC: true,
+    isPro: false,
+    isPartner: true,
+    type: "verified",
+    mcpUrl: "https://mcp.tavily.com/mcp/?tavilyApiKey=YOUR_API_KEY",
+    docsLink: "https://docs.arcade.dev/en/resources/integrations/search/tavily",
+    relativeDocsLink: "/en/resources/integrations/search/tavily",
+    isComingSoon: false,
+    isHidden: false,
+  },
+];
diff --git a/app/_lib/toolkit-slug.ts b/app/_lib/toolkit-slug.ts
@@ -9,12 +9,16 @@ export type ToolkitSlugSource = {
 };
 
 /**
- * Toolkit with an optional docsLink property.
- * The design-system `Toolkit` type doesn't include `docsLink` in its
- * type definitions, but some entries carry it at runtime. This type
- * makes the property explicit so both server and client code can share it.
+ * Toolkit with optional `docsLink` and `isPartner` properties.
+ * The design-system `Toolkit` type doesn't include either field, but some
+ * docs-local entries carry them at runtime (e.g. partner toolkits that
+ * render a Partner badge on cards). This type makes the properties explicit
+ * so both server and client code can share it.
  */
-export type ToolkitWithDocsLink = Toolkit & { docsLink?: string | null };
+export type ToolkitWithDocsLink = Toolkit & {
+  docsLink?: string | null;
+  isPartner?: boolean;
+};
 
 /**
  * Strip all non-alphanumeric characters and lowercase.
diff --git a/app/en/resources/integrations/components/tool-card.tsx b/app/en/resources/integrations/components/tool-card.tsx
@@ -9,7 +9,7 @@ import {
   type ToolkitType,
 } from "@arcadeai/design-system";
 import { cn } from "@arcadeai/design-system/lib/utils";
-import { Package } from "lucide-react";
+import { Handshake, Package } from "lucide-react";
 import Link from "next/link";
 import posthog from "posthog-js";
 import type React from "react";
@@ -26,6 +26,7 @@ type ToolCardProps = {
   isComingSoon?: boolean;
   isByoc?: boolean;
   isPro?: boolean;
+  isPartner?: boolean;
 };
 
 export const ToolCard: React.FC<ToolCardProps> = ({
@@ -37,6 +38,7 @@ export const ToolCard: React.FC<ToolCardProps> = ({
   isComingSoon = false,
   isByoc = false,
   isPro = false,
+  isPartner = false,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const {
@@ -45,7 +47,7 @@ export const ToolCard: React.FC<ToolCardProps> = ({
     icon: IconComponent,
     color,
   } = TOOL_CARD_TYPE_CONFIG[type];
-  const showHeaderBadges = isByoc || isPro || isComingSoon;
+  const showHeaderBadges = isByoc || isPro || isPartner || isComingSoon;
 
   const trackToolCardClick = () => {
     posthog.capture("Tool card clicked", {
@@ -55,6 +57,7 @@ export const ToolCard: React.FC<ToolCardProps> = ({
       is_coming_soon: isComingSoon,
       is_byoc: isByoc,
       is_pro: isPro,
+      is_partner: isPartner,
     });
   };
 
@@ -131,6 +134,15 @@ export const ToolCard: React.FC<ToolCardProps> = ({
               )}
               {isByoc && <ByocBadge className="gap-1.5 rounded-md" />}
               {isPro && <ProBadge className="gap-1.5 rounded-md" />}
+              {isPartner && (
+                <Badge
+                  className="shrink-0 gap-1.5 whitespace-nowrap rounded-md border-pink-400/50 bg-pink-500/10 text-pink-700 dark:border-pink-400/50 dark:bg-pink-400/10 dark:text-pink-300"
+                  variant="outline"
+                >
+                  <Handshake className="h-3 w-3" />
+                  Partner
+                </Badge>
+              )}
             </div>
           )}
         </div>
diff --git a/app/en/resources/integrations/components/toolkits-client.tsx b/app/en/resources/integrations/components/toolkits-client.tsx
@@ -5,6 +5,7 @@ import {
   getToolkitIcon,
   Separator,
 } from "@arcadeai/design-system";
+import { Generic as GenericIcon } from "@arcadeai/design-system/components/ui/atoms/icons";
 import { cn } from "@arcadeai/design-system/lib/utils";
 import { Plus, Search } from "lucide-react";
 import Link from "next/link";
@@ -36,25 +37,27 @@ function mapToToolkitPage(
 
 /**
  * Get toolkit icon with fallback for API toolkits.
- * If "GithubApi" has no icon, falls back to "Github" icon.
+ *
+ * `getToolkitIcon` from @arcadeai/design-system returns the Generic placeholder
+ * (not null) when a toolkit id isn't in its icon map. For toolkits that ship
+ * their own `publicIconUrl` (e.g. partner toolkits not yet in the DS),
+ * we treat Generic as "no match" so the caller can fall through to `iconUrl`.
  */
 function getToolkitIconWithFallback(
   toolkitId: string
 ): React.ComponentType<React.SVGProps<SVGSVGElement>> | null {
   const apiSuffix = "api";
 
-  // Try direct match first
-  const directIcon = getToolkitIcon(toolkitId);
-  if (directIcon) {
-    return directIcon;
+  const resolved = getToolkitIcon(toolkitId);
+  if (resolved && resolved !== GenericIcon) {
+    return resolved;
   }
 
-  // For API toolkits, try the base provider ID
   const normalizedId = toolkitId.toLowerCase();
   if (normalizedId.endsWith(apiSuffix)) {
-    const baseProviderId = toolkitId.slice(0, -apiSuffix.length); // Remove "Api" suffix
+    const baseProviderId = toolkitId.slice(0, -apiSuffix.length);
     const baseIcon = getToolkitIcon(baseProviderId);
-    if (baseIcon) {
+    if (baseIcon && baseIcon !== GenericIcon) {
       return baseIcon;
     }
   }
@@ -175,6 +178,7 @@ export default function ToolkitsClient({ toolkits }: ToolkitsClientProps) {
                       iconUrl={iconUrl}
                       isByoc={toolkit.isBYOC}
                       isComingSoon={toolkit.isComingSoon}
+                      isPartner={toolkit.isPartner}
                       isPro={toolkit.isPro}
                       key={toolkit.id}
                       link={mapToToolkitPage(
diff --git a/app/en/resources/integrations/components/toolkits.tsx b/app/en/resources/integrations/components/toolkits.tsx
@@ -1,10 +1,12 @@
 import { TOOLKITS, type Toolkit } from "@arcadeai/design-system";
+import { PARTNER_TOOLKITS } from "@/app/_data/partner-toolkits";
 import { readToolkitData } from "@/app/_lib/toolkit-data";
-import { normalizeToolkitId } from "@/app/_lib/toolkit-slug";
+import {
+  normalizeToolkitId,
+  type ToolkitWithDocsLink,
+} from "@/app/_lib/toolkit-slug";
 import ToolkitsClient from "./toolkits-client";
 
-type ToolkitWithDocsLink = Toolkit & { docsLink?: string | null };
-
 const getToolkitDocsLink = (toolkit: Toolkit): string | undefined => {
   if ("docsLink" in toolkit) {
     const value = (toolkit as ToolkitWithDocsLink).docsLink;
@@ -33,13 +35,15 @@ const getToolkitsWithDocsLinks = async (): Promise<ToolkitWithDocsLink[]> => {
     })
   );
 
-  return TOOLKITS.map((toolkit) => {
+  const dsToolkits: ToolkitWithDocsLink[] = TOOLKITS.map((toolkit) => {
     const existing = getToolkitDocsLink(toolkit);
     const docsLink =
       existing ?? docsLinkById.get(normalizeToolkitId(toolkit.id));
 
     return docsLink ? { ...toolkit, docsLink } : toolkit;
   });
+
+  return [...dsToolkits, ...PARTNER_TOOLKITS];
 };
 
 export default async function Toolkits() {
diff --git a/app/en/resources/integrations/components/use-toolkit-filters.ts b/app/en/resources/integrations/components/use-toolkit-filters.ts
@@ -25,7 +25,7 @@ const TYPE_LABELS: Record<ToolkitType, string> = {
 const getTypePriority = (type: string): number =>
   TYPE_PRIORITY[type as ToolkitType] ?? DEFAULT_PRIORITY;
 
-const compareToolkits = (a: Toolkit, b: Toolkit): number => {
+const compareToolkits = <T extends Toolkit>(a: T, b: T): number => {
   // First prioritize available toolkits over coming soon toolkits
   if (a.isComingSoon !== b.isComingSoon) {
     return a.isComingSoon ? 1 : -1;
@@ -80,7 +80,7 @@ export const useFilterStore = create<FilterState>((set) => ({
     }),
 }));
 
-export function useToolkitFilters(toolkits: Toolkit[]) {
+export function useToolkitFilters<T extends Toolkit>(toolkits: T[]) {
   const {
     selectedCategory,
     selectedType,
@@ -91,7 +91,7 @@ export function useToolkitFilters(toolkits: Toolkit[]) {
 
   const debouncedSearchQuery = useDebounce(searchQuery, DEBOUNCE_TIME);
 
-  const filteredToolkits = useMemo(() => {
+  const filteredToolkits = useMemo<T[]>(() => {
     const searchLower = debouncedSearchQuery.toLowerCase();
 
     return toolkits
diff --git a/app/en/resources/integrations/search/_meta.tsx b/app/en/resources/integrations/search/_meta.tsx
@@ -53,6 +53,14 @@ const meta: MetaRecord = {
     title: "Exa API",
     href: "/en/resources/integrations/search/exa-api",
   },
+  "-- Partner": {
+    type: "separator",
+    title: "Partner",
+  },
+  tavily: {
+    title: "Tavily",
+    href: "/en/resources/integrations/search/tavily",
+  },
 };
 
 export default meta;
diff --git a/app/en/resources/integrations/search/tavily/page.mdx b/app/en/resources/integrations/search/tavily/page.mdx
@@ -0,0 +1,80 @@
+---
+title: "Tavily"
+description: "Enable agents to search the web in real time and extract structured content. Available directly in Arcade as a Partner MCP Server."
+---
+
+import { Callout, Steps } from "nextra/components";
+
+# Tavily
+
+This integration is a remote MCP Server offered by [Tavily](https://tavily.com), an Arcade Partner. Add it to an [MCP Gateway](/guides/mcp-gateways/add-remote-servers) for central governance, authorization, and access control alongside Arcade's native servers.
+
+## MCP Server URL
+
+Paste the following URL into Arcade: **Servers → Add Server → Remote MCP**. Replace `YOUR_API_KEY` with the key you generate at [tavily.com](https://tavily.com).
+
+```text
+https://mcp.tavily.com/mcp/?tavilyApiKey=YOUR_API_KEY
+```
+
+## What you can do
+
+Once you register Tavily in your Arcade project, Arcade discovers these tools automatically:
+
+| Tool | What it does |
+| --- | --- |
+| `Tavily.Search` | Real-time web search with agent-optimized ranking. |
+| `Tavily.Extract` | Extract structured content from specific URLs. |
+| `Tavily.Crawl` | Crawl a site and return content across pages. |
+| `Tavily.Map` | Map the structure of a site or domain. |
+| `Tavily.Research` | Multi-source deep research across the web. |
+| `Tavily.Skill` | High-level research skills built on the tools above. |
+
+Compose these tools with Google Docs, Slack, Salesforce, GitHub, or any of Arcade's native servers in a single MCP Gateway, so an agent can research, draft, and act in one flow, with full authorization and audit from Arcade's runtime.
+
+## Add Tavily to your Arcade project
+
+<Steps>
+
+### Get your Tavily API key
+
+Go to [tavily.com](https://tavily.com) → **Overview** → **Generate MCP Link**. Copy the generated URL (it contains your API key).
+
+### Add Tavily as a Remote MCP Server in Arcade
+
+Open the [Arcade Dashboard](https://api.arcade.dev/dashboard) → **Servers** → **Add Server** → **Remote MCP**. Paste the URL from the [MCP Server URL](#mcp-server-url) section above (with your API key in place of `YOUR_API_KEY`) and save.
+
+<Callout type="info">
+  See the full walkthrough in <a href="/guides/mcp-gateways/add-remote-servers">Add remote MCP servers</a> for advanced settings like connection retries, OAuth, and custom headers.
+</Callout>
+
+### Verify Tavily tools
+
+Arcade discovers six Tavily tools: `Tavily.Search`, `Tavily.Extract`, `Tavily.Crawl`, `Tavily.Map`, `Tavily.Research`, and `Tavily.Skill`. They appear in the Playground for this project and in the MCP Gateway tool picker.
+
+### Create an MCP Gateway
+
+Go to **MCP Gateways** → **Create Gateway**. Select Tavily plus any other MCP Servers you want to compose with (for example, Google Docs and Slack). Set the auth mode to **Arcade Auth** so users authenticate with their Arcade account. Copy the gateway URL. This is what your agent connects to.
+
+</Steps>
+
+## Call Tavily tools from your agent
+
+Once you create your gateway, any MCP client that supports Streamable HTTP can use it: Cursor, Claude Desktop, VS Code, or a custom application built with the Vercel AI SDK, LangChain, or OpenAI Agents.
+
+```text
+https://api.arcade.dev/mcp/<YOUR-GATEWAY-SLUG>
+```
+
+Arcade handles authorization, credential handling, and audit logging at runtime.
+
+## Example
+
+See the open-source [Financial Intelligence Agent](https://github.com/arcadeai-labs/financial-intelligence), a web-based research assistant that composes Tavily, Google Docs, and Slack through a single MCP Gateway in under 200 lines of code.
+
+## Resources
+
+- [Tavily documentation](https://docs.tavily.com)
+- [Add remote MCP servers to Arcade](/guides/mcp-gateways/add-remote-servers)
+- [Create an MCP Gateway](/guides/mcp-gateways/create-via-dashboard)
+- [Connect to MCP clients](/get-started/mcp-clients)
diff --git a/public/images/partners/tavily.svg b/public/images/partners/tavily.svg
@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Tavily</title><path d="M8.033 14.273a1.612 1.612 0 011.139.47l.04.042.044.043a1.61 1.61 0 010 2.277l-3.073 3.073.816.816c.6.6.303 1.627-.525 1.814l-5.159 1.165a1.07 1.07 0 01-.897-.2l-.102-.09a1.07 1.07 0 01-.289-1l1.164-5.158A1.079 1.079 0 013.006 17l.816.817 3.074-3.074a1.612 1.612 0 011.137-.47zM17.042 13.246c0-.85.935-1.366 1.653-.912l4.47 2.824c.336.212.503.562.503.911 0 .35-.167.7-.501.913l-4.472 2.824a1.079 1.079 0 01-1.654-.912v-1.155h-7.027c.37-.4.605-.902.677-1.438l.022-.232a2.65 2.65 0 00-.492-1.669h6.821v-1.154zM8.188 0c.35 0 .7.168.913.503l2.823 4.47a1.079 1.079 0 01-.911 1.655H9.857v6.692h-1.67a2.633 2.633 0 00-1.668.48V6.629H5.365c-.849 0-1.366-.936-.912-1.654L7.276.503A1.072 1.072 0 018.188 0z"></path></svg>
diff --git a/public/llms.txt b/public/llms.txt
@@ -142,6 +142,7 @@ Arcade delivers three core capabilities: Deploy agents even your security team w
 - [Setup Arcade with LangChain](https://docs.arcade.dev/en/get-started/agent-frameworks/langchain/use-arcade-with-langchain-ts): This documentation page provides a comprehensive guide on integrating Arcade tools within LangChain agents, enabling users to build and manage AI agents effectively. It covers essential concepts, prerequisites, and step-by-step instructions for transforming Arcade tools into LangChain-compatible tools, configuring agents
 - [Setup Arcade with OpenAI Agents (TypeScript)](https://docs.arcade.dev/en/get-started/agent-frameworks/openai-agents/setup-typescript): This documentation page provides a comprehensive guide for setting up and building AI agents using the OpenAI Agents SDK with Arcade tools in TypeScript. It covers the integration process, including converting Arcade tools to the required format, handling authorization, and executing agent functions.
 - [Setup Arcade with OpenAI Agents SDK](https://docs.arcade.dev/en/get-started/agent-frameworks/openai-agents/setup-python): This documentation page guides users on how to set up and integrate Arcade tools within OpenAI Agents applications using the OpenAI Agents SDK. It covers the necessary prerequisites, provides step-by-step instructions for creating a CLI agent, and explains how to implement tool authorization
+- [Tavily](https://docs.arcade.dev/en/resources/integrations/search/tavily): Documentation page
 - [The Arcade Registry](https://docs.arcade.dev/en/resources/registry-early-access): The Arcade Registry documentation provides an overview of a platform where developers can share and monetize their tools for agentic applications, similar to HuggingFace or Pypi. It explains how the registry integrates runtime metrics and user feedback to enhance tool development and usage
 - [Tool error handling](https://docs.arcade.dev/en/guides/tool-calling/error-handling): This documentation page provides guidance on effectively handling errors when using tools with Arcade's Tool Development Kit (TDK). It explains the error handling philosophy, outlines best practices, and offers code examples for managing output errors in various programming languages. Users will learn how
 - [Tool feedback](https://docs.arcade.dev/en/resources/integrations/tool-feedback): Documentation page

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@arcadeai:registry=https://registry.npmjs.org/`