mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
Code on hanzo.ai was plain monospace: 285 blocks across 200 pages, one of them hand-inked in four greys. components/code now renders each sample at build with shiki and @hanzo/ui's codeTheme (Dracula dark, GitHub Light light), every colour written as light-dark() so the page's color-scheme picks it, on the theme's own ground. The page ships the coloured spans and no highlighter; e2e/gates/code.spec.ts holds both. A client page that shows code is split into a server page.tsx that owns the sample and a client view.tsx that takes the highlighted node: ProductLanding's code.source, the blockchain pages' codeExamples, the models kit Sample, the guest-key card, realtime, analytics, payments, sdks and the rest. Transcripts, agent prompts and ASCII diagrams are not code and keep their markup. Takes @hanzo/ui 8.27.83 for codeTheme and @hanzo/design 0.5.35 with it, regenerates app/gui.css for the new theme keys, and lowers the raw-colour allowance to 58: the samples' literal inks are gone.
97 lines
5.2 KiB
TypeScript
97 lines
5.2 KiB
TypeScript
'use client'
|
|
|
|
import type { ReactNode } from 'react'
|
|
import {
|
|
Plug,
|
|
Cloud,
|
|
Shield,
|
|
Terminal,
|
|
Code2,
|
|
Globe,
|
|
BrainCircuit,
|
|
Layers,
|
|
Sparkles,
|
|
Rocket,
|
|
} from 'lucide-react'
|
|
import { ProductLanding } from '@/components/product/ProductLanding'
|
|
import { ProductFooter } from '@/components/products/ProductFooter'
|
|
import { OSSRevenueBanner } from '@/components/oss/OSSRevenueBanner'
|
|
|
|
const DOCS = 'https://docs.hanzo.ai/docs/mcp'
|
|
const GITHUB = 'https://github.com/hanzoai/mcp'
|
|
const CONSOLE = 'https://platform.hanzo.ai'
|
|
|
|
export default function MCPPage({ source }: { source: ReactNode }) {
|
|
return (
|
|
<>
|
|
<ProductLanding
|
|
badge="Hanzo MCP · Tool server"
|
|
badgeIcon={Plug}
|
|
title="An MCP server with thirteen tools"
|
|
lede="It gives a model a shell, a filesystem, a code index, git, HTTP, and your project's own context, over stdio or streamable HTTP. Point any MCP client at it and the tools show up."
|
|
ctas={[
|
|
{ label: 'Read the docs', href: DOCS, icon: Rocket },
|
|
{ label: 'View on GitHub', href: GITHUB },
|
|
]}
|
|
note={{ icon: Cloud, text: 'Open source, MIT. Same tool names and schemas in TypeScript, Python, and Rust — one API, three runtimes.' }}
|
|
availableThrough={['Claude Desktop', 'Claude Code', 'Cursor', 'Any MCP client']}
|
|
what={{
|
|
eyebrow: 'What is Hanzo MCP',
|
|
title: 'A catalog of 260 collapsed into 13',
|
|
sub: 'A tool list is a prompt. Two hundred entries crowd out the work, and a model picks badly among near-duplicates. So each tool here is one noun with a set of verbs: you call fs with read, or exec with run, and the schema tells the model what the verb needs.',
|
|
pillars: [
|
|
{
|
|
icon: Plug,
|
|
title: 'Seven nouns, always on',
|
|
body: 'fs for bytes and paths. exec for processes. code for symbols. git for history. fetch for HTTP. workspace for the project you are in. ui for components. Six more — think, memory, plan, tasks, mode, and the Hanzo platform itself — are there when you want them.',
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: 'Nothing runs that you did not enable',
|
|
body: 'Community tools shell out to binaries someone else wrote, so they are off until you name them: hanzo-mcp serve --enable-community-cryptuon. Drop tools you do not want with --disable-tools. The default set is the thirteen and nothing else.',
|
|
},
|
|
{
|
|
icon: Cloud,
|
|
title: 'The same tools everywhere',
|
|
body: 'npm, PyPI, and a Rust crate carry the identical tool names and action schemas, so an agent written against one runtime moves to another without relearning its tools.',
|
|
},
|
|
],
|
|
}}
|
|
code={{
|
|
head: { eyebrow: 'Get started', title: 'One config block', sub: 'Use the --package= form. Without it npx resolves "serve" as a separate package and runs an unrelated static-file server instead — on every platform.' },
|
|
lang: 'json',
|
|
source,
|
|
ctas: [
|
|
{ label: 'Read the docs', href: DOCS, icon: Rocket },
|
|
{ label: 'View on GitHub', href: GITHUB },
|
|
],
|
|
}}
|
|
features={{
|
|
eyebrow: 'The tools',
|
|
title: 'What each one does',
|
|
sub: 'Every tool takes an action and the arguments that action needs. These are the verbs.',
|
|
items: [
|
|
{ icon: Layers, title: 'fs', body: 'read, write, stat, list, mkdir, rm, mv, apply_patch, search_text. Bytes and paths, including the patch verb an agent needs to edit a file it did not write whole.' },
|
|
{ icon: Terminal, title: 'exec', body: 'run, background, ps, kill, logs. A command that outlives the call goes to background and you read it back through logs, so a dev server does not hold the turn open.' },
|
|
{ icon: Code2, title: 'code', body: 'parse, search, transform, summarize. Search by symbol rather than by string, so renaming a function finds the callers and not the comments that mention it.' },
|
|
{ icon: Globe, title: 'git and fetch', body: 'git does status, diff, log, commit, branch, stash. fetch does get, post, put, delete, download — the ordinary HTTP verbs, plus the one that writes the body to a file.' },
|
|
{ icon: BrainCircuit, title: 'workspace, think, memory', body: 'workspace answers info, config, env, dependencies about the project you are actually in. think records structured reasoning. memory persists past the session.' },
|
|
{ icon: Sparkles, title: 'ui, plan, tasks, mode, hanzo', body: 'ui lists, searches, fetches and installs components. plan and tasks hold the work. mode switches presets. hanzo reaches IAM, KMS, PaaS, and Commerce.' },
|
|
],
|
|
}}
|
|
finalCta={{
|
|
icon: Plug,
|
|
title: 'Add it to your client',
|
|
sub: 'One block in .mcp.json, or install the binary and run hanzo-mcp serve yourself.',
|
|
buttons: [
|
|
{ label: 'GitHub', href: GITHUB },
|
|
{ label: 'Hanzo Platform', href: CONSOLE },
|
|
],
|
|
}}
|
|
/>
|
|
<OSSRevenueBanner />
|
|
<ProductFooter slug="mcp" name="MCP" />
|
|
</>
|
|
)
|
|
}
|