Tangent

Working · 2.3 s

directory.tangent/tangentv0.2.0 Domain verified

Hand-picked design references, UI patterns and the people behind them, each with why it fits.

Design & Creative

Website Registry entry

Maintain this server? Claim it

Try it

Call this server's tools from your browser. Nothing to install.

https://tangent.directory/api/mcp

Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.

Tool list from our last check. Connect live to refresh it.

browse_vertical Read-only

The newest resources in one section: inspiration, components, motion, build, visuals, tools or learn. Use it to browse without a query, with the same filters as search_resources and cursor paging. Example: {"vertical": "components", "technology": "react", "limit": 20}

verticalstring, required

Section: "inspiration", "components", "motion", "build", "visuals", "tools" or "learn".

typestring

Resource type, e.g. "website", "product", "library", "tool", "gallery", "article".

limitinteger

Results per page (1 to 50, default 20).

cursorstring

next_cursor from the previous call, with the same query and filters. Omit for the first page.

pricingstring

Pricing model.

categorystring

Category slug or name, e.g. "finance", "component-libraries", "typography".

technologystring

Technology slug or name, e.g. "react", "tailwind-css", "three-js".

open_sourceboolean

true: only open-source resources; false: only ones known not to be.

Tools (10)

browse_vertical

read-only

Argument	Type	Description
type	string	Resource type, e.g. "website", "product", "library", "tool", "gallery", "article".
limit	integer	Results per page (1 to 50, default 20).
cursor	string	next_cursor from the previous call, with the same query and filters. Omit for the first page.
pricing	string	Pricing model.
category	string	Category slug or name, e.g. "finance", "component-libraries", "typography".
vertical*	string	Section: "inspiration", "components", "motion", "build", "visuals", "tools" or "learn".
technology	string	Technology slug or name, e.g. "react", "tailwind-css", "three-js".
open_source	boolean	true: only open-source resources; false: only ones known not to be.

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "vertical"
  ],
  "properties": {
    "type": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Resource type, e.g. \"website\", \"product\", \"library\", \"tool\", \"gallery\", \"article\"."
    },
    "limit": {
      "type": "integer",
      "default": 20,
      "maximum": 50,
      "minimum": 1,
      "description": "Results per page (1 to 50, default 20)."
    },
    "cursor": {
      "type": "string",
      "maxLength": 2000,
      "description": "next_cursor from the previous call, with the same query and filters. Omit for the first page."
    },
    "pricing": {
      "enum": [
        "free",
        "freemium",
        "paid",
        "open_source"
      ],
      "type": "string",
      "description": "Pricing model."
    },
    "category": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Category slug or name, e.g. \"finance\", \"component-libraries\", \"typography\"."
    },
    "vertical": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Section: \"inspiration\", \"components\", \"motion\", \"build\", \"visuals\", \"tools\" or \"learn\"."
    },
    "technology": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Technology slug or name, e.g. \"react\", \"tailwind-css\", \"three-js\"."
    },
    "open_source": {
      "type": "boolean",
      "description": "true: only open-source resources; false: only ones known not to be."
    }
  }
}

find_inspiration

Turns a design brief into a short list of references (default 8, at most 10), each with `why` it fits: the pattern, style, category, technology or platform it shares with the brief, or how search matched it (e.g. "similar meaning"). It reads the brief against Tangent's taxonomy and synonyms and combines that with search; no AI calls. Use it when someone describes a screen or product they are about to design. `interpreted_as` shows how the brief was read. Example: {"brief": "onboarding for a fintech app, playful but clean", "platform": "mobile"}

read-only

Argument	Type	Description
brief*	string	What you are designing, in plain words, e.g. "onboarding for a fintech app, playful but clean".
limit	integer	How many picks (1 to 10, default 8).
platform	string	Prefer resources for this platform: "web", "mobile" or "desktop".

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "brief"
  ],
  "properties": {
    "brief": {
      "type": "string",
      "maxLength": 500,
      "minLength": 3,
      "description": "What you are designing, in plain words, e.g. \"onboarding for a fintech app, playful but clean\"."
    },
    "limit": {
      "type": "integer",
      "default": 8,
      "maximum": 10,
      "minimum": 1,
      "description": "How many picks (1 to 10, default 8)."
    },
    "platform": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Prefer resources for this platform: \"web\", \"mobile\" or \"desktop\"."
    }
  }
}

get_pattern

One UI pattern: its definition, its best examples, related patterns and the technologies the examples use. Use it before designing that pattern. Example: {"slug": "empty-state", "limit": 8}

read-only

Argument	Type	Description
slug*	string	Pattern slug, e.g. "command-menu" or "empty-state".
limit	integer	How many examples to return (1 to 60, default 12).

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "slug"
  ],
  "properties": {
    "slug": {
      "type": "string",
      "pattern": "^[a-z0-9]+(?:[-_][a-z0-9]+)*$",
      "maxLength": 80,
      "description": "Pattern slug, e.g. \"command-menu\" or \"empty-state\"."
    },
    "limit": {
      "type": "integer",
      "default": 12,
      "maximum": 60,
      "minimum": 1,
      "description": "How many examples to return (1 to 60, default 12)."
    }
  }
}

get_person

One person's profile: role, bio, website, social links, studios, what their site is built with (confirmed technologies) and their work on Tangent. Set include_image to also get a small preview of their site. Example: {"slug": "emil-kowalski"}

read-only

Argument	Type	Description
slug*	string	Person slug, e.g. "rauno-freiberg".
include_image	boolean	Also attach a small WebP thumbnail (under ~100 KB) as an image block. Off by default to save tokens.

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "slug"
  ],
  "properties": {
    "slug": {
      "type": "string",
      "pattern": "^[a-z0-9]+(?:[-_][a-z0-9]+)*$",
      "maxLength": 80,
      "description": "Person slug, e.g. \"rauno-freiberg\"."
    },
    "include_image": {
      "type": "boolean",
      "default": false,
      "description": "Also attach a small WebP thumbnail (under ~100 KB) as an image block. Off by default to save tokens."
    }
  }
}

get_resource

Everything Tangent knows about one resource: descriptions, taxonomy, editorial notes, the people behind it, and its related resources (tangents) with reasons. Use it to go deeper on a search pick. Set include_image to also get a small screenshot. Example: {"slug": "linear"}

read-only

Argument	Type	Description
slug*	string	Resource slug, e.g. "linear".
include_image	boolean	Also attach a small WebP thumbnail (under ~100 KB) as an image block. Off by default to save tokens.

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "slug"
  ],
  "properties": {
    "slug": {
      "type": "string",
      "pattern": "^[a-z0-9]+(?:[-_][a-z0-9]+)*$",
      "maxLength": 80,
      "description": "Resource slug, e.g. \"linear\"."
    },
    "include_image": {
      "type": "boolean",
      "default": false,
      "description": "Also attach a small WebP thumbnail (under ~100 KB) as an image block. Off by default to save tokens."
    }
  }
}

list_patterns

Every UI and interaction pattern resources are filed under (Command Menu, Onboarding, Empty State and more), with example counts. Use it to pick a slug for get_pattern. Example: {}

read-only

No arguments.

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "properties": {}
}

list_people

Designers and design engineers in the catalogue, featured first, then by name, with optional technology and role filters and cursor paging. Use search_people to find someone by name or focus. Example: {"role": "design engineer", "technology": "nextjs", "limit": 20}

read-only

Argument	Type	Description
role	string	Words in their role, e.g. "design engineer" or "product designer".
limit	integer	Results per page (1 to 50, default 20).
cursor	string	next_cursor from the previous call, with the same query and filters. Omit for the first page.
technology	string	Only people whose site is built with this technology, e.g. "nextjs", "astro", "framer".

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "properties": {
    "role": {
      "type": "string",
      "maxLength": 60,
      "minLength": 2,
      "description": "Words in their role, e.g. \"design engineer\" or \"product designer\"."
    },
    "limit": {
      "type": "integer",
      "default": 20,
      "maximum": 50,
      "minimum": 1,
      "description": "Results per page (1 to 50, default 20)."
    },
    "cursor": {
      "type": "string",
      "maxLength": 2000,
      "description": "next_cursor from the previous call, with the same query and filters. Omit for the first page."
    },
    "technology": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Only people whose site is built with this technology, e.g. \"nextjs\", \"astro\", \"framer\"."
    }
  }
}

related_resources

Resources related to one resource, each with the reason (e.g. "shares Command Menu", "same maker"). Use it to follow tangents from a site you like. Example: {"slug": "stripe"}

read-only

Argument	Type	Description
slug*	string	Resource slug, e.g. "stripe".

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "slug"
  ],
  "properties": {
    "slug": {
      "type": "string",
      "pattern": "^[a-z0-9]+(?:[-_][a-z0-9]+)*$",
      "maxLength": 80,
      "description": "Resource slug, e.g. \"stripe\"."
    }
  }
}

search_people

Find designers and design engineers by name, role, focus or stack, ranked, with optional technology and role filters. Example: {"query": "motion", "role": "design engineer"}

read-only

Argument	Type	Description
role	string	Words in their role, e.g. "design engineer" or "product designer".
limit	integer	Results per page (1 to 50, default 10).
query*	string	Name, role, focus or stack, e.g. "motion" or "Rauno".
cursor	string	next_cursor from the previous call, with the same query and filters. Omit for the first page.
technology	string	Only people whose site is built with this technology, e.g. "nextjs", "astro", "framer".

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "query"
  ],
  "properties": {
    "role": {
      "type": "string",
      "maxLength": 60,
      "minLength": 2,
      "description": "Words in their role, e.g. \"design engineer\" or \"product designer\"."
    },
    "limit": {
      "type": "integer",
      "default": 10,
      "maximum": 50,
      "minimum": 1,
      "description": "Results per page (1 to 50, default 10)."
    },
    "query": {
      "type": "string",
      "maxLength": 120,
      "minLength": 1,
      "description": "Name, role, focus or stack, e.g. \"motion\" or \"Rauno\"."
    },
    "cursor": {
      "type": "string",
      "maxLength": 2000,
      "description": "next_cursor from the previous call, with the same query and filters. Omit for the first page."
    },
    "technology": {
      "type": "string",
      "maxLength": 60,
      "minLength": 1,
      "description": "Only people whose site is built with this technology, e.g. \"nextjs\", \"astro\", \"framer\"."
    }
  }
}

search_resources

Ranked search over Tangent's catalogue of design and design-engineering resources (sites, products, component libraries, tools, articles). Use it when you know roughly what you want; narrow with vertical, category, technology, type, pricing or open_source, and page with cursor. For a whole brief, use find_inspiration. Example: {"query": "command menu", "technology": "react", "limit": 5}

read-only

Argument	Type	Description
type	string	Resource type, e.g. "website", "product", "library", "tool", "gallery", "article".
limit	integer	Results per page (1 to 50, default 10).
query*	string	What to look for, e.g. "command menu" or "dark dashboard".
cursor	string	next_cursor from the previous call, with the same query and filters. Omit for the first page.
pricing	string	Pricing model.
category	string	Category slug or name, e.g. "finance", "component-libraries", "typography".
vertical	string	Section: "inspiration", "components", "motion", "build", "visuals", "tools" or "learn".