diff --git a/content/docs/components/meta.json b/content/docs/components/meta.json index 5dfe196..e37d5f8 100644 --- a/content/docs/components/meta.json +++ b/content/docs/components/meta.json @@ -1,26 +1,31 @@ { "title": "Components", + "defaultOpen": true, "pages": [ - "alert", - "alert-dialog", - "avatar", - "badge", + "---Forms and inputs---", "button", - "card", + "text-field", "checkbox", - "combobox", - "dialog", - "drawer", - "progress", "radio", + "switch", + "slider", "select", + "combobox", + "---Layout and surfaces---", + "card", "separator", - "slider", - "spinner", - "switch", "tabs", - "text-field", + "avatar", + "---Feedback and status---", + "badge", + "spinner", + "progress", + "alert", "toast", - "tooltip" + "tooltip", + "---Overlays---", + "dialog", + "alert-dialog", + "drawer" ] } diff --git a/content/docs/links/meta.json b/content/docs/links/meta.json new file mode 100644 index 0000000..a0c773a --- /dev/null +++ b/content/docs/links/meta.json @@ -0,0 +1,9 @@ +{ + "title": "Links", + "pages": [ + "[Playground](https://play.fossui.org)", + "[Roadmap](/roadmap)", + "[pub.dev](https://pub.dev/packages/fossui)", + "[GitHub](https://github.com/fossui/fossui)" + ] +} diff --git a/content/docs/mcp.mdx b/content/docs/mcp.mdx new file mode 100644 index 0000000..427bdac --- /dev/null +++ b/content/docs/mcp.mdx @@ -0,0 +1,99 @@ +--- +title: MCP +description: Connect your AI coding assistant to the fossui MCP server so it writes fossui code against the real component API. +--- + +import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; + +The fossui MCP server hands your AI coding assistant the exact component API. +Instead of guessing prop names and enum values, the assistant looks them up and +writes code that compiles and stays on theme the first time. + +## What is MCP + +The Model Context Protocol (MCP) is an open standard for connecting AI +assistants to outside tools and data over one interface. A server offers a set +of capabilities; a client, your editor or CLI, connects and uses them. + +fossui runs a hosted server that any client reaches over Streamable HTTP: + +``` +https://mcp.fossui.org +``` + +There is nothing to install and no key to manage. Point a client at the URL and +it picks up the fossui tools. + +## Add it to your assistant + + + + + +Register the server with the CLI: + +```bash +claude mcp add --transport http fossui https://mcp.fossui.org +``` + +Then build with fossui the way you already prompt. + + + + + +Add it to `.cursor/mcp.json` in the project, or `~/.cursor/mcp.json` to enable it +everywhere: + +```json +{ + "mcpServers": { + "fossui": { + "url": "https://mcp.fossui.org" + } + } +} +``` + + + + + +Add it to `.vscode/mcp.json`: + +```json +{ + "servers": { + "fossui": { + "type": "http", + "url": "https://mcp.fossui.org" + } + } +} +``` + + + + + +Open the MCP settings and add a server, or edit the config file directly: + +```json +{ + "mcpServers": { + "fossui": { + "serverUrl": "https://mcp.fossui.org" + } + } +} +``` + + + + + +## Learn more + +New to the protocol? The official docs walk through the concepts and the +client and server model: +[modelcontextprotocol.io](https://modelcontextprotocol.io/docs/getting-started/intro). diff --git a/content/docs/meta.json b/content/docs/meta.json index 0d82014..e73ced0 100644 --- a/content/docs/meta.json +++ b/content/docs/meta.json @@ -1,3 +1,3 @@ { - "pages": ["index", "components"] + "pages": ["index", "mcp", "components", "links"] } diff --git a/next.config.mjs b/next.config.mjs index 219f24d..3b14852 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -6,6 +6,9 @@ const withMDX = createMDX(); const config = { output: 'export', reactStrictMode: true, + images: { + unoptimized: true, + }, }; export default withMDX(config); diff --git a/public/assets/hero-demo.mp4 b/public/assets/hero-demo.mp4 new file mode 100644 index 0000000..0aaa609 Binary files /dev/null and b/public/assets/hero-demo.mp4 differ diff --git a/public/assets/hero-poster.png b/public/assets/hero-poster.png new file mode 100644 index 0000000..e22fb65 Binary files /dev/null and b/public/assets/hero-poster.png differ diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 6a93521..4d1ad6a 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,116 +1,178 @@ import Link from 'next/link'; -import { - Blocks, - Palette, - ShieldCheck, - Package, - Code, - ArrowRight, - LayoutGrid, -} from 'lucide-react'; -import { Badge } from '@/components/ui/badge'; -import { Button } from '@/components/ui/button'; -import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; -import { CopyCommand } from '@/components/copy-command'; -import { pubDevUrl, showcaseUrl } from '@/lib/shared'; +import type { Metadata } from 'next'; +import { Package, ArrowRight, LayoutGrid, Scale } from 'lucide-react'; +import { Separator } from '@/components/ui/separator'; +import { CopyEmail } from '@/components/copy-email'; +import { FaqAccordion } from '@/components/faq-accordion'; +import { InstallTabs } from '@/components/install-tabs'; +import { licenseUrl, pubDevUrl, showcaseUrl } from '@/lib/shared'; -const features = [ +export const metadata: Metadata = { + alternates: { canonical: '/' }, + openGraph: { images: '/og/home' }, + twitter: { images: '/og/home' }, +}; + +const installCommands = [ + { + label: 'flutter', + command: 'flutter pub add fossui', + toastTitle: 'Install command copied', + toastDescription: 'Fresh UI incoming. Happy building. 🚀', + }, { - icon: Package, - title: 'One import', - description: 'A full set of components from a single package. No per-widget imports.', + label: 'mcp', + command: 'https://mcp.fossui.org', + infoHref: '/docs/mcp', + toastTitle: 'MCP server URL copied', + toastDescription: 'Your AI assistant just leveled up. ⚡', }, { - icon: Palette, - title: 'Themed', - description: 'A single FossThemeData drives color, type, radius, spacing, and motion.', + label: 'skills', + command: 'npx skills add fossui/ai', + toastTitle: 'Skill command copied', + toastDescription: 'Skill unlocked. Go build. 🎉', + }, +]; + +const faqs = [ + { + question: 'Does fossui lock me into MaterialApp or any app shell?', + answer: + 'No wrapper lock-in. FossTheme drops into any app, and context.fossTheme resolves identically under MaterialApp, CupertinoApp, or a bare WidgetsApp.', }, { - icon: Blocks, - title: 'Framework agnostic', - description: 'Works under MaterialApp, CupertinoApp, or a bare WidgetsApp.', + question: 'How lightweight is fossui?', + answer: + 'One runtime dependency, around 314 KB with every component used. Pure Dart, no native code, no bundled icon package.', }, { - icon: ShieldCheck, - title: 'Accessible', - description: 'Semantics, focus, and contrast built in, sized for touch.', + question: 'Does fossui work with AI coding assistants over MCP?', + answer: + 'Yes. The fossui MCP server at mcp.fossui.org works with any MCP client over Streamable HTTP, not just Claude Code. It serves the exact component API so an assistant looks up the real API instead of guessing it.', }, { - icon: Code, - title: 'Pure Dart', - description: 'No native code, one tiny dependency. Nothing else to pull in.', - wide: true, + question: 'Is there an AI coding skill for fossui?', + answer: + 'Yes. Install it with npx skills add fossui/ai, not just for Claude Code, it installs across many AI coding agents. It carries the same idioms as the MCP server so AI-written fossui code compiles and stays on-theme on the first try.', }, ]; +const faqJsonLd = { + '@context': 'https://schema.org', + '@type': 'FAQPage', + mainEntity: faqs.map((faq) => ({ + '@type': 'Question', + name: faq.question, + acceptedAnswer: { '@type': 'Answer', text: faq.answer }, + })), +}; + export default function HomePage() { return ( -
-
-
- Open source, MIT - v0.1.0 -
-

fossui

-

- A Flutter UI kit themed from one source. Framework-agnostic, - accessible, one import. -

-
- - - + The Fresh, Minimal Flutter UI kit. +
- -
-
- {features.map((f) => ( - - + + + +
+
+ Design inspired by{' '} + -
- -
-
- {f.title} - - {f.description} - -
- - - ))} + coss.com/ui + + , Cal.com's design system: a clean, minimal, modern aesthetic on every platform. +
+
+
+
-