{"id":34627584,"url":"https://github.com/forattini-dev/tuiuiu.js","last_synced_at":"2026-03-12T01:43:52.938Z","repository":{"id":330293461,"uuid":"1119636218","full_name":"forattini-dev/tuiuiu.js","owner":"forattini-dev","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-11T11:13:17.000Z","size":146337,"stargazers_count":6,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-11T12:54:22.068Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://forattini-dev.github.io/tuiuiu.js/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/forattini-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2025-12-19T15:39:39.000Z","updated_at":"2026-03-11T11:13:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/forattini-dev/tuiuiu.js","commit_stats":null,"previous_names":["forattini-dev/tuiuiu.js"],"tags_count":56,"template":false,"template_full_name":null,"purl":"pkg:github/forattini-dev/tuiuiu.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forattini-dev%2Ftuiuiu.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forattini-dev%2Ftuiuiu.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forattini-dev%2Ftuiuiu.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forattini-dev%2Ftuiuiu.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forattini-dev","download_url":"https://codeload.github.com/forattini-dev/tuiuiu.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forattini-dev%2Ftuiuiu.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30412096,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-12T00:40:14.898Z","status":"ssl_error","status_checked_at":"2026-03-12T00:40:08.439Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-12-24T16:09:08.776Z","updated_at":"2026-03-12T01:43:52.929Z","avatar_url":"https://github.com/forattini-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🐦 Tuiuiu\n\n### Terminal UI Framework for the Modern Era\n\nBuild beautiful, reactive terminal apps with a Modern Component API.\n\u003cbr\u003e\n**Zero dependencies** • **Signals-based** • **Flexbox layout** • **Full mouse support** • **MCP Ready**\n\u003cbr\u003e\n50+ components. Pure Node.js. No C++ bindings. AI-powered development.\n\n[![npm version](https://img.shields.io/npm/v/tuiuiu.js.svg?style=flat-square\u0026color=F5A623)](https://www.npmjs.com/package/tuiuiu.js)\n[![npm downloads](https://img.shields.io/npm/dm/tuiuiu.js.svg?style=flat-square\u0026color=34C759)](https://www.npmjs.com/package/tuiuiu.js)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Node.js](https://img.shields.io/badge/Node.js-18+-339933?style=flat-square\u0026logo=node.js\u0026logoColor=white)](https://nodejs.org/)\n[![License](https://img.shields.io/npm/l/tuiuiu.js.svg?style=flat-square\u0026color=007AFF)](https://github.com/forattini-dev/tuiuiu.js/blob/main/LICENSE)\n[![Zero Dependencies](https://img.shields.io/badge/dependencies-0-success?style=flat-square)](https://www.npmjs.com/package/tuiuiu.js)\n\n[📖 Documentation](https://forattini-dev.github.io/tuiuiu.js) · [🚀 Quick Start](#quick-start) · [🎨 Storybook](#storybook) · [🤖 MCP Server](#mcp-server)\n\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-hero.gif\" alt=\"Tuiuiu Demo\" width=\"600\"\u003e\n\n\u003c/div\u003e\n\n---\n\n## Quick Start\n\n```bash\nnpm install tuiuiu.js\n```\n\n```typescript\nimport { render, Box, Text, useState, useInput, useApp, setTheme, darkTheme } from 'tuiuiu.js';\n\n// ⚠️ IMPORTANT: Set theme BEFORE render() for proper input handling!\nsetTheme(darkTheme);\n\nfunction Counter() {\n  // useState persists across re-renders (it's a hook!)\n  const [count, setCount] = useState(0);\n  const { exit } = useApp();\n\n  useInput((char, key) =\u003e {\n    if (key.upArrow) setCount(c =\u003e c + 1);\n    if (key.downArrow) setCount(c =\u003e c - 1);\n    if (key.escape) exit();\n  });\n\n  return Box({ flexDirection: 'column', padding: 1, borderStyle: 'round' },\n    Text({ color: 'cyan', bold: true }, '🐦 Tuiuiu Counter'),\n    Text({ color: 'yellow', marginTop: 1 }, `Count: ${count()}`),\n    Text({ color: 'gray', dim: true }, '↑/↓: change • Esc: exit')\n  );\n}\n\nconst { waitUntilExit } = render(Counter);\nawait waitUntilExit();\n```\n\n\u003e ⚠️ **Critical**: Always call `setTheme()` before `render()` for proper input handling!\n\n## Terminal Images\n\n`tuiuiu.js` can render raster images directly inside compatible terminals such as Kitty, WezTerm, iTerm2, and Sixel terminals. The `TerminalImage` component negotiates the best backend available and falls back to colored half-blocks when protocol graphics are unavailable.\n\n```typescript\nimport { Panel, TerminalImage, loadImageFile, render } from 'tuiuiu.js';\n\nconst image = await loadImageFile('./tests/tuiuiu.png');\n\nrender(() =\u003e\n  Panel({ title: 'Preview', width: 40, height: 14 },\n    TerminalImage({\n      source: image,\n      width: 'fill',\n      height: 'fill',\n      fit: 'contain',\n    })\n  )\n);\n```\n\n`loadImageFile()` uses `ffprobe` and `ffmpeg` when available, so the core package stays zero-deps while still giving you a practical path from `PNG/JPEG/WebP` into RGBA.\n\n## What's Inside\n\n| Category | Features |\n|:---------|:---------|\n| **Core** | Signal-based reactivity, Flexbox layout engine, Focus management, Event system |\n| **Primitives** | Box, Text, Spacer, Newline, Fragment, Divider, Canvas |\n| **Atoms** | Button, TextInput, Switch, Slider, Spinner, ProgressBar, Timer, Tooltip |\n| **Molecules** | Select, MultiSelect, RadioGroup, Autocomplete, Table, Tabs, Tree, Calendar, CodeBlock, Markdown |\n| **Organisms** | Modal, CommandPalette, DataTable, FileManager, SplitPanel, ScrollArea, Grid, OverlayStack |\n| **Templates** | AppShell, Page, Header, StatusBar, VStack, HStack, Center, FullScreen |\n| **Data Viz** | BarChart, LineChart, Sparkline, Heatmap, Gauge, BigText, Digits |\n| **DevTools** | Layout Inspector, Event Logger, Performance Metrics, Component Storybook |\n\n## Real-World Examples\n\nBuild terminal apps that feel native. These examples recreate familiar CLI tools entirely in Tuiuiu:\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\n\u003cstrong\u003e📊 htop\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eProcess Monitor\u003c/em\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-htop.gif\" alt=\"htop clone\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\n\u003cstrong\u003e🌐 mtr\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eNetwork Diagnostics\u003c/em\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-mtr.gif\" alt=\"mtr clone\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"33%\"\u003e\n\u003cstrong\u003e📡 ping\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eNetwork Latency\u003c/em\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-ping.gif\" alt=\"ping clone\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n```bash\n# Try them yourself\npnpm tsx examples/app-htop.ts   # Process monitor with live updates\npnpm tsx examples/app-mtr.ts    # Network route tracer\npnpm tsx examples/app-ping.ts   # Network latency monitor\npnpm example tuiuiu-invaders    # Literal ASCII Space Invaders\npnpm example tuiuiu-meteor      # Asteroids-style meteor splitter\npnpm example tuiuiu-sideblaster # Horizontal shoot'em up\n```\n\n## Gallery\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"50%\"\u003e\n\u003cstrong\u003e📊 Real-time Dashboard\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-dashboard.gif\" alt=\"Dashboard\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"50%\"\u003e\n\u003cstrong\u003e💬 Chat Application\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-chat.gif\" alt=\"Chat\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cstrong\u003e🎨 Component Storybook\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-storybook.gif\" alt=\"Storybook\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cstrong\u003e📝 Interactive Forms\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-forms.gif\" alt=\"Forms\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cstrong\u003e💚 WhatsApp Clone\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/examples/whatsapp-clone.gif\" alt=\"WhatsApp Clone\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cstrong\u003e🖌️ Drawing Canvas\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/examples/tuiuiu-brush.gif\" alt=\"Tuiuiu Brush\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\n\u003cstrong\u003e🎵 Music Player\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-player.gif\" alt=\"Music Player\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\n\u003cstrong\u003e📊 Data Visualization\u003c/strong\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/components/charts.gif\" alt=\"Charts\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" colspan=\"2\"\u003e\n\u003cstrong\u003e🏰 Tuiuiu Defence\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eTower Defense Game\u003c/em\u003e\u003cbr\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/forattini-dev/tuiuiu.js/main/docs/recordings/examples/demo-tuiuiu-defence.gif\" alt=\"Tuiuiu Defence\" width=\"100%\"\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" width=\"50%\"\u003e\n\u003cstrong\u003e👾 Tuiuiu Invaders\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eLiteral Space Invaders Clone\u003c/em\u003e\u003cbr\u003e\n\u003ccode\u003epnpm example tuiuiu-invaders\u003c/code\u003e\n\u003c/td\u003e\n\u003ctd align=\"center\" width=\"50%\"\u003e\n\u003cstrong\u003e☄️ Tuiuiu Meteor\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eAsteroids-style Meteor Splitter\u003c/em\u003e\u003cbr\u003e\n\u003ccode\u003epnpm example tuiuiu-meteor\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\" colspan=\"2\"\u003e\n\u003cstrong\u003e🚀 Tuiuiu Sideblaster\u003c/strong\u003e\u003cbr\u003e\n\u003cem\u003eHorizontal Shoot'em Up Showcase\u003c/em\u003e\u003cbr\u003e\n\u003ccode\u003epnpm example tuiuiu-sideblaster\u003c/code\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Highlights\n\n### ⚡ Signal-based Reactivity\n\nFine-grained reactivity without Virtual DOM overhead. Only what changes gets updated.\n\n```typescript\nimport { createSignal, createEffect } from 'tuiuiu.js';\n\n// createSignal at module level = shared/global state\nconst [count, setCount] = createSignal(0);\nconst doubled = () =\u003e count() * 2;\n\ncreateEffect(() =\u003e console.log(`Count: ${count()}, Doubled: ${doubled()}`));\n\nsetCount(5); // → \"Count: 5, Doubled: 10\"\n```\n\n\u003e **Note:** Use `useState()` for component-local state, `createSignal()` at module level for shared state. Never use `createSignal()` inside components — it will be recreated on every render!\n\n### 📦 Flexbox Layout\n\nBuild complex layouts with the CSS Flexbox model you already know.\n\n```typescript\nBox({\n  flexDirection: 'row',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  gap: 2,\n  padding: 1\n},\n  Text({ color: 'blue' }, 'Left'),\n  Box({ flexGrow: 1 }),\n  Text({ color: 'red' }, 'Right')\n)\n```\n\n### 🎨 50+ Ready-to-Use Components\n\nFrom simple buttons to complex data tables, everything is included.\n\n```typescript\nimport { Select, Modal, DataTable, CommandPalette } from 'tuiuiu.js';\n\n// Dropdown select\nSelect({\n  items: [\n    { label: 'Option A', value: 'a' },\n    { label: 'Option B', value: 'b' },\n  ],\n  onSelect: (item) =\u003e console.log(item)\n});\n\n// Command palette (⌘K style)\nCommandPalette({\n  commands: [\n    { id: 'new', label: 'New File', shortcut: 'Ctrl+N' },\n    { id: 'open', label: 'Open File', shortcut: 'Ctrl+O' },\n  ],\n  onSelect: (cmd) =\u003e handleCommand(cmd)\n});\n```\n\n### 🖱️ Full Mouse Support\n\nClick, hover, scroll, drag — all mouse events work out of the box.\n\n```typescript\nBox({\n  borderStyle: 'round',\n  onClick: () =\u003e console.log('Clicked!'),\n  onMouseEnter: () =\u003e setHover(true),\n  onMouseLeave: () =\u003e setHover(false),\n  onScroll: (delta) =\u003e scrollBy(delta),\n},\n  Text({}, hover() ? '🔥 Hovering!' : 'Hover me')\n)\n```\n\n### 📊 Data Visualization\n\nRender charts and graphs directly in the terminal.\n\n```typescript\nimport { BarChart, Sparkline, Gauge } from 'tuiuiu.js';\n\nBarChart({\n  data: [\n    { label: 'Mon', value: 10 },\n    { label: 'Tue', value: 25 },\n    { label: 'Wed', value: 15 },\n  ],\n  color: 'cyan',\n  showValues: true\n});\n\nSparkline({ data: [1, 5, 2, 8, 3, 9], width: 20, style: 'braille' });\n\nGauge({ value: 75, max: 100, label: 'CPU', color: 'green' });\n```\n\n### 🎨 Terminal Colors API (Standalone)\n\nZero-dependency ANSI colors for CLI tools. Use it without the full UI framework.\n\n```typescript\nimport { red, bold, compose, c, tpl } from 'tuiuiu.js/colors';\n\n// Simple functions\nconsole.log(red('Error!'));\nconsole.log(bold('Important'));\n\n// Composition\nconst errorStyle = compose(red, bold);\nconsole.log(errorStyle('Critical failure!'));\n\n// Chainable API\nconsole.log(c.red.bold('Critical!'));\nconsole.log(c.bgBlue.white('Info'));\nconsole.log(c.hex('#ff6600')('Orange'));\n\n// Template literal\nconsole.log(tpl`{red Error:} Something went wrong`);\n\n// Theme-aware colors\nimport { theme, tw } from 'tuiuiu.js/colors';\nconsole.log(theme.primary('Action'));\nconsole.log(tw.blue[500]('Tailwind Blue'));\n```\n\n### 🏗️ Atomic Design + Tree Shaking\n\nComponents organized in a clear hierarchy. Import only what you need — unused code is automatically removed from your bundle.\n\n```typescript\n// Import everything (convenient for development)\nimport { Box, Button, Modal } from 'tuiuiu.js';\n\n// Import by layer (optimized bundles)\nimport { Box, Text } from 'tuiuiu.js/primitives';\nimport { Button, Spinner } from 'tuiuiu.js/atoms';\nimport { Select, Table } from 'tuiuiu.js/molecules';\nimport { Modal, DataTable } from 'tuiuiu.js/organisms';\nimport { AppShell, Page } from 'tuiuiu.js/templates';\n\n// Core systems\nimport { createSignal, createEffect } from 'tuiuiu.js/core';\nimport { useState, useInput, useMouse } from 'tuiuiu.js/hooks';\nimport { render, renderOnce } from 'tuiuiu.js/app';\n\n// Utilities \u0026 extras\nimport { measureText, getVisibleWidth } from 'tuiuiu.js/utils';\nimport { BarChart, Gauge } from 'tuiuiu.js/design-system';\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eAll subpath imports\u003c/summary\u003e\n\n| Import | Contents |\n|:-------|:---------|\n| `tuiuiu.js` | Everything (main entry) |\n| `tuiuiu.js/primitives` | Box, Text, Spacer, Fragment, Divider, Canvas |\n| `tuiuiu.js/atoms` | Button, TextInput, Switch, Slider, Spinner, ProgressBar, Timer |\n| `tuiuiu.js/molecules` | Select, MultiSelect, Table, Tabs, Tree, Calendar, CodeBlock |\n| `tuiuiu.js/organisms` | Modal, CommandPalette, DataTable, FileManager, SplitPanel |\n| `tuiuiu.js/templates` | AppShell, Page, VStack, HStack, StatusBar |\n| `tuiuiu.js/core` | createSignal, createEffect, batch, calculateLayout |\n| `tuiuiu.js/hooks` | useState, useEffect, useInput, useMouse, useFocus |\n| `tuiuiu.js/app` | render, renderOnce, useApp |\n| `tuiuiu.js/utils` | Text measurement, ANSI utilities |\n| `tuiuiu.js/colors` | Terminal ANSI colors (standalone, zero dependencies) |\n| `tuiuiu.js/design-system` | Full design system (charts, forms, navigation) |\n| `tuiuiu.js/storybook` | Component explorer utilities |\n\n\u003c/details\u003e\n\n### 🔄 Centralized Store\n\nBuilt-in state management for complex applications.\n\n```typescript\nimport { createStore } from 'tuiuiu.js';\n\nconst reducer = (state = { count: 0 }, action) =\u003e {\n  switch (action.type) {\n    case 'INCREMENT': return { count: state.count + 1 };\n    case 'DECREMENT': return { count: state.count - 1 };\n    default: return state;\n  }\n};\n\nconst store = createStore(reducer, { count: 0 });\n\nstore.subscribe(() =\u003e console.log(store.state()));\nstore.dispatch({ type: 'INCREMENT' });\n```\n\n## MCP Server\n\n\u003e **Build terminal UIs with AI.** Tuiuiu includes a native [Model Context Protocol](https://modelcontextprotocol.io) server that lets Claude and other AI assistants help you build terminal applications.\n\n```bash\n# Start the MCP server\nnpx tuiuiu.js@latest mcp\n```\n\nAdd to your `.mcp.json` for Claude Code integration:\n\n```json\n{\n  \"mcpServers\": {\n    \"tuiuiu\": {\n      \"command\": \"npx\",\n      \"args\": [\"tuiuiu\", \"mcp\"]\n    }\n  }\n}\n```\n\nNow Claude has full access to Tuiuiu's 50+ components, hooks, themes, and examples. Ask it to build dashboards, forms, file browsers, or any terminal UI — it knows the API.\n\n**Available tools:** `tuiuiu_list_components`, `tuiuiu_get_component`, `tuiuiu_get_hook`, `tuiuiu_search`, `tuiuiu_list_themes`, `tuiuiu_create_theme`, `tuiuiu_getting_started`, `tuiuiu_quickstart`, `tuiuiu_version`, `tuiuiu_api_patterns`\n\n### Debug with MCP Inspector\n\nTest and explore the MCP server interactively using the official [MCP Inspector](https://github.com/modelcontextprotocol/inspector):\n\n```bash\nnpx @modelcontextprotocol/inspector npx tuiuiu.js@latest mcp\n```\n\nThis opens a web UI where you can browse tools, test resources, and inspect the full MCP capabilities.\n\n[→ Full MCP Documentation](https://forattini-dev.github.io/tuiuiu.js/#/core/mcp)\n\n## Storybook\n\nTuiuiu includes a built-in component storybook for exploring all components:\n\n```bash\n# Run the storybook\nnpx tuiuiu storybook\n```\n\nNavigate through categories, see live previews, and copy code examples.\n\n## Examples\n\n```bash\n# Clone and explore\ngit clone https://github.com/forattini-dev/tuiuiu.js\ncd tuiuiu.js\npnpm install\n\n# Real-world apps (featured)\npnpm tsx examples/app-htop.ts      # Process monitor (htop clone)\npnpm tsx examples/app-mtr.ts       # Network tracer (mtr clone)\npnpm tsx examples/app-ping.ts      # Latency monitor (ping clone)\npnpm tsx examples/app-dashboard.ts # Real-time dashboard\npnpm tsx examples/app-chat.ts      # Chat application\npnpm tsx examples/tuiuiu-player.ts # Music player with waveform\n```\n\n## Documentation\n\n| Topic | Link |\n|:------|:-----|\n| Quick Start | [→ Getting Started](https://forattini-dev.github.io/tuiuiu.js/#/getting-started/quick-start) |\n| Components | [→ Component Reference](https://forattini-dev.github.io/tuiuiu.js/#/components/overview) |\n| Hooks | [→ Hooks API](https://forattini-dev.github.io/tuiuiu.js/#/hooks/use-input) |\n| Signals | [→ Reactive State](https://forattini-dev.github.io/tuiuiu.js/#/core/signals) |\n| Layout | [→ Flexbox Guide](https://forattini-dev.github.io/tuiuiu.js/#/core/layout) |\n| Theming | [→ Theme System](https://forattini-dev.github.io/tuiuiu.js/#/core/theming) |\n| Storybook | [→ Component Explorer](https://forattini-dev.github.io/tuiuiu.js/#/core/storybook) |\n| MCP Server | [→ AI Integration](https://forattini-dev.github.io/tuiuiu.js/#/core/mcp) |\n\n## Why \"Tuiuiu\"?\n\nThe [Tuiuiu](https://en.wikipedia.org/wiki/Jabiru) (Jabiru mycteria) is a majestic Brazilian bird — the tallest flying bird in South America. Just like this bird stands out in its environment, Tuiuiu stands out in the terminal UI landscape: elegant, powerful, and distinctly Brazilian.\n\n## License\n\nMIT © [Forattini](https://forattini.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforattini-dev%2Ftuiuiu.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforattini-dev%2Ftuiuiu.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforattini-dev%2Ftuiuiu.js/lists"}