This is a submission for the Notion MCP Challenge

What I Built

There is a folder on almost every creative’s computer.

Sometimes it is a bookmark list. Sometimes it is a Pinterest board, a Notion page, a camera roll full of screenshots, or a browser tab that has been open for six weeks. The contents are always the same: things they loved when they found them and have not touched since. Landing pages to be studied. Threads that made them stop scrolling. Interfaces they meant to reverse-engineer. Designs they were going to recreate on the weekend.

The weekend never comes.

I built createthings because I got tired of my own inspiration graveyards.

Also, the more I talked to designers, developers, and content creators, who are my friends and colleagues, the more I realized the graveyard was not the core problem. The core problem was that saving something and acting on it had no connection. There was no bridge between the moment of being inspired and the moment of doing something about it. No thread between the thing that excited you and the work that came out of it. No record of the journey from one to the other.

What I built

createthings is a creative system for designers, developers, and content creators. It lives across two surfaces: a browser extension that captures inspiration from anywhere on the web, and a web app where that inspiration gets analyzed, understood, acted on, and shared with the world.

The core loop is straightforward to describe:

Capture what excites you — a screenshot, a URL, an uploaded image, or even a typed note when the inspiration is more feeling than visual. Analyze it with AI — not just what it looks like but what makes it work, what you can learn from it, what skills it requires. Think through your process in a creative journal tied to every project. Create your own version with an AI-generated brief as your starting point. Publish it to your connected social platforms directly from the app with platform-specific captions and proper credit to the original creator. Share your full creative journey via an auto-generated public portfolio page.

Notion is the backbone of all of it.

I made a deliberate decision early in the build. I did not want Notion to be a sync target or a convenient place to dump data. I wanted it to be the actual brain of the system, the place where everything lives, where the AI pipeline is triggered, where results are written, where the publish queue is managed, and where the portfolio reads from. Every piece of inspiration lives in Notion.

Video Demo

Show us the code

# create a new project
npx sv create my-app

# recreate this project
npx [email protected] create --template minimal --types ts --add prettier eslint vitest="usages:unit,component" playwright tailwindcss="plugins:none" sveltekit-adapter="adapter:auto" mcp="ide:vscode+setup:remote" --install npm ./

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

npm run build

Who It Is For

createthings is built for three types of creators, and the experience adapts to each:

Designers can get a color palette extraction, typography identification, layout and composition breakdown, component analysis, and a Figma export that sends any captured screenshot directly to their Figma workspace as a named frame.

Developers get UI architecture hints, pattern recognition, likely tech stack indicators, and component structure breakdown, the things you want to know when you see an interface you admire and want to understand how it was built.

Content creators get hook analysis, tone breakdown, narrative structure identification, and an explanation of why a piece likely performed well — the things that turn a saved post into a teachable moment.

These three types of creators serve as the starting point, as i still intend to expand to different types of creatives, allowing it to be useful to everyone and anyone

The Feature Set

The Feature Set

The Technical Architecture

Stack: SvelteKit + Svelte 5 (web app + API), Manifest V3 browser extension (Chrome/Firefox/Edge/Safari), Notion as the database layer (six linked databases), Uploadcare for image uploads.

AI: Gemini 2.0 Flash for visual analysis with a fallback chain (→ gemini-2.0-flash-lite → gemini-1.5-flash-8b → OpenRouter free vision → Groq text-only). Groq (llama-3.3-70b-versatile) handles all text generation, roadmaps, captions, and note analysis.

Data flow:

Extension saves a new entry to Notion (status: Pending) — that’s all it does.
A Notion database automation fires a webhook to /api/webhook/notion.
The server routes by capture type: images/URLs go to Gemini (with node-vibrant extracting colors first); notes go straight to Groq.
Results are written back to Notion via the MCP adapter; status updates to Ready.

For publishing: captions surface in the Publish Queue. Twitter/LinkedIn/Reddit open compose URLs pre-filled; Instagram copies to clipboard. Clicking Mark Published updates the Notion entry.

The Six Databases

On first connect, all 6 Notion databases are created in one pass to get their IDs, then a second pass links the relations between them — because you can’t create a relation to a database that doesn’t exist yet.

Technology Choices

AI: Gemini 2.0 Flash for vision (generous free tier, reliable structured output) with a 4-model fallback chain so the pipeline survives rate limits. Groq for all text generation because speed matters llama-3.3-70b-versatile keeps roadmap generation under 15 seconds.

Social publishing: Compose URLs instead of OAuth integrations — Twitter, LinkedIn, and Reddit accept pre-filled content as URL params, no API approval needed. Instagram has no compose URL so it falls back to clipboard copy. Ship with what works now, add direct API integrations when you have approvals.

How I Used Notion MCP

I made a rule early in the build: Notion should be the brain of the system, not a sync target. Every intelligent write-back goes through an MCP adapter layer — a set of functions in src/lib/server/notion/mcp.ts that wrap the Notion SDK calls for all agent actions.

The distinction between the REST API layer and the MCP layer is intentional. The REST API handles database operations: creating structure, querying records, and managing schemas. The MCP layer handles agent actions: an AI system reading context from a workspace and writing back purposefully — the same pattern a person working inside Notion would follow.

The Specific Operations

writeAnalysisResults — called after every analysis completes. Creates a page in the Analysis Results database with the full breakdown — color palette, typography notes, layout analysis, mood tags, component identification, attribution — and links it back to the source inspiration entry.

createRoadmap — called when a user requests a roadmap. Creates a structured Notion page in the Roadmaps database — not just a database row, but a full page with sections, skill descriptions, milestone checkboxes, and resource links. The page is created with the correct parent relation to the source inspiration, so the connection is permanent and navigable.

writePublishDrafts — called by the caption generation pipeline. Writes platform-specific captions to the Publish Queue entry — Twitter, LinkedIn, Instagram, Reddit — all with the credit line assembled from the stored attribution data.

updateInspirationStatus — moves entries through their lifecycle: Pending → Ready → Active → Stale → Archived.

Why a Dedicated MCP Layer

This is the question worth answering directly.

When the AI system writes results back to Notion, it is not inserting records — it is making decisions: what to name the page, how to structure the sections, which properties to set, what relations to create, how to format the skill descriptions so they are useful when the user opens the page later. That is an agent action. The MCP layer is the right abstraction for it. The REST API would require pre-specifying every structural decision in code. The MCP layer lets those decisions happen in context.

Having a clean adapter layer also makes the path to the hosted Notion MCP remote server straightforward. Every call goes through one place. The connection is established once per user session with their OAuth token and reused across all operations.

What I Learned

The hardest part was not the AI integration. It was the database setup order.

Notion relations between databases require both databases to exist before you can create the relation. That sounds obvious until you are writing the setup script at 1am and realize you cannot add the relation from Inspiration Vault to Analysis Results until Analysis Results exists — but you also cannot add it to a database you have not created yet. The solution was simple once I saw it: create all six databases first, collect their IDs, then make a second pass to patch the relations in. Two API calls where I wanted one. Not elegant but reliable.

The social API reality was the other hard lesson. I knew Instagram Graph API required Facebook app approval. I knew Twitter/X v2 could take time. What I underestimated was how much value there is in the compose URL approach first — x.com/intent/post, linkedin.com/shareArticle, reddit.com/submit. The user sees exactly what they are about to post. There is no abstraction between the caption and the publish. Add the server-side API integrations when you have time and approvals; start with the compose URLs and let the user be in control.

The thing that surprised me most was the note capture.

I almost cut it three separate times. It felt like scope creep. A text input in a browser extension — what problem does that solve that a notes app does not? I kept it because the use case would not leave me alone: what do you do when the inspiration is not a URL or an image? What do you do when you are in a meeting and you think “I want to make something that feels like the opposite of corporate” and you want to capture that before the meeting ends and you forget?

I also learned that the creative journal resonates more with experienced creators than with beginners. Beginners want to capture and analyze. Experienced creators want to document their process because they know the process is the portfolio, not just the output. That insight is shaping how I think about onboarding — meeting users where they are rather than assuming everyone is ready for the same features at the same time.

Retrieve film titles and their rental rates. Use column aliases to rename title as “Movie Title” and rental_rate as “Rate”.

SELECT title AS “Movie Title”,rental_rate AS “Rate”FROM film;

Here,title is renamed into Movie Title amd rental_rate is renamed into Rate from film table and to show the output.

List customer names and their email addresses. Alias first_name and last_name as “First Name” and “Last Name”.

SELECT first_name AS “First Name”,last_name AS “Last Name”,email FROM customer;

Here, first_name is ranamed into First Name and last_name as Last Name and fetch the email from the customer table.

Get a list of films sorted by rental rate in descending order. If two films have the same rental rate, sort them alphabetically by title.

SELECT title,rental_rate FROM film ORDER BY rental_rate DESC,title ASC;

Here, title and rental_rate to be fetch from film table and to order the rental_rate to descending order and title as ascending order.

Retrieve actor names sorted by last name, then first name.

SELECT first_name,last_nameFROM actor ORDER BY last_name ASC,first_name ASC;

Here, the first_name and last_name to be fetch from actor table and to order the last name and first name in asccending order.

List all unique replacement costs from the film table.

SELECT DISTINCT replacement_cost FROM film;

Here, the we need to fetch the unique replacement_cost from the film table so we used DISTINCT in the query.

List all films’ title and length in minutes. Alias length as “Duration (min)”.

SELECT title,length AS “Duration (min)”FROM film;

Here, from film table the title and the length data to be fetch and to rename the length as Duration(min) so we use length AS “Duration (min)”.

Retrieve customer first and last names along with their active status. Alias active as “Is Active”.

SELECT first_name,last_name,active AS “Is Active” FROM customer;

Here,the first_name, last_name and active from customer table and to rename the active to Is Active so we use active AS “Is Active”.

Retrieve the list of film categories sorted alphabetically.

SELECT name from category order by name ASC;

Here, to take the list of film name from caregory and to sort the film name in ascending order.

List films by length, sorted in descending order. Include only the title and length.

SELECT title lenght FROM film ORDER BY title DESC,length DESC;

Here, list all the title and length from film and to order the title and lenght by descending order.

Retrieve all actor names, sorted by their first name in descending order.

SELECT first_name FROM actor ORDER BY first_name DESC;

Here,from actor table the first_name to be fetch and to order it by descending order.

List all unique ratings available in the film table.

SELECT DISTINCT rating FROM film;

Here,for the unique rating we are using DISTINCT to get unique rating from film table.

Find all unique rental durations from the film table.

SELECT DISTINCT rental_duration FROM film;

Here,for the unique rental_duation we are using DISTINCT to get unique rental_duration from film table.

Retrieve the first unique customer ID based on active status. Include the customer_id and active columns, and order by customer_id.

SELECT DISTINCT ON (active)customer_id,active FROM customer ORDER BY active,customer_id;

Here,we are fetching the data from customer which must give unique customer_id which must be active that means this query gives the customer_id which are in active.

List the earliest rental date for each customer. Include customer_id and rental_date, and order by customer_id.

SELECT customer_id,MIN(rental_date) AS rental_date FROM rental GROUP BY customer_id ORDER BY customer_id;

Here, we need to fetch the earliest rental data so we are using MIN(rental_date) and also including the customer_id and rental_date which must be in the order of customer_id from rental table.

List the 10 shortest films by length. Include the title and length.

SELECT title,length FROM film LIMIT 10;

Here, we need to fetch the title, length from the film table and it should be shortest of 10 films so using LIMIt 10.

Retrieve all unique values of store_id from the inventory table.

SELECT DISTINCT store_id FROM inventory;

Here, we need to fetch unique store_id from inventory table so we are using DISTINCT store_id.

Find all unique replacement_cost values in the film table. Sort the results in ascending order.

SELECT DISTINCT replacement_cost FROM film ORDER BY replacement_cost ASC;

Here, we need to select unique replacement_cost from film table and that cost should be in ascending order, for unique replacement_cost we are usihg DISTINCT replacement_cost in the query.

Hey everyone, I’m nazunya!

A while ago, I was building a local service for collecting illustrations and reference images. At that time, I created a color extraction feature to obtain colors that represent those illustrations and photos. It turned out surprisingly well, so I decided to extract it into a library.

I have released v1.0.0 as an npm package called colorlip, and I’d like to share it with you!

Quick Overview!

• A lightweight library available for browsers and Node.js that extracts representative colors and palettes based on human perception.

• Tuned for illustrations and product photos, making it ideal for creator-focused services, social media, and e-commerce sites.

• In addition to Hex and RGB, it outputs HSL, Lab, oklch, and more, which is convenient for post-processing and browser-based usage.

Try it out right now:
https://na-zu-nya.github.io/colorlip/

GitHub:
https://github.com/na-zu-nya/colorlip

Motivation

While building a service to organize illustrations and other media, I was developing a mechanism to extract representative colors so that users could collect images with similar color schemes.

I tried using the average color and existing well-known libraries like Color Thief and node-vibrant, but I ran into the following issues:

• The background color had too much influence.
• It would pick up unexpected colors.
• The results did not match the perceived atmosphere of the colors.

Since existing solutions are designed to be general-purpose, they felt a bit lacking when applied to illustrations and artwork.

I decided to create a library that is tailored to anime and manga-style illustrations, one that can accurately output the colors that perceptually define an illustration, while also being reasonably fast.

How color extraction works

If you’re curious about the nitty-gritty, here’s a breakdown!

In short, it works by downsampling the image to get a feel for its features first. Then, it quantizes the pixels into RGB and groups them in Lab color space. After that, it scores the colors based on things like whether they’re toward the center, the edges, or spread out, to build a palette. Finally, it picks the representative and accent colors from that palette.

How color extraction works (click to expand)

• Resize the image to 150×150.
  • If using core, raw pixels can be used directly.
• Perform stride sampling to estimate the median and spread of overall saturation, and whether edges are concentrated in the center or distributed throughout the image.
  • We infer that images with distributed edges are likely photographs or motifs extending to the periphery, while those with edges concentrated in the center likely have the subject in the middle.
  • This information is used in subsequent steps to adjust the weighting of central versus peripheral colors.
• Filter by truncating alpha values below 0.5, and by applying lower bounds for saturation and a specific range of lightness.
  • This removes noise and white background colors.
• Quantize pixels and apply weights that incorporate centrality, edge intensity, saturation, and alpha.
• Merge similar colors in Lab space to create clusters.
  • We use Lab space, which is closer to human perception, because grouping in RGB space tends to merge colors that are perceptually distant.
  • Also, since converting all pixels to Lab space is computationally expensive, we perform quantization in RGB first.
• Score these clusters based on the weights.
  • Using only occurrence frequency tends to favor colors spread across the entire image, so we utilize the weights calculated in the previous steps.
  • We determine the score by building on those previous weights and applying factors for centrality ratio, peripheral ratio, center of gravity, variance, and accent suitability.
• Merge similar colors by checking color differences.
  • This prevents the palette from consisting only of similar shades of a specific color.
• Finally, pick dominant and accent colors to create a palette.
  • For dominant colors, we reference the scores and re-evaluate the top candidates based on their original scores, weights, and whether they stand out in the OKLCH color space.
  • For accent colors, we select candidates that are sufficiently distant from the dominant colors and likely to be visually appealing.

How’s this different from other libraries?

Most existing libraries rely on standard quantization algorithms to pick representative colors based on their frequency. A lot of them use MMCQ, which reduces color counts to find a palette. At its core, MMCQ is a straightforward compression and summarization tool—it gathers colors, chunks them into boxes in RGB space, and picks the winners.

colorlip takes a more practical, hands-on approach:

• It analyzes the image’s composition and edge distribution.
• It figures out which parts of the image are focal points versus the background.
• It clears out colors that look like noise.
• It groups together colors that actually look similar to the human eye.
• It rates colors based on which ones dominate the scene and which ones act as accents.

Instead of just summarizing data, it’s more like it’s “curating” the colors. It’s a bit more heuristic and goes a step beyond typical image processing. While that makes it a little less “one-size-fits-all” than generic libraries, I think it’s reached a point where it’s genuinely useful for real-world tasks.

It should work great for things like:

• Character art and illustrations
• Product thumbnails
• Extracting UI themes
• Images where the subject is clearly distinct from the background

If you’re working with these kinds of images, colorlip should be a solid choice.

Comparison

I’ve compared the speed and color extraction results of this library in comparison to other well-known ones.
Please note that each library has different uses and purposes, so take this as a rough comparison rather than a definitive benchmark.
I hope this will serve as a reference for your library selection.

First, here are the comparison results for photos.

While there isn’t a massive difference, by picking up dominant and accent colors, I believe it captures the general impression quite well.

Next are the illustrations. I’m using my own artwork here since I couldn’t find freely available sample illustrations. I have tested it with various illustrations for verification, and the results have been generally positive.

There are also benefits in terms of speed; if semantic colors are not required, colorlip shows almost no difference in execution time compared to other lightweight libraries, and I believe it provides better results.
It can be used for batch processing on the server side as well as for quickly picking colors in the browser, which means smoother UX in the browser.

Summary

Please give it a try! I hope you like the library. 🌷

I’m also working on a web app called paletty.cc — it’s a palette manager built on colorlip, currently in beta.

https://paletty.cc

Thanks for reading!