m3 inspo

Your taste. In your agent's context.

A private taste library for the things you want to build. Save design references, write down what works, and give your coding agents access through MCP.

Self-hosted · One owner · Approved references only · MIT

Get started · Connect your agent · Self-hosting · Contributing

Your references, organized by the way you think about design. App screenshots use fictional projects and original demo artwork. The current interface is German.

Give your agent a sense of your taste

You save a hotel homepage for its typography. A product screen for its spacing. A booking flow for the way it makes the next step obvious. The useful part is knowing why you saved each one.

m3 inspo keeps that judgment beside the image. "Take the generous spacing and warm palette. Avoid the rotating hero and urgency banners." When an agent retrieves the reference, it gets your notes with it.

Your library grows across projects. You can reuse a reference, organize it into collections, or tag it for a specific project without explaining the same preferences in every new conversation.

Related MCP server: Niblet

Collect → curate → approve → build

1. Collect a public URL or upload a screenshot. Keep desktop and mobile references together in your library.

2. Curate what to take and what to avoid. Add tags, favorites and collections. Mark a region when one part of a screen matters.

3. Approve the references and brand kits you want agents to use. Drafts and archived items stay out of MCP results.

4. Build with an MCP-connected agent that can retrieve the images, notes and brand decisions relevant to the task.

The screenshot shows the design. Your notes tell the agent which decisions matter.

Connect your agent

MCP, the Model Context Protocol, lets a coding agent query your library while it works. Your client connects to your own instance with a revocable token.

Create a token under Einstellungen, then add it to Claude Code:

claude mcp add --transport http m3-inspo http://localhost:3000/api/mcp --header "Authorization: Bearer <your-token>"

Other HTTP MCP clients can use the same endpoint and bearer header. See client setup for details.

Then give your agent a task like this:

Build the booking page for Harbor. Use m3 inspo to find references for a calm, editorial hero. Read my take and avoid notes, use the approved Harbor brand kit, and explain which decisions you carry into the implementation.

The agent can use these tools to gather context before writing code:

Image display depends on the MCP client's support for image responses. The agent writes the implementation in your project using the context it retrieves.

Keep a brand's decisions together

Save color schemes, typography pairings and a Markdown design briefing in a brand kit. Approve a kit for a project so your agent can retrieve the saved choices while using other references for layout and composition.

The color generator includes color scales, light and dark roles, contrast checks and CSS exports for CSS variables or Tailwind v4. Design briefings can also be exported as DESIGN.md.

Your own library, on your own instance

Each installation has one owner, authenticated through GitHub. The library is private, and agents need a token to read approved content. You decide where to host the app, database and images.

Upload, capture, curation and text search work without AI keys. Optional AI analysis and semantic search add generated descriptions, tags and ranking. When enabled, these services send content to their configured providers. Read about external services and data.

Local setup

You need Node.js 24+, pnpm 11.5.3, Docker with Compose and your own GitHub OAuth app.

git clone https://github.com/dmontinaro/m3-inspo.git
cd m3-inspo
pnpm install --frozen-lockfile
cp .env.example .env

Follow the setup guide to configure owner access, start Postgres, apply migrations and run the app and capture worker. For a hosted installation, use the self-hosting guide.

Optional services and data

AI analysis sends screenshots and reference text to Anthropic. Embeddings send text to your configured endpoint, OpenRouter by default. Font metadata sync and previews also contact external services.

Development

pnpm typecheck
pnpm lint
pnpm test

The tests need Postgres with pgvector and Playwright Chromium. They use synthetic data and fake provider responses. Each test run creates and drops its own database; use a development Postgres account allowed to create databases. The default server is postgres://postgres:postgres@localhost:54330; override it through TEST_DATABASE_SERVER_URL.

Read the architecture, domain vocabulary, contribution guide, self-hosting guide and backup guide for more detail.

License

Original additions are licensed under MIT. Adapted code and dependencies retain their licenses, documented in THIRD_PARTY_NOTICES.md and LICENSE-INSPO. The software license does not grant rights to collected website screenshots, third-party fonts or other uploaded content.