Use the library from an AI agent

Everything on this site is exposed through the penui MCP server (stdio, Node 20+). Components are split into atomic (minimal) and composite (made of atomics: children + offsetInParent).

Install

npm install, then claude mcp add penui -- node /path/to/penui/mcp/server.mjs (or the JSON config for Cursor / Claude Desktop on the home page). Run npm test to verify.

Tools

• get_studio_workflow — the exact step-by-step guide for building in Roblox Studio
• search_components, get_component (image + metadata), get_hierarchy
• compose_screen — many components + positions + texts → ONE Luau script that builds a scaled ScreenGui
• get_luau — Luau for a single component (mode: auto / asset / native)
• list_packs, list_categories, get_design_tokens, list_textures, get_texture
• asset_status, upload_assets, set_asset_id — Roblox image ids

Resources: penui://pack/…, penui://component/…, penui://docs/usage, penui://docs/studio-workflow. Prompt: build-roblox-ui.

Place it in Roblox Studio

With the Roblox Studio MCP connected, the AI runs the Luau returned by compose_screen through execute_luau. It creates StarterGui/<name> and replaces any previous version.

Native vs. uploaded art

Without uploads, buttons / panels / headers / tiles / bars / inputs are built natively (Frame + UICorner + UIGradient + UIStroke). For pixel-exact art (and icons/decorations) upload the images: set ROBLOX_API_KEY (asset read+write) and ROBLOX_USER_ID or ROBLOX_GROUP_ID in the server environment and call upload_assets per pack, or run node tools/upload-roblox.mjs --pack <id>. Ids are stored in library/roblox-ids.json.