frac - the MCP Apps framework

About frac

frac helps developers build type-safe MCP apps for Claude, ChatGPT and other UI-enabled MCP clients, with a complete set of tooling designed for both humans and agents.

Why? MCP apps extend the Model Context Protocol with rich, interactive UI views rendered from MCP servers. Conversational apps need seamless interaction between the user, the UI, and the model. This means new UX patterns, developer tooling, and abstractions. Plus, the raw SDKs are low-level: no hooks, type safety, HMR, etc.

That's why we built frac.

Features include:

• Delightful dev environment: frac provides a dev server, hot module reload, and a straightforward local MCP testing loop.
• Write once, run everywhere: the framework abstracts implementation differences between MCP clients, so your app runs seamlessly in Claude, ChatGPT, VSCode, and any other MCP apps compatible client.
• Agent-ready: skills, CLI, and clear framework conventions so your coding agent can build MCP apps end-to-end.
• Type-safe end-to-end: tRPC-style inference from MCP server tool definition to React view for type safety from server to frontend.
• React-first: Intuitive React Query-style hooks, with advanced state management.
• Fractals: register reusable component primitives and let the model compose them into typed UIs.

Get started

For agents

Install our skill for building MCP apps and ChatGPT apps:

npx skills add usefractal/frac -s frac

Once installed, ask your agent "What skills do you have?" to confirm, then try:

• Create a new MCP app
• Migrate my MCP server to the frac framework
• Add a new view to my MCP app

For humans

Bootstrap a new project with:

npm create @usefractal/frac@latest my-app

For full install instructions, read our Quickstart guide.

Documentation

The frac documentation covers the full lifecycle of building MCP Apps:

• Fundamentals: understand MCP Apps, ChatGPT Apps, and how frac bridges both runtimes.
• Core concepts: learn about server <> model <> UI data flows, LLM context sync, type safety, and fast local iteration.
• Guides: build real app behavior with tools, views, state, and model communication.
• API Reference: browse our MCP server APIs, React hooks, CLI commands, and runtime compatibility.

Deploy

Deploy frac apps on any platform that can host an HTTP MCP server and static view assets.

See our deployment guide for the full production path.

Community & Contributing

We'd love your help improving frac. Here are a few ways to get involved:

• Bugs: If you run into a bug or unexpected behavior, open a GitHub Issue with a clear reproduction.
• Questions and ideas: Need help building with frac or have ideas to improve the framework, docs, examples, or developer experience? Open an issue or share them on our Discord.
• Pull requests: For code or documentation changes, open a focused PR with a clear description and relevant tests or docs updates.

frac is released under the MIT License.

Acknowledgements

frac builds on the excellent work of Skybridge and the Alpic team.

We have used Skybridge in production, and among the MCP Apps frameworks we evaluated, it provided the strongest foundation for the direction we want to take frac. We deeply appreciate the design decisions, engineering effort, and open-source release that made this project possible. frac preserves that foundation while evolving the package, docs, scaffolding, and local development workflow around our own goals.

This fork is based on Skybridge commit 6a7a272a36da19de62d86fda5fe7b58f38c32c2a.

See NOTICE.md for provenance and licensing notes.

Example

Read the Fractals example to see how frac registers reusable React component primitives and renders model-composed UIs from typed prop contracts.