mastra.ai/

Mastra

mastra.ai/

Mastra is a TypeScript framework for building AI agents, bundling agents, workflows, memory, a server, and observability into one open-source toolkit that works with React, Next.js, or Node. The homepage displays its GitHub star count (28.3k) directly in the hero rather than in a footer badge, and backs its docs with two self-published books it says have been distributed 240K+ and 100K+ copies respectively, plus a weekly podcast. It shows customer logos like Salesforce, MongoDB, and WorkOS alongside linked case studies, and includes a live-looking dashboard mockup of agent traces, metrics, and evals rather than a static feature screenshot.

Visit website

Category

Engineering & Infrastructure

Style

Dark Minimal

Stack

Next.js Tailwind CSS

Fonts

greed

Palette

Meta title

TypeScript AI Framework for Agents and Apps | Mastra

Sections

Updated

Oct 10, 2026

Mastra's landing page, section by section

Each section below is cropped straight from Mastra's live page — useful references for engineering & infrastructure landing page design.

Mastra design review: how the homepage is built

The page runs top to bottom as a header with a promo pill, a hero with a file-tree card, two rows of six customer logos, a tabbed code panel, a tabbed observability panel, a grid of nine case-study tiles, three agent-type cards, a books-and-releases pair, an FAQ, a closing line and a six-column footer. It is 9682 pixels tall on desktop. Colour stays almost entirely in black and grey, from #080808 to #878787, with green on one word and in the audio bars. The display face is greed. Headlines split into a white first sentence and a grey second one.

Above the fold

A slim header holds the logo, six nav labels from "Product" to "Docs", a GitHub star count of "27.3k", "Login" and "Sign Up". Beneath it a pill reads "Get a free book". The headline is only "Build AI agents", with a short paragraph whose first word is green. At right, a floating "mastra-project" card lists five entries, over a blurred chat window. A "Copy agent prompt" pill and a "Quickstart" link sit below.

Logo grid and tabbed product panels

Twelve logos, from Salesforce and Marsh to Replit, each carry a small "Read" link. The statement "Workflows. Memory. Harness." turns grey halfway through. A rounded frame with five tabs, "AGENTS", "WORKFLOWS", "HARNESS", "MEMORY" and "SERVER", shows an "AGENT.TS" code listing beside a chat window. A second statement, "Best-in-class, built-in observability.", introduces another five-tab frame, "EVALS" through "SIGNALS", filled with a table of red-highlighted eval rows.

Case studies, agent types, books and releases

Under "Great AI teams move fast.", a tab labelled "Case Studies" sits over nine tiles in three columns. Some show a speaker photograph while others show one large figure like "$5.1B", "100K developers" or "50K". "Empower your customers, turbo-charge your company." leads to three cards: "Internal agents", "Customer-facing agents" and "Developer platform agents". The last band pairs two book covers, marked "240K+ copies distributed" and "100K+ copies distributed", with four dated release posts from Aug 2026.

FAQ, closing line and footer

The "Frequently asked questions" tab tops a rounded box of ten rows with chevrons; only the first, "What is Mastra?", is open with a paragraph. "Start building with Mastra today" repeats the "Copy agent prompt" pill and "Quickstart" link. The footer places the logo beside a "GET WEEKLY UPDATES:" email field and "Subscribe" button, then six link columns from "Framework" to "Connect", with a green "FULLY OPERATIONAL" status line below.

On mobile

At 390 pixels the page grows to 12510 pixels. Logos shrink to a single row cut off at the edge. Tabbed frames show only two or three tabs, with a caption above the screenshot. The nine case-study tiles stack in one column, as do the agent cards. Footer columns pair up in two across.

Worth borrowing

Splitting each section statement into a white sentence and a grey sentence creates hierarchy with one typeface and no extra graphics.
Putting product screenshots in tabbed rounded frames lets one page show agents, workflows and evals without separate sections.
Mixing large single statistics with speaker photographs in the case-study grid keeps proof scannable and human.