Skip to content

Commit 98e256f

Browse files
DevanshuNEUDevanshuNEU
committed
feat(docs): Phase 2 - Add QuickStart and Features pages
New pages: - QuickStartPage: Hosted, Docker, and Manual setup options - SemanticSearchPage: How semantic search works, usage, examples - DependencyAnalysisPage: Graph visualization, reading the graph - ImpactPredictionPage: Blast radius, risk levels, API response - CodeStyleAnalysisPage: Naming conventions, patterns, use cases Updated routing in App.tsx for all new pages Removed AI-looking badges from page headers
1 parent 047c02d commit 98e256f

8 files changed

Lines changed: 949 additions & 11 deletions

File tree

‎frontend/src/App.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ 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 { QuickStartPage } from './pages/QuickStartPage';
12+
import { SemanticSearchPage, DependencyAnalysisPage, ImpactPredictionPage, CodeStyleAnalysisPage } from './pages/features';
1113
import { GitHubCallbackPage } from './pages/GitHubCallbackPage';
1214

1315
function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -66,9 +68,23 @@ function AppRoutes() {
6668

6769
{/* Documentation Routes - Public, no auth required */}
6870
<Route path="/docs" element={<DocsHomePage />} />
71+
<Route path="/docs/quickstart" element={<QuickStartPage />} />
6972
<Route path="/docs/mcp-setup" element={<MCPSetupPage />} />
73+
<Route path="/docs/mcp-tools" element={<MCPSetupPage />} />
74+
<Route path="/docs/mcp-examples" element={<MCPSetupPage />} />
75+
76+
{/* Feature pages */}
77+
<Route path="/docs/features/search" element={<SemanticSearchPage />} />
78+
<Route path="/docs/features/dependencies" element={<DependencyAnalysisPage />} />
79+
<Route path="/docs/features/impact" element={<ImpactPredictionPage />} />
80+
<Route path="/docs/features/style" element={<CodeStyleAnalysisPage />} />
7081

71-
{/* GitHub OAuth Callback - Protected, user must be logged in */}
82+
{/* Placeholder routes for future docs pages */}
83+
<Route path="/docs/api" element={<DocsHomePage />} />
84+
<Route path="/docs/api/*" element={<DocsHomePage />} />
85+
<Route path="/docs/deployment/*" element={<DocsHomePage />} />
86+
<Route path="/docs/architecture" element={<DocsHomePage />} />
87+
<Route path="/docs/contributing/*" element={<DocsHomePage />} />
7288
<Route
7389
path="/github/callback"
7490
element={
@@ -78,12 +94,6 @@ function AppRoutes() {
7894
}
7995
/>
8096

81-
{/* Placeholder routes for future docs pages */}
82-
<Route path="/docs/quickstart" element={<DocsHomePage />} />
83-
<Route path="/docs/mcp-tools" element={<MCPSetupPage />} />
84-
<Route path="/docs/mcp-examples" element={<MCPSetupPage />} />
85-
<Route path="/docs/features/*" element={<DocsHomePage />} />
86-
<Route path="/docs/deployment/*" element={<DocsHomePage />} />
8797

8898
{/* Fallback */}
8999
<Route path="*" element={<Navigate to="/" replace />} />

‎frontend/src/pages/MCPSetupPage.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,6 @@ export function MCPSetupPage() {
2828
{/* Header */}
2929
<div className="mb-8 pb-8 border-b border-white/10">
3030
<div className="flex items-center gap-3 mb-4">
31-
<div className="p-2 bg-blue-500/10 rounded-lg">
32-
<Terminal className="w-5 h-5 text-blue-400" />
33-
</div>
34-
<span className="text-sm text-blue-400 font-medium">MCP Integration</span>
3531
<TimeEstimate minutes={5} />
3632
</div>
3733
<h1 className="text-4xl font-bold text-white mb-4">MCP Setup Guide</h1>

‎frontend/src/pages/QuickStartPage.tsx‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
import {
2+
DocsLayout,
3+
DocsCodeBlock,
4+
DocsCallout,
5+
DocsPrerequisites,
6+
DocsLearningObjectives,
7+
DocsPagination,
8+
TimeEstimate,
9+
Step,
10+
StepList,
11+
TOCItem
12+
} from '@/components/docs'
13+
import { Zap } from 'lucide-react'
14+
15+
const tocItems: TOCItem[] = [
16+
{ id: 'hosted', title: 'Option 1: Hosted (Fastest)', level: 2 },
17+
{ id: 'docker', title: 'Option 2: Docker', level: 2 },
18+
{ id: 'manual', title: 'Option 3: Manual Setup', level: 2 },
19+
{ id: 'next-steps', title: 'Next Steps', level: 2 },
20+
]
21+
22+
export function QuickStartPage() {
23+
return (
24+
<DocsLayout toc={tocItems}>
25+
{/* Header */}
26+
<div className="mb-8 pb-8 border-b border-white/10">
27+
<div className="flex items-center gap-3 mb-4">
28+
<TimeEstimate minutes={5} />
29+
</div>
30+
<h1 className="text-4xl font-bold text-white mb-4">Quick Start</h1>
31+
<p className="text-xl text-gray-400">
32+
Get OpenCodeIntel running and search your first codebase in under 5 minutes.
33+
</p>
34+
</div>
35+
36+
<DocsLearningObjectives items={[
37+
{ text: 'Set up OpenCodeIntel (hosted or self-hosted)' },
38+
{ text: 'Index your first repository' },
39+
{ text: 'Run your first semantic search' },
40+
]} />
41+
42+
<p className="text-gray-300 text-lg leading-relaxed mb-8">
43+
Pick the setup that works for you. Hosted is fastest if you just want to try it out.
44+
Docker is great for local development. Manual gives you the most control.
45+
</p>
46+
47+
{/* Option 1: Hosted */}
48+
<h2 id="hosted" className="text-2xl font-semibold text-white mt-12 mb-4">
49+
Option 1: Hosted (Fastest)
50+
</h2>
51+
<p className="text-gray-300 mb-6">
52+
Zero setup. Just sign in and start searching.
53+
</p>
54+
55+
<StepList>
56+
<Step number={1} title="Go to opencodeintel.com">
57+
<p>
58+
Head to <a href="https://opencodeintel.com" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">opencodeintel.com</a> and
59+
sign in with GitHub.
60+
</p>
61+
</Step>
62+
63+
<Step number={2} title="Add a Repository">
64+
<p>
65+
Click "Add Repository" and paste a GitHub URL. Public repos work immediately.
66+
For private repos, you will need to connect your GitHub account.
67+
</p>
68+
</Step>
69+
70+
<Step number={3} title="Wait for Indexing">
71+
<p>
72+
Indexing takes 30 seconds to a few minutes depending on repo size.
73+
You will see a progress bar. Grab a coffee if it is a big one.
74+
</p>
75+
</Step>
76+
77+
<Step number={4} title="Search">
78+
<p>
79+
Once indexed, type a query like "authentication logic" or "error handling"
80+
and see the magic happen.
81+
</p>
82+
<DocsCallout type="success" title="You are done!">
83+
That is it. You can now search your codebase by meaning, not keywords.
84+
</DocsCallout>
85+
</Step>
86+
</StepList>
87+
88+
{/* Option 2: Docker */}
89+
<h2 id="docker" className="text-2xl font-semibold text-white mt-12 mb-4">
90+
Option 2: Docker
91+
</h2>
92+
<p className="text-gray-300 mb-6">
93+
Run everything locally with one command. Great for development or keeping data on your machine.
94+
</p>
95+
96+
<DocsPrerequisites
97+
defaultOpen={true}
98+
items={[
99+
{ text: 'Docker Desktop installed', href: 'https://www.docker.com/products/docker-desktop/' },
100+
{ text: 'OpenAI API key (for embeddings)' },
101+
{ text: 'Pinecone account (free tier works)', href: 'https://www.pinecone.io/' },
102+
]}
103+
/>
104+
105+
<StepList>
106+
<Step number={1} title="Clone the Repository">
107+
<DocsCodeBlock language="bash">
108+
{`git clone https://github.com/OpenCodeIntel/opencodeintel.git
109+
cd opencodeintel`}
110+
</DocsCodeBlock>
111+
</Step>
112+
113+
<Step number={2} title="Configure Environment">
114+
<DocsCodeBlock language="bash">
115+
{`cp .env.example .env`}
116+
</DocsCodeBlock>
117+
<p>Edit <code className="px-1.5 py-0.5 bg-white/10 rounded text-sm">.env</code> and add your API keys:</p>
118+
<DocsCodeBlock language="bash" filename=".env">
119+
{`OPENAI_API_KEY=sk-...
120+
PINECONE_API_KEY=...
121+
PINECONE_INDEX_NAME=codeintel`}
122+
</DocsCodeBlock>
123+
</Step>
124+
125+
<Step number={3} title="Start the Stack">
126+
<DocsCodeBlock language="bash">
127+
{`docker compose up -d`}
128+
</DocsCodeBlock>
129+
<p>This starts the backend, frontend, and Redis. First run takes a few minutes to build.</p>
130+
</Step>
131+
132+
<Step number={4} title="Open the Dashboard">
133+
<p>
134+
Go to <a href="http://localhost:3000" target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">localhost:3000</a> and
135+
you will see the OpenCodeIntel dashboard.
136+
</p>
137+
<DocsCallout type="info">
138+
Backend API runs on <code>localhost:8000</code>. API docs at <code>localhost:8000/docs</code>.
139+
</DocsCallout>
140+
</Step>
141+
</StepList>
142+
143+
{/* Option 3: Manual */}
144+
<h2 id="manual" className="text-2xl font-semibold text-white mt-12 mb-4">
145+
Option 3: Manual Setup
146+
</h2>
147+
<p className="text-gray-300 mb-6">
148+
Run backend and frontend separately. Best for active development.
149+
</p>
150+
151+
<DocsPrerequisites
152+
items={[
153+
{ text: 'Python 3.11+' },
154+
{ text: 'Node.js 20+ (or Bun)' },
155+
{ text: 'Redis running locally' },
156+
{ text: 'OpenAI and Pinecone API keys' },
157+
]}
158+
/>
159+
160+
<StepList>
161+
<Step number={1} title="Start Redis">
162+
<DocsCodeBlock language="bash">
163+
{`# macOS with Homebrew
164+
brew install redis
165+
brew services start redis
166+
167+
# Or with Docker
168+
docker run -d -p 6379:6379 redis:7-alpine`}
169+
</DocsCodeBlock>
170+
</Step>
171+
172+
<Step number={2} title="Backend Setup">
173+
<DocsCodeBlock language="bash">
174+
{`cd backend
175+
python -m venv venv
176+
source venv/bin/activate # Windows: venv\\Scripts\\activate
177+
pip install -r requirements.txt
178+
179+
# Copy and configure environment
180+
cp .env.example .env
181+
# Edit .env with your API keys
182+
183+
# Run the server
184+
uvicorn main:app --reload`}
185+
</DocsCodeBlock>
186+
<p>Backend will be running on <code className="px-1.5 py-0.5 bg-white/10 rounded text-sm">localhost:8000</code>.</p>
187+
</Step>
188+
189+
<Step number={3} title="Frontend Setup">
190+
<DocsCodeBlock language="bash">
191+
{`cd frontend
192+
bun install
193+
bun run dev`}
194+
</DocsCodeBlock>
195+
<p>Frontend will be running on <code className="px-1.5 py-0.5 bg-white/10 rounded text-sm">localhost:5173</code>.</p>
196+
</Step>
197+
</StepList>
198+
199+
{/* Next Steps */}
200+
<h2 id="next-steps" className="text-2xl font-semibold text-white mt-12 mb-4">
201+
Next Steps
202+
</h2>
203+
<p className="text-gray-300 mb-4">
204+
Now that you have OpenCodeIntel running, here is what to do next:
205+
</p>
206+
<ul className="space-y-2 text-gray-300 mb-8">
207+
<li className="flex items-start gap-2">
208+
<span className="text-blue-400 mt-1">→</span>
209+
<span><strong className="text-white">Connect to Claude:</strong> Set up MCP to give Claude access to your codebase. <a href="/docs/mcp-setup" className="text-blue-400 hover:underline">MCP Setup Guide</a></span>
210+
</li>
211+
<li className="flex items-start gap-2">
212+
<span className="text-blue-400 mt-1">→</span>
213+
<span><strong className="text-white">Explore features:</strong> Learn about dependency graphs, impact analysis, and code style detection. <a href="/docs/features/search" className="text-blue-400 hover:underline">Features</a></span>
214+
</li>
215+
<li className="flex items-start gap-2">
216+
<span className="text-blue-400 mt-1">→</span>
217+
<span><strong className="text-white">Use the API:</strong> Build integrations with the REST API. <a href="/docs/api" className="text-blue-400 hover:underline">API Reference</a></span>
218+
</li>
219+
</ul>
220+
221+
{/* Pagination */}
222+
<DocsPagination
223+
prev={{ title: 'Introduction', href: '/docs' }}
224+
next={{ title: 'MCP Setup', href: '/docs/mcp-setup' }}
225+
/>
226+
</DocsLayout>
227+
)
228+
}

0 commit comments

Comments
 (0)