Model Context Protocol
Originkit MCP
Two tools — list_components and get_component — let any MCP agent browse the registry and deliver production-ready code from a hosted endpoint.
Hosted HTTP endpoint — connect once, no local install step
Install in your agent
Find your editor below, copy the config, and restart the client.
Terminal
Run once in your terminal, then restart Claude Code
claude mcp add originkit --transport http --url https://mcp.originkit.dev/mcp --header "Authorization: Bearer <your-api-key>"Terminal
Run once in your terminal, then restart Codex
export ORIGINKIT_API_KEY=<your-api-key>
codex mcp add originkit --url https://mcp.originkit.dev/mcp --bearer-token-env-var ORIGINKIT_API_KEY.cursor/mcp.json
Settings → MCP — same JSON works in Claude Desktop and other editors
{
"mcpServers": {
"originkit": {
"url": "https://mcp.originkit.dev/mcp",
"headers": {
"Authorization": "Bearer <your-api-key>"
}
}
}
}~/.codeium/windsurf/mcp_config.json
Settings → MCP, or drop it in mcp_config.json — then restart Windsurf
{
"mcpServers": {
"originkit": {
"url": "https://mcp.originkit.dev/mcp",
"headers": {
"Authorization": "Bearer <your-api-key>"
}
}
}
}mcp.json
Add it to your MCP settings JSON, then restart Antigravity
{
"mcpServers": {
"originkit": {
"url": "https://mcp.originkit.dev/mcp",
"headers": {
"Authorization": "Bearer <your-api-key>"
}
}
}
}Then open any component, tweak props, and click Copy — paste the prompt into your editor and the model calls MCP to deliver the file.
Tools exposed
Stack behavior
- framer — hosted module URLs from the Framer tab, or source via Copy to Framer
- react / vite — Framer bindings stripped
- nextjs — same as react, plus “use client”
Framer
Copy any component and paste it onto your Framer canvas as a code component — customize it from the property panel, no setup.
Open a component
Open any component for a live preview.
Copy to Framer
Click Copy to Framer to copy the source.
Paste & customize
Paste via Insert → Code → New Component, then tweak the property panel.
Framer-safe by spec
Every component is authored for Framer first, so it just works when you paste it in.
- Default export — Framer picks up
export default function - Property controls — colors, copy, and layout from the property panel
- framer-motion — all animation; no CSS keyframes
- Layout annotations —
@framerSupportedLayoutWidth/Heighton every component
Copy Code
Copy a component's complete source and paste it into your project — customize it like any other file.
Open a component
Open any component for a live preview.
Tweak, then Copy Code
Tweak props, then pick Copy Code.
Paste into your project
Drop the .tsx in, install deps, and render it.
Use it in your stack
Components are authored for Framer first; here's what to expect when you paste the source elsewhere.
- framer — Paste into Insert → Code → New Component. Property controls and layout annotations are already in the source.
- react / vite — Works as a normal component. Framer-only imports resolve to a no-op shim, or fetch stripped source over MCP.
- nextjs — Same as react, with "use client" at the top for interactive components.
Want source adapted to your stack automatically? Connect the MCP server.
