Flood Design System

io.github.tillwitheredPublished by GitHub account tillwitheredv0.1.0Updated Nov 14, 2026

Find Flood UI components, recipes, tokens, and design skills for coding agents.

VerifiedStreamable HTTPWeb executableKnowledge & Memory Developer Tools

Server details

Identifier: io.github.tillwithered/flood
Transport: Streamable HTTP
Runtime: Web executable
Trust: Verified
Published: Nov 14, 2026

Security note

MCP servers receive tool arguments from a conversation and may perform external actions. Review what a server can do before you enable it, and give it only the access it needs.

The registry verified the GitHub account tillwithered for this listing. That does not show the account is the product's maker.

SourceWeft's checks cover whether the listing is complete and the endpoint answered; they do not review the server's code or what its tools do.

Add a badge to your README

Show readers this MCP server is listed on SourceWeft. The badge links to this page.

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.tillwithered%2Fflood.svg)](https://sourceweft.com/mcp/io.github.tillwithered%2Fflood?utm_source=readme&utm_medium=badge)

Overview

AI-generated overview

Remote MCP server that lets an assistant search the public Flood design system and read component, recipe, token and guidance entries by ID.

What you can do: Report the catalog's version, scope and coverage
Search public components, ready-to-use compositions, tokens and agent guidance by name or by describing a UI task in English or Russian
Read a single material by ID, in chunks of up to 10,000 characters, with prerequisites listed separately from related materials
When to use it: Useful when building or reviewing a React or Next.js interface with Flood and you want the assistant to look up the right component, composition or token from the public catalog instead of guessing.
Requirements: Remote streamable HTTP endpoint at flood.md; no authentication, environment variables or headers declared. Installing Flood itself into a project is separate and needs Node.js 22.12+ and npm.

Before you install

Covers only the public catalog; for existing projects the installed Flood version and host instructions are the authority for APIs and local customizations. The main branch may include unreleased changes, so prefer release tags when matching an installed version.

Installation

In SourceWeft

Open Flood Design System in the dashboard and add it to a workspace.
Enable the server for the chats that should use its tools.

Web executable via Streamable HTTP. Remote servers run from the web runtime once configured in a workspace.

Use with an agent

Paste this prompt into Claude Code, Codex, Cursor or another agent — or into SourceWeft chat. The agent reads this server's install guide, shows you its publisher, endpoint and sign-in, and adds it to your client once you agree. Keys never go into a command.

Read https://sourceweft.com/mcp/io.github.tillwithered%2Fflood/install.md and connect the MCP server it describes to my client. Before changing any config, show me its publisher, endpoint and sign-in method and wait for my OK. Never put an API key in a command or in a file I would commit; ask me where it should come from.

Read the install guide the agent follows

Other MCP clients

Add this to your client's mcpServers config.

{
  "mcpServers": {
    "flood-design-system": {
      "type": "http",
      "url": "https://flood.md/mcp"
    }
  }
}

README

flood.md

An open-source design system for developers and coding agents. Flood ships original UI components, dark foundations, semantic tokens and versioned design guidance. The current implementation supports React 18.3 and 19 and Next.js App Router, with TypeScript declarations.

Component catalog · Charts · Documentation · Connect your agent · Releases

Quick start

In an existing React or Next.js project with Node.js 22.12+ and npm, install the latest published release.

The CLI installs matching versions of the component, token and agent packages. It adds project configuration and the Flood skill without overwriting existing files. Use init --dry-run to see the planned changes first. The main branch can include changes for the next release. Use the release tags to read the source and docs for an installed version.

Import the stylesheet once at the app entry or in the Next.js root layout. Wrap your interface in FloodRoot to apply the dark foundations.

tsx

import "@flood-md/react/styles.css";import { Button, FloodRoot, Heading, Stack } from "@flood-md/react";
export function Workspace() {  return (    <FloodRoot>      <Stack gap="4">        <Heading level={1}>Workspace</Heading>        <Button>New project</Button>      </Stack>    </FloodRoot>  );}

import "@flood-md/react/styles.css";import { Button, FloodRoot, Heading, Stack } from "@flood-md/react";
export function Workspace() {  return (    <FloodRoot>      <Stack gap="4">        <Heading level={1}>Workspace</Heading>        <Button>New project</Button>      </Stack>    </FloodRoot>  );}

See installation and upgrades for manual setup and version alignment. Customize the foundations with semantic CSS variables.

Build with a coding agent

Share the agent entry point when starting a project with an agent. In a connected project, the installed flood/DESIGN.md and .agents/skills/flood-ui/SKILL.md guide component selection, composition and verification. The agent knowledge guide explains how to look up a component or workflow with the CLI version recorded in flood.json. Open Connect your agent for client setup and prompts that lead to working Flood examples. See agent setup for the versioned project workflow.

Develop

Node.js 22.12+ (Node 24 recommended), npm 11.

verify builds the packages and site, checks types, runs tests and validates the packed packages in a clean consumer. The browser suite covers the website and the Next.js example.

Workspace

Directory	Purpose
`packages/tokens`	Authored JSON tokens → generated CSS
`packages/react`	React components, declarations and CSS
`packages/cli`	Installer, diagnostics and catalog search
`packages/agent`	Versioned design guidance and skills
`apps/website`	Website, component previews and agent endpoints
`examples/next`	Next.js integration example

Read CONTRIBUTING.md, architecture, releases, and deployment. To report a component issue, open a GitHub issue. Report vulnerabilities using the security policy.

License

Flood code is MIT licensed. The bundled Inter font retains its original SIL Open Font License.

Source: README.md at commit 4a42c8a

Tools

flood_info

Flood catalog version

Report the version, scope and coverage of the public Flood catalog.

Takes no parameters.

search_flood

Search Flood

Find public Flood components, ready-to-use compositions, tokens and agent guidance by name or by describing the UI task in English or Russian. Pass a result ID to read_flood for the full contract.

Parameterskindgrouplimitcursorsearch

read_flood

Read Flood material

Read one public material by ID. Omit length for up to 10,000 characters. Continue with nextOffset when present. Required prerequisites are listed separately from related materials.

ParametersidrequiredlengthoffsetlinksOffset

Version history

v0.1.0LatestNov 14, 2026

Score

100% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

Reached in the last 30 daysRequired25 pts
Auth declaredRequired10 pts
Tools listedRequired15 pts
DescriptionRequired15 pts
Logo10 pts
Documentation15 pts
License10 pts