TypeUI logoTypeUI

Use TypeUI with Mistral

Follow this guide to connect Mistral Work or Studio to TypeUI with a custom MCP Connector.

Use the Mistral Work or Studio connector flow for TypeUI.

Open Mistral

Open the Mistral workspace where you want to use TypeUI.

Add TypeUI as a Connector

Open Connectors, click Add Connector, then switch to the Custom MCP Connector tab.

Copy the TypeUI MCP server URL:

Server URL
https://mcp.typeui.sh/mcp

Use:

  • Connector name: typeui
  • Server URL: https://mcp.typeui.sh/mcp
  • Description: Design systems, UI prompts, and layout variations for better AI-generated UI.

Click Connect. Mistral detects the TypeUI OAuth flow automatically and guides you through TypeUI consent.

Verify the tools

After authorization, open the TypeUI Connector and review the available functions.

Keep TypeUI functions on manual approval until you confirm the workflow in your workspace.

Create a draft

Start from a theme, a markdown ZIP, or a Figma import. TypeUI creates an editable draft design system in your workspace.

Choose a themeUse a TypeUI theme as your starting point.Import markdown filesBring existing design-system docs into TypeUI.Beta previewImport from FigmaGenerate markdown from a Figma file.

Review the markdown

Open View markdown source files and review them before publishing.

Files to review

The main entry file. It tells AI tools how to use this design system and where to look next.Logo and brand asset guidance. Colors, typography, and spacing stay in their own files.Color tokens and usage guidance for brand, surfaces, text, borders, and states.Font families, sizes, weights, line heights, headings, labels, and body text rules.Spacing, grids, containers, responsive behavior, and layout structure rules.Button sizes, variants, states, icon spacing, focus behavior, and accessibility rules.+14 more

Edit the source files

Adjust the markdown when you need clearer rules, stronger component guidance, or product-specific language. After publishing, TypeUI MCP uses your saved edits when it helps your AI tool build UI.

Publish for MCP

Publish when ready so your MCP-connected AI tool can use it.

Start building UI

Use TypeUI to help me build a landing page.

Tell Mistral what to build. TypeUI helps it choose the right style and layout.

Review and refine

Review the result and ask Mistral for targeted improvements:

I don't like this pricing section, give me more variations.

TypeUI will now create three pricing variations so you can compare different layouts before choosing one.

Three pricing cards prompt preview
TypeUITypeUIPro

After you choose a direction, tell Mistral which one to use:

I like the comparison one. Let's use it.

Once Mistral is connected to TypeUI, you can keep working in the same flow: choose a design system, ask for the interface you need, review the generated variations, and tell Mistral which direction to continue with.

GrokOpenCode