@@ -5,101 +5,80 @@ mode: "custom"
55---
66
77<div className = " landing-page" >
8- <div className = " hero-section" >
9- <div className = " intro-video-section" >
10- <div className = " intro-content-wrapper" >
11- <div className = " intro-content left-aligned" >
12- <h2 className = " intro-title" >
13- Connect your AI applications to the world
14- </h2 >
15- <p className = " intro-description" >
16- AI-enabled tools are powerful, but they're often limited to the
17- information you manually provide or require bespoke integrations.
18- </p >
19- <p className = " intro-description" >
20- Whether it's reading files from your computer, searching through an
21- internal or external knowledge base, or updating tasks in an project
22- management tool, MCP provides a secure, standardized, * simple* way
23- to give AI systems the context they need.
24- </p >
25- </div >
26- <div className = " intro-logo" >
27- <img src = " /mcp.png" alt = " MCP Logo" />
28- </div >
29- </div >
8+ <section className = " intro-video-section" >
9+ <div className = " intro-logo" >
10+ <img src = " /mcp.png" alt = " MCP Logo" />
3011 </div >
31- <div className = " how-section" >
32- <h2 className = " section-title" >How it works</h2 >
33- <div className = " steps-container" >
34- <div className = " step-item" >
35- <div className = " step-content" >
36- <h3 >
37- <span className = " step-number" >1</span > Choose MCP servers
38- </h3 >
39- <p >
40- Pick from pre-built servers for popular tools like GitHub, Google
41- Drive, Slack and hundreds of others. Combine multiple servers for
42- complete workflows, or easily build your own for custom
43- integrations.
44- </p >
45- </div >
46- </div >
47- <div className = " step-connector" ></div >
48- <div className = " step-item" >
49- <div className = " step-content" >
50- <h3 >
51- <span className = " step-number" >2</span > Connect your AI application
52- </h3 >
53- <p >
54- Configure your AI application (like Claude, VS Code, or ChatGPT)
55- to connect to your MCP servers. The application can now see
56- available tools, resources and prompts from all connected servers.
57- </p >
58- </div >
59- </div >
60- <div className = " step-connector" ></div >
61- <div className = " step-item" >
62- <div className = " step-content" >
63- <h3 >
64- <span className = " step-number" >3</span > Work with context
65- </h3 >
66- <p >
67- Your AI-powered application can now access real data, execute
68- actions, and provide more helpful responses based on your actual
69- context.
70- </p >
71- </div >
72- </div >
73- </div >
12+ <div className = " intro-content" >
13+ <h2 className = " intro-title" >Connect your AI applications to the world</h2 >
14+ <p className = " intro-description" >
15+ AI-enabled tools are powerful, but they're often limited to the
16+ information you manually provide or require bespoke integrations.
17+ </p >
18+ <p className = " intro-description" >
19+ Whether it's reading files from your computer, searching through an
20+ internal or external knowledge base, or updating tasks in an project
21+ management tool, MCP provides a secure, standardized, * simple* way to
22+ give AI systems the context they need.
23+ </p >
7424 </div >
75- <div className = " ecosystem-section" >
76- <h2 className = " section-title" >Join a growing ecosystem</h2 >
77- <div className = " stats-container" >
78- <div className = " stats-grid" >
79- <a href = " /docs/sdk" target = " _blank" className = " stat-card" >
80- <div className = " stat-number" >10</div >
81- <div className = " stat-label" >Official SDKs</div >
82- </a >
83- <a
84- href = " https://github.com/modelcontextprotocol/servers?tab=readme-ov-file#%EF%B8%8F-official-integrations"
85- target = " _blank"
86- rel = " noopener noreferrer"
87- className = " stat-card"
88- >
89- <div className = " stat-number" >1000+</div >
90- <div className = " stat-label" >Available Servers</div >
91- </a >
92- <a href = " /clients" target = " _blank" className = " stat-card" >
93- <div className = " stat-number" >80+</div >
94- <div className = " stat-label" >Compatible Clients</div >
95- </a >
96- </div >
25+ </section >
26+ <section className = " how-section" >
27+ <h2 className = " section-title" >How it works</h2 >
28+ <div className = " steps-container" >
29+ <div className = " step-number" >1</div >
30+ <div className = " step-content" >
31+ <h3 >Choose MCP servers</h3 >
32+ <p >
33+ Pick from pre-built servers for popular tools like GitHub, Google
34+ Drive, Slack and hundreds of others. Combine multiple servers for
35+ complete workflows, or easily build your own for custom integrations.
36+ </p >
37+ </div >
38+ <div className = " step-number" >2</div >
39+ <div className = " step-content" >
40+ <h3 >Connect your AI application</h3 >
41+ <p >
42+ Configure your AI application (like Claude, VS Code, or ChatGPT) to
43+ connect to your MCP servers. The application can now see available
44+ tools, resources and prompts from all connected servers.
45+ </p >
9746 </div >
47+ <div className = " step-number" >3</div >
48+ <div className = " step-content" >
49+ <h3 >Work with context</h3 >
50+ <p >
51+ Your AI-powered application can now access real data, execute actions,
52+ and provide more helpful responses based on your actual context.
53+ </p >
54+ </div >
55+ </div >
56+ </section >
57+ <section className = " ecosystem-section" >
58+ <h2 className = " section-title" >Join a growing ecosystem</h2 >
59+ <div className = " stats-grid" >
60+ <a href = " /docs/sdk" target = " _blank" className = " stat-card" >
61+ <div className = " stat-number" >10</div >
62+ <div className = " stat-label" >Official SDKs</div >
63+ </a >
64+ <a href = " /clients" target = " _blank" className = " stat-card" >
65+ <div className = " stat-number" >80+</div >
66+ <div className = " stat-label" >Compatible Clients</div >
67+ </a >
68+ <a
69+ href = " https://github.com/modelcontextprotocol/servers?tab=readme-ov-file#%EF%B8%8F-official-integrations"
70+ target = " _blank"
71+ rel = " noopener noreferrer"
72+ className = " stat-card"
73+ >
74+ <div className = " stat-number" >1000+</div >
75+ <div className = " stat-label" >Available Servers</div >
76+ </a >
9877 </div >
99- </div >
100- <div className = " cta-buttons" >
78+ </section >
79+ <section className = " cta-buttons" >
10180 <a href = " /docs/getting-started/intro" className = " cta-primary" >
10281 Get Started
10382 </a >
104- </div >
83+ </section >
10584</div >
0 commit comments