# penui

> Library of Roblox UI components (shops, inventories, HUDs, bars, buttons) rendered 1:1 from Figma designs. Each piece is machine-readable: size, 9-slice insets, text layers, fonts, palette, and exact offsets inside its parent. Exposed to AI agents through an MCP server; the agent builds the ScreenGui in Roblox Studio via the Roblox Studio MCP.

## Full documentation

- Expanded, self-contained version of this file (what it is, packs, tools, setup, pricing, FAQ): https://penui.dev/llms-full.txt

## Start here (for agents)

- MCP resource index: `penui://index` (packs with counts, routing by intent, doc resources). Read it first.
- MCP prompt: `build-roblox-ui`.
- Ping the server with the `ping` tool to check version and library counts.

## MCP setup

Stdio server, launched from the repository:

```json
{
  "mcpServers": {
    "penui": { "command": "node", "args": ["--no-warnings", "mcp/server.mjs"] }
  }
}
```

## Tools by intent

- Overview: `ping`, `list_packs`, `usage`
- Build a screen: `get_studio_workflow` (once), `search_units`, `get_unit`, `compose_units` or `compose_screen`, then Studio MCP `execute_luau`
- One piece: `search_units` (pre-split layers, preferred) or `search_components`, then `get_unit` or `get_component`
- Placement inside the original parent: `get_reconnection`, `get_hierarchy`
- Roblox image ids: `asset_status`, `upload_unit_assets` / `upload_assets`, Studio `upload_image`, `register_uploaded_assets`; or `set_asset_id` / `set_file_asset_id`
- Style: `list_packs` (pick ONE pack per screen), `get_design_tokens`
- Single Luau script: `get_luau` (metered)

Metered usage: `get_luau` costs 1; `compose_screen` / `compose_units` cost 1 per 10 distinct items. Search and browse are free.

## Site pages

Base URL: https://penui.dev

- Landing: /
- Library (browse packs and components): /library
- Component detail (image, Luau, reconnection): /site/asset.html?id=<component-or-unit-id>
- Library search: /library?q=<query> (filter by pack: /library?pack=<pack-id>)
- Docs: /docs
- Pricing: /pricing
- Dashboard (plan, quota, API keys; signed-in, not indexed): /dashboard

## Key facts

- Packs: 12 design packs; one pack per screen keeps the style consistent.
- Images: without uploads, simple pieces (buttons, panels, headers, tiles, bars, inputs) are built natively with Frame + UICorner + UIGradient + UIStroke. Upload images for pixel-exact art.
- Units are pre-split layered pieces (full, notext, every layer as PNG) and are preferred over rebuilding in Luau.
- Unknown ids return suggestions in the error; re-search instead of guessing ids.