Start building with frac

frac is a fullstack TypeScript framework for building MCP and ChatGPT Apps: interactive views that render inside AI conversations. Define tools, write React components, and let frac do the rest:

import { McpServer } from "@usefractal/frac/server";
import { z } from "zod";

const server = new McpServer({ name: "my-app", version: "0.0.1" }, {})
  .registerTool(
    {
      name: "greeting",
      description: "Greet someone by name.",
      inputSchema: { name: z.string() },
      view: { component: "greeting" },
    },
    async ({ name }) => {
      return { structuredContent: { message: `Hello, ${name}!` } };
    },
  );

import { useToolInfo } from "../helpers.js"; // auto-generated from server schema

export default function Greeting() {
  const { output } = useToolInfo<"greeting">();
  return <h1>{output.message}</h1>;
}

Scaffold a working app in one command and start building in minutes.

Bring an existing Apps SDK or MCP Apps project into frac.

Solving the Three Body Problem

MCP Apps and ChatGPT Apps are a new kind of software built for a new surface: the conversation itself. Under the hood, an MCP server exposes tools. Some are bound to UI templates, and when the model calls one, the host can render the corresponding view inline with the tool’s output.

This looks simple, but it introduces a fundamental shift. Traditional apps have two actors: the user and the interface. These apps have three: the user, the UI, and the model. This creates context asymmetry: each actor holds a partial view of the system. The model is blind to the UI: it can’t see visuals or user interactions unless you explicitly sync them back. The user can’t see the structured data flowing underneath. Building well means understanding these blind spots and designing the information flow between all three.

Architecting

The frac Skill acts as a design partner: helping you brainstorm ideas, validate your UX, and design apps that make sense inside ChatGPT or Claude.

The core design challenge isn’t layout or styling: it’s deciding who sees what, and when. What does the model need to know and when? What should stay hidden from it? Where should natural language replace traditional UI? frac gives you the primitives to make these decisions explicit, and the Skill helps you think through them upfront.

Bring an existing app into frac with AI-assisted migration guidance.

Understand MCP, ChatGPT Apps, and how frac bridges the two runtimes.

Building

Scaffold a new project in one command:

npm create @usefractal/frac@latest my-app

pnpm create @usefractal/frac my-app

yarn create @usefractal/frac my-app

bun create @usefractal/frac my-app

You can also install the frac Skill so your AI coding assistant has framework-specific guidance for bootstrapping, maintaining, and migrating projects:

npx skills add usefractal/frac -s frac

Browse the framework API.

Scaffold and run your first app

Migrate an existing app

Testing and shipping

frac gives you a fast local loop, then smooth paths to production.

Develop locally

Run npm run dev to start your MCP server at http://localhost:3000/mcp. View changes hot-reload instantly through the Vite dev server.
Test in ChatGPT, Claude, and more

Use Sunpeak, MCPJam, or another local MCP tester during development. For hosted clients, deploy the server or expose your own public /mcp URL.
Build and deploy

Run npm run build, then host on any platform that can serve the MCP endpoint and built view assets.

Local MCP tooling and production testing

Compile and optimize

Ship to Cloudflare Workers or self-host

Keep learning

Initial hydration and user-triggered data fetching patterns.

Persistent state with useViewState and createStore.

Keep the LLM aware of what happens in your UI.

Adapt to theme, locale, display mode, and device.