Originkit Plugin

Browse and import animated UI components from Originkit, a free library of over 250 animated components for modern websites.

What it does

• Browse the full Originkit library (+250 components) by name, category, or search term. No API key required.
• Fetch any component's source code in your preferred stack (React, Next.js, Vite, Framer) and styling (CSS, Tailwind, CSS Modules). Requires a free API key.
• Setup guide that walks users through getting an Originkit API key and stores it securely.

Components

50 animated components across 6 categories:

Category	Examples
Interactive Elements	Black Hole, Fluid Trail, SVG Particles, Kinetic Grid
Image Gallery	Spiral Images, Coverflow Carousel, Swipe Stack, Infinity Canvas
Text	Smoky Text, Text Morph, Scramble Text, Weight Hover
Animation	Pixel Reveal, Star Burst, Particle Tunnel, Glitter Wrap
Background Animation	Snow Fall, Blinking Squares, Character Waves
Button	Emoji Burst, Link Preview

Setup

1. Install the plugin: assistant plugins install originkit
2. Browse components: ask your assistant to "browse Originkit components" or "search Originkit for particle effects"
3. When you fetch a component for the first time, you will be prompted for your Originkit API key
4. Get a free key at originkit.dev under Settings > API Integration

For persistence across sessions, add the key to the plugin's config.json:

{ "apiKey": "cmp_live_..." }

API key

• Free, from originkit.dev > Settings > API Integration
• For persistence across sessions, add it to the plugin's config.json: { "apiKey": "cmp_live_..." }
• For the current session only, use originkit_setup with action "set" or just fetch a component and you'll be prompted
• The plugin never writes secrets to disk
• Daily limit: 10 component fetches per key, resets at midnight UTC
• Use originkit_setup with action "reset" to clear the session key

How to use

Browse components

Browse without a key. Ask your assistant:

"Browse Originkit components" "Search Originkit for particle effects" "Show me Originkit's text animation components"

You can also filter by category: interactive-elements, image-gallery, text, animation, background-animation, button.

Fetch a component

Once you find one you like, ask your assistant to fetch it:

"Get the smokytext component from Originkit" "Fetch the blackhole component for Vite with Tailwind"

Specify your stack (react, nextjs, vite, framer), styling (css, tailwind, cssmodules), and TypeScript preference. Defaults are React + CSS + TypeScript.

If you have not set up an API key yet, you will be prompted to enter one. The key is saved automatically for future fetches.

Set up your API key

Get a free key from originkit.dev:

1. Create an account or log in
2. Go to Settings > API Integration
3. Copy your API key (it looks like cmp_live_...)

Then ask your assistant:

"Set up my Originkit API key"

Manage your key

"Check my Originkit API key status" "Reset my Originkit API key"

Daily limit

Each API key allows 10 component fetches per day, shared with website copies. The limit resets at midnight UTC. Browsing the catalog is unlimited and does not count against the fetch limit.

Tools

Tool	Purpose	API key
originkit_browse	List and search the component library	Not required
originkit_get	Fetch a component's source code	Required
originkit_setup	Check, set, or reset the API key	N/A

How it works

The plugin talks to Originkit's MCP server (https://mcp.originkit.dev/vellumai) using JSON-RPC 2.0 with bearer token auth. The component catalog (metadata only, no source code) is bundled with the plugin so browsing is instant and key-free. Source code is fetched on demand from the MCP server.

Credit

Components are created by Originkit. Visit their site for live demos and the full component gallery.