Skip to content

Commit 2be9c70

Browse files
DevanshuNEUDevanshuNEU
committed
feat(docs): Phase 2 continued - MCP and Deployment pages
New pages: - MCPToolsPage: Complete reference for all 7 MCP tools with parameters - MCPExamplesPage: Real-world prompt examples organized by use case - DockerSetupPage: Docker Compose setup with env vars and commands - SelfHostingPage: Railway, Fly.io, and VPS deployment guides Updated routing in App.tsx for all new pages
1 parent 98e256f commit 2be9c70

6 files changed

Lines changed: 851 additions & 3 deletions

File tree

‎frontend/src/App.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ import { LandingPage } from './pages/LandingPage';
88
import { Dashboard } from './components/Dashboard';
99
import { DocsHomePage } from './pages/DocsHomePage';
1010
import { MCPSetupPage } from './pages/MCPSetupPage';
11+
import { MCPToolsPage } from './pages/MCPToolsPage';
12+
import { MCPExamplesPage } from './pages/MCPExamplesPage';
1113
import { QuickStartPage } from './pages/QuickStartPage';
1214
import { SemanticSearchPage, DependencyAnalysisPage, ImpactPredictionPage, CodeStyleAnalysisPage } from './pages/features';
15+
import { DockerSetupPage, SelfHostingPage } from './pages/deployment';
1316
import { GitHubCallbackPage } from './pages/GitHubCallbackPage';
1417

1518
function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -70,19 +73,22 @@ function AppRoutes() {
7073
<Route path="/docs" element={<DocsHomePage />} />
7174
<Route path="/docs/quickstart" element={<QuickStartPage />} />
7275
<Route path="/docs/mcp-setup" element={<MCPSetupPage />} />
73-
<Route path="/docs/mcp-tools" element={<MCPSetupPage />} />
74-
<Route path="/docs/mcp-examples" element={<MCPSetupPage />} />
76+
<Route path="/docs/mcp-tools" element={<MCPToolsPage />} />
77+
<Route path="/docs/mcp-examples" element={<MCPExamplesPage />} />
7578

7679
{/* Feature pages */}
7780
<Route path="/docs/features/search" element={<SemanticSearchPage />} />
7881
<Route path="/docs/features/dependencies" element={<DependencyAnalysisPage />} />
7982
<Route path="/docs/features/impact" element={<ImpactPredictionPage />} />
8083
<Route path="/docs/features/style" element={<CodeStyleAnalysisPage />} />
8184

85+
{/* Deployment pages */}
86+
<Route path="/docs/deployment/docker" element={<DockerSetupPage />} />
87+
<Route path="/docs/deployment/self-host" element={<SelfHostingPage />} />
88+
8289
{/* Placeholder routes for future docs pages */}
8390
<Route path="/docs/api" element={<DocsHomePage />} />
8491
<Route path="/docs/api/*" element={<DocsHomePage />} />
85-
<Route path="/docs/deployment/*" element={<DocsHomePage />} />
8692
<Route path="/docs/architecture" element={<DocsHomePage />} />
8793
<Route path="/docs/contributing/*" element={<DocsHomePage />} />
8894
<Route

‎frontend/src/pages/MCPExamplesPage.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import {
2+
DocsLayout,
3+
DocsCallout,
4+
DocsPagination,
5+
TimeEstimate,
6+
TOCItem
7+
} from '@/components/docs'
8+
9+
const tocItems: TOCItem[] = [
10+
{ id: 'onboarding', title: 'Onboarding to New Codebase', level: 2 },
11+
{ id: 'refactoring', title: 'Before Refactoring', level: 2 },
12+
{ id: 'debugging', title: 'Debugging', level: 2 },
13+
{ id: 'code-review', title: 'Code Review', level: 2 },
14+
{ id: 'writing-new-code', title: 'Writing New Code', level: 2 },
15+
{ id: 'documentation', title: 'Documentation', level: 2 },
16+
]
17+
18+
export function MCPExamplesPage() {
19+
return (
20+
<DocsLayout toc={tocItems}>
21+
<div className="mb-8 pb-8 border-b border-white/10">
22+
<div className="flex items-center gap-3 mb-4">
23+
<TimeEstimate minutes={5} />
24+
</div>
25+
<h1 className="text-4xl font-bold text-white mb-4">Example Prompts</h1>
26+
<p className="text-xl text-gray-400">
27+
Real-world prompts for using OpenCodeIntel with Claude. Copy, paste, adapt.
28+
</p>
29+
</div>
30+
31+
<p className="text-gray-300 text-lg leading-relaxed mb-8">
32+
These are actual prompts that work well with OpenCodeIntel. They show how to
33+
leverage semantic search, dependency analysis, and impact prediction in real workflows.
34+
</p>
35+
36+
{/* Onboarding */}
37+
<h2 id="onboarding" className="text-2xl font-semibold text-white mt-12 mb-4">
38+
Onboarding to New Codebase
39+
</h2>
40+
<p className="text-gray-300 mb-6">First day on a new project? Start here.</p>
41+
42+
<PromptCard
43+
title="Architecture Overview"
44+
prompt="Give me an overview of this codebase. What are the main components? How is it structured?"
45+
explanation="Uses get_repository_insights to show file breakdown, critical files, and architecture patterns."
46+
/>
47+
<PromptCard
48+
title="Find Entry Points"
49+
prompt="Search for the main entry points of this application. Where does execution start?"
50+
explanation="Semantic search for 'main entry point', 'app initialization', 'server start'."
51+
/>
52+
<PromptCard
53+
title="Understand Data Flow"
54+
prompt="Show me the dependency graph. I want to understand how different parts of the codebase connect."
55+
explanation="Uses get_dependency_graph to visualize imports and identify hub files."
56+
/>
57+
58+
{/* Refactoring */}
59+
<h2 id="refactoring" className="text-2xl font-semibold text-white mt-12 mb-4">
60+
Before Refactoring
61+
</h2>
62+
<p className="text-gray-300 mb-6">Know what will break before you break it.</p>
63+
64+
<PromptCard
65+
title="Impact Analysis"
66+
prompt="I want to refactor UserService.ts. What is the impact? What files depend on it? What tests cover it?"
67+
explanation="Uses analyze_impact to show dependents, risk level, and related tests."
68+
/>
69+
<PromptCard
70+
title="Find All Usages"
71+
prompt="Search for all places that use the deprecated oldAuth() function. I need to update them all."
72+
explanation="Semantic search finds usages even if function is wrapped or aliased."
73+
/>
74+
<PromptCard
75+
title="Safe to Delete?"
76+
prompt="Is src/utils/legacy.ts safe to delete? What depends on it?"
77+
explanation="Impact analysis shows if anything imports this file."
78+
/>
79+
80+
{/* Debugging */}
81+
<h2 id="debugging" className="text-2xl font-semibold text-white mt-12 mb-4">
82+
Debugging
83+
</h2>
84+
<p className="text-gray-300 mb-6">Find the source of bugs faster.</p>
85+
86+
<PromptCard
87+
title="Find Error Handling"
88+
prompt="Where is error handling implemented in this codebase? I am seeing unhandled exceptions."
89+
explanation="Semantic search for error handling patterns, try/catch blocks, error middleware."
90+
/>
91+
<PromptCard
92+
title="Trace Data Flow"
93+
prompt="How does user data flow from the login form to the database? Show me the path."
94+
explanation="Combines search with dependency analysis to trace the flow."
95+
/>
96+
<PromptCard
97+
title="Find Similar Code"
98+
prompt="Search for code similar to this payment processing logic. Maybe there is a pattern I should follow."
99+
explanation="Semantic search finds conceptually similar code even with different naming."
100+
/>
101+
102+
{/* Code Review */}
103+
<h2 id="code-review" className="text-2xl font-semibold text-white mt-12 mb-4">
104+
Code Review
105+
</h2>
106+
<p className="text-gray-300 mb-6">Review PRs with context.</p>
107+
108+
<PromptCard
109+
title="Check Conventions"
110+
prompt="Does this new code follow the team's coding conventions? Analyze the code style of this repo."
111+
explanation="Uses analyze_code_style to show naming patterns, async style, type usage."
112+
/>
113+
<PromptCard
114+
title="Risk Assessment"
115+
prompt="This PR modifies auth/middleware.py. How risky is this change? What else might break?"
116+
explanation="Impact analysis shows blast radius of the change."
117+
/>
118+
<PromptCard
119+
title="Missing Tests?"
120+
prompt="The PR changes UserService. Are there tests that cover this? What is the test coverage like?"
121+
explanation="Impact analysis includes related test files."
122+
/>
123+
124+
{/* Writing New Code */}
125+
<h2 id="writing-new-code" className="text-2xl font-semibold text-white mt-12 mb-4">
126+
Writing New Code
127+
</h2>
128+
<p className="text-gray-300 mb-6">Write code that fits in.</p>
129+
130+
<PromptCard
131+
title="Match Team Style"
132+
prompt="I need to write a new API endpoint. Show me examples of how existing endpoints are structured in this codebase."
133+
explanation="Search for 'API endpoint' combined with code style analysis."
134+
/>
135+
<PromptCard
136+
title="Find Patterns"
137+
prompt="How does this codebase handle database transactions? I want to follow the same pattern."
138+
explanation="Semantic search for 'database transaction', 'commit', 'rollback'."
139+
/>
140+
<PromptCard
141+
title="Codebase DNA"
142+
prompt="What patterns should I follow when adding new code? Give me the codebase DNA."
143+
explanation="Uses get_codebase_dna to extract architectural patterns and conventions."
144+
/>
145+
146+
{/* Documentation */}
147+
<h2 id="documentation" className="text-2xl font-semibold text-white mt-12 mb-4">
148+
Documentation
149+
</h2>
150+
<p className="text-gray-300 mb-6">Understand and document.</p>
151+
152+
<PromptCard
153+
title="Explain a Module"
154+
prompt="Explain what the src/services/billing/ module does. Give me a high-level overview."
155+
explanation="Search within the module combined with dependency analysis."
156+
/>
157+
<PromptCard
158+
title="Generate Docs"
159+
prompt="I need to write documentation for the API. Search for all API routes and their handlers."
160+
explanation="Semantic search for 'API route', 'endpoint', 'handler'."
161+
/>
162+
163+
<DocsCallout type="tip">
164+
These prompts work best when you have already indexed your repository.
165+
The more code indexed, the better the results.
166+
</DocsCallout>
167+
168+
<DocsPagination
169+
prev={{ title: 'MCP Tools', href: '/docs/mcp-tools' }}
170+
next={{ title: 'Semantic Search', href: '/docs/features/search' }}
171+
/>
172+
</DocsLayout>
173+
)
174+
}
175+
176+
function PromptCard({ title, prompt, explanation }: { title: string; prompt: string; explanation: string }) {
177+
return (
178+
<div className="mb-4 p-4 bg-white/[0.02] border border-white/10 rounded-lg">
179+
<h4 className="font-medium text-white mb-2">{title}</h4>
180+
<p className="text-blue-400 mb-2 italic">"{prompt}"</p>
181+
<p className="text-sm text-gray-500">{explanation}</p>
182+
</div>
183+
)
184+
}

0 commit comments

Comments
 (0)