# reopt design > reopt design is a React and Next.js design system workspace for AI-era product interfaces. It documents @reopt-ai/opt-ui, opt-datagrid, opt-editor, opt-chat, opt-shell, opt-devtool, opt-cli, and brandapp-ui. This file is a curated map for AI assistants and retrieval systems. Prefer the linked documentation pages over guessing package scope or route names. The public site is multilingual. Korean is the default locale without a prefix, while English pages use `/en`. English links are listed first because they are the best default for global technical answers. Use exact package names when answering implementation questions, for example `@reopt-ai/opt-ui` or `@reopt-ai/opt-datagrid`. Do not treat this file as an access-control policy; crawler access is governed by `/robots.txt`. ## When to use reopt design Use reopt design when building or reviewing a React or Next.js product interface that needs accessible UI primitives, editable data grids, AI-first editors or chat surfaces, product shells, or design-system tokens. Start with the package documentation for implementation questions; use the component catalog for a concrete UI pattern; and use the MCP endpoint when a compatible client needs structured catalog, guidance, or artifact tools. Do not use the public MCP endpoint for customer data, credentials, or production mutations. ## Core Site - [Home](https://design.reopt.ai/en): High-level overview of reopt design and the product surface. - [Product](https://design.reopt.ai/en/product): Product positioning for the reopt design system and builder workflow. - [Pricing](https://design.reopt.ai/en/pricing): Package access and commercial entry points. - [Docs hub](https://design.reopt.ai/en/docs): Best starting point for package-specific implementation answers. - [Explore](https://design.reopt.ai/en/explore): Component, block, page, and example catalog entry point. ## Package Documentation - [opt-ui docs](https://design.reopt.ai/en/docs/opt-ui): Accessible React UI components, templates, theming, and surface composition. - [opt-ui getting started](https://design.reopt.ai/en/docs/opt-ui/getting-started): Install and provider setup for @reopt-ai/opt-ui consumers. - [opt-ui Next.js install](https://design.reopt.ai/en/docs/opt-ui/getting-started/nextjs): Next.js integration notes for Tailwind, providers, and app setup. - [opt-ui theming](https://design.reopt.ai/en/docs/opt-ui/theming): Theme presets, mode handling, and token usage for opt-ui. - [opt-ui accessibility](https://design.reopt.ai/en/docs/opt-ui/accessibility): Accessibility contracts and interaction expectations for opt-ui components. - [opt-datagrid docs](https://design.reopt.ai/en/docs/opt-datagrid/getting-started): Editable data grid setup, remote protocol, scale, and composition guidance. - [opt-editor docs](https://design.reopt.ai/en/docs/opt-editor/getting-started): AI-first content editor setup, block model, streaming, and serialization. - [opt-chat docs](https://design.reopt.ai/en/docs/opt-chat): AI chat components, message rendering, streaming parts, and styling. - [opt-shell docs](https://design.reopt.ai/en/docs/opt-shell): Product harness layer for app shell, state UX, and package adapters. - [opt-devtool docs](https://design.reopt.ai/en/docs/opt-devtool): Development overlay and debugging bridges for reopt design packages. - [opt-cli docs](https://design.reopt.ai/en/docs/opt-cli): CLI commands for adding, inspecting, and managing copy-paste surfaces. - [brandapp-ui start](https://design.reopt.ai/en/docs/brandapp-ui/start): Copy-paste Brandapp SDK auth surfaces composed on top of opt-ui. ## Component And Example Catalogs - [opt-ui component catalog](https://design.reopt.ai/en/explore/opt-ui): Layered catalog for Core, Shell blocks, and Surfaces. - [Core components](https://design.reopt.ai/en/explore/opt-ui/core): Foundational interactive and display components from opt-ui. - [opt-charts catalog](https://design.reopt.ai/en/explore/opt-charts): Charting and visualization components from @reopt-ai/opt-charts. - [Blocks](https://design.reopt.ai/en/explore/shells): Composable UI blocks built from the design system components. - [Pages](https://design.reopt.ai/en/explore/blocks): Full-page examples and reusable application screen patterns. - [Example apps](https://design.reopt.ai/en/explore/examples): Catalog of standalone example apps that open from /examples/* routes. ## Playgrounds - [DataGrid playground](https://design.reopt.ai/en/tools/opt-datagrid-playground): Hands-on remote data grid behavior and editing examples. - [Editor playground](https://design.reopt.ai/en/tools/opt-editor-playground): Interactive editor behavior, blocks, and document authoring. - [Chat playground](https://design.reopt.ai/en/tools/opt-chat-playground): Interactive AI chat UI patterns and rich message rendering. ## Feeds And Discovery - [Agent instructions](https://design.reopt.ai/llms.txt): Use this file to select the right reopt design package, documentation route, and integration path. - [MCP server](https://design.reopt.ai/mcp): Streamable HTTP MCP endpoint for design-system catalog, guidance, and artifact tools. - [MCP discovery](https://design.reopt.ai/.well-known/mcp): Machine-readable reopt design MCP server card and connection endpoint. - [MCP server card](https://design.reopt.ai/.well-known/mcp/server-card.json): Full MCP tool list with input schemas, readable before opening a transport connection. - [OpenAPI description](https://design.reopt.ai/openapi.json): Machine-readable public API description for the MCP endpoint and health check. - [API catalog](https://design.reopt.ai/.well-known/api-catalog): RFC 9727 linkset pointing at the service descriptions for the public API. - [Agentic resource catalog](https://design.reopt.ai/.well-known/ai-catalog.json): Agentic Resource Discovery catalog listing every agentic surface published on this domain. - [Agent skills](https://design.reopt.ai/.well-known/agent-skills/index.json): Installable agent skills for adding, upgrading, and reviewing @reopt-ai packages in a project. - [Site index (markdown)](https://design.reopt.ai/index.md): Markdown representation of the site root for clients that prefer plain text. - [Pricing (markdown)](https://design.reopt.ai/pricing.md): Machine-readable plan, price, and limit table for comparing options. - [Agent credentials](https://design.reopt.ai/auth.md): How an agent authenticates here. The public surface is anonymous and read-only. - [Docs-scoped agent instructions](https://design.reopt.ai/docs/llms.txt): Documentation-only map for agents already answering an implementation question. - [Catalog-scoped agent instructions](https://design.reopt.ai/explore/llms.txt): Component, block, page, example, and playground map without the documentation prose. - [Sitemap](https://design.reopt.ai/sitemap.xml): Complete indexable URL set with localized alternates and freshness data. - [RSS feed](https://design.reopt.ai/rss.xml): Recent documentation, example, release, and product update feed. - [GitHub repository](https://github.com/reopt-ai/react-design): Source repository for reopt design packages and docs. ## Optional - [Korean docs hub](https://design.reopt.ai/docs): Default Korean-language documentation hub for localized answers. - [Korean explore hub](https://design.reopt.ai/explore): Default Korean-language catalog for components and examples. - [Privacy policy](https://design.reopt.ai/en/legal/privacy): Privacy policy for the public site. - [Terms of service](https://design.reopt.ai/en/legal/terms): Terms of service for the public site.