Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/omavashia2005/ai-tool-elements/llms.txt

Use this file to discover all available pages before exploring further.

Any connector with a stable id, a display name, and a matching @thesvg/icons logo can be added to the catalog. Once merged, the connector becomes available as a typed named export and appears in toolCatalog for every user of the package.

​
Before you start

For well-known tools with official brands, pull requests are always welcome. If the connector is niche or internal-facing, consider opening a GitHub issue first to discuss whether it belongs in the shared catalog before investing time in a PR.

​
Step-by-step

1

Confirm the icon exists in @thesvg/icons

Visit thesvg.org and search for the brand. Note the exact slug — for example, acme. The slug must resolve to a valid @thesvg/icons/<slug> subpath import.
2

Add the icon import to src/tool-catalog.ts

Import the raw SVG string using the exact per-slug subpath. Barrel imports are not permitted:
import { svg as _iconAcme } from "@thesvg/icons/acme";
3

Export a typed catalog item

Define and export a ToolCatalogItem constant below the imports. Keep the export name in PascalCase and the id in kebab-case (or use the slug form consistent with the existing catalog):
export const Acme: ToolCatalogItem = {
  id: "acme",
  name: "Acme",
  description: "Connect to Acme services.",
  image: { type: "svg", content: _iconAcme },
  fields: [
    { name: "apiKey", label: "API key", required: true },
  ],
};
4

Add the export to the toolCatalog array

Find the toolCatalog array in the same file and append the new constant. Nothing needs to be changed in src/index.ts — it already re-exports everything from src/tool-catalog.ts:
export const toolCatalog: readonly ToolCatalogItem[] = [
  // ... existing entries
  Acme,
];
5

Run the test suite

From the repository root, run:
npm test
The test suite builds the package, generates type declarations and CSS, then verifies unique IDs, named exports, and SVG content. All checks must pass before opening a PR.
6

Open a pull request against the dev branch

Push your branch and open a pull request targeting dev. Describe the connector being added and confirm that npm test passes. Keep the PR focused — unrelated formatting changes, dependency bumps, or generated catalog updates should be excluded.

​
Conventions

Keep these conventions in mind when editing src/tool-catalog.ts:
  • Stable, unique IDs. Connector id values must be unique across the entire catalog. Use kebab-case or the underscore form that matches existing catalog entries for that brand.
  • Per-icon imports only. Always use @thesvg/icons/<slug> subpath imports. Do not import from the @thesvg/icons barrel.
  • Catalog entries must include an image. Every item added to toolCatalog must have an image field — either a @thesvg/icons SVG or a trusted inline SVG string (see below).
  • Trademarks. Product names and logos are trademarks of their respective owners. The catalog provides display metadata only.
  • No new icon dependencies. Do not add a new package dependency for a single logo. Use an inline SVG string if no @thesvg/icons entry exists.

​
If no @thesvg/icons logo exists

When the brand has no entry in @thesvg/icons, define a trusted inline SVG string beside the connector and reference it as content: 
const _iconAcme = String.raw`
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="10" fill="#6D5EF7"/>
    <path d="M7 16 12 6l5 10h-3l-2-4-2 4H7Z" fill="#fff"/>
  </svg>
`;

export const Acme: ToolCatalogItem = {
  id: "acme",
  name: "Acme",
  description: "Connect to Acme services.",
  image: { type: "svg", content: _iconAcme },
};
SVG content must be the complete <svg>...</svg> markup including a viewBox. Use explicit fill colors — SVG rendered via <img> does not inherit currentColor.
For full project conventions, release process, and development setup, see the CONTRIBUTING.md file in the repository.

Build docs developers (and LLMs) love

Get started for freeTalk to us