Skip to content

Commit adef3aa

Browse files
ulises-jeremiasulises-jeremias
committed
Add AI tools integration section and update usage instructions in documentation
1 parent 4fb36e1 commit adef3aa

4 files changed

Lines changed: 129 additions & 3 deletions

File tree

‎src/app/docs/cursor-rules/page.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,29 @@ export default function CursorRulesPage() {
143143
</Card>
144144
</div>
145145

146+
<div className="mt-12 p-6 rounded-lg bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-indigo-600/10 border-blue-500/20">
147+
<h2 className="text-2xl font-bold mb-4">Getting Started</h2>
148+
<p className="mb-4">
149+
To enable Cursor Rules in your new project, use the{' '}
150+
<code className="bg-muted px-1 py-0.5 rounded">--ai-tool</code> flag when creating your project:
151+
</p>
152+
<div className="grid gap-4 md:grid-cols-2">
153+
<div>
154+
<h3 className="font-semibold mb-2">With Cursor Rules</h3>
155+
<div className="bg-background/50 p-3 rounded-lg font-mono text-sm">
156+
<code>npx create-awesome-node-app my-app --ai-tool cursor</code>
157+
</div>
158+
</div>
159+
<div>
160+
<h3 className="font-semibold mb-2">Interactive Mode</h3>
161+
<div className="bg-background/50 p-3 rounded-lg font-mono text-sm">
162+
<code>npx create-awesome-node-app my-app --interactive</code>
163+
</div>
164+
<p className="text-sm text-muted-foreground mt-2">Choose your AI tool preference when prompted</p>
165+
</div>
166+
</div>
167+
</div>
168+
146169
<div className="mt-12 p-6 rounded-lg bg-muted/50 backdrop-blur-sm border border-primary/10">
147170
<h2 className="text-2xl font-bold mb-4">Example Rule Set</h2>
148171
<pre className="bg-background/50 p-4 rounded-lg overflow-x-auto">

‎src/app/docs/github-copilot-instructions/page.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,29 @@ export default function GitHubCopilotInstructionsPage() {
146146
</Card>
147147
</div>
148148

149+
<div className="mt-12 p-6 rounded-lg bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-indigo-600/10 border-blue-500/20">
150+
<h2 className="text-2xl font-bold mb-4">Getting Started</h2>
151+
<p className="mb-4">
152+
To enable GitHub Copilot Instructions in your new project, use the{' '}
153+
<code className="bg-muted px-1 py-0.5 rounded">--ai-tool</code> flag when creating your project:
154+
</p>
155+
<div className="grid gap-4 md:grid-cols-2">
156+
<div>
157+
<h3 className="font-semibold mb-2">With GitHub Copilot Instructions</h3>
158+
<div className="bg-background/50 p-3 rounded-lg font-mono text-sm">
159+
<code>npx create-awesome-node-app my-app --ai-tool copilot</code>
160+
</div>
161+
</div>
162+
<div>
163+
<h3 className="font-semibold mb-2">Interactive Mode</h3>
164+
<div className="bg-background/50 p-3 rounded-lg font-mono text-sm">
165+
<code>npx create-awesome-node-app my-app --interactive</code>
166+
</div>
167+
<p className="text-sm text-muted-foreground mt-2">Choose your AI tool preference when prompted</p>
168+
</div>
169+
</div>
170+
</div>
171+
149172
<div className="mt-12 p-6 rounded-lg bg-muted/50 backdrop-blur-sm border border-primary/10">
150173
<h2 className="text-2xl font-bold mb-4">Example Instruction Set</h2>
151174
<pre className="bg-background/50 p-4 rounded-lg overflow-x-auto">

‎src/app/docs/page.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,47 @@ export default function DocsPage() {
105105
</ul>
106106
</div>
107107

108+
<div className="my-6 rounded-lg border bg-gradient-to-r from-blue-600/10 via-purple-600/10 to-indigo-600/10 border-blue-500/20 p-6">
109+
<h3 className="mb-4 text-xl font-semibold flex items-center gap-2">
110+
<Sparkles className="h-5 w-5 text-blue-500" />
111+
AI Tools Integration
112+
</h3>
113+
<p className="text-muted-foreground mb-4">
114+
Enhance your development workflow with AI-powered assistance. Choose from Cursor Rules or GitHub Copilot
115+
Instructions to get context-aware suggestions and best practices automatically configured in your
116+
project.
117+
</p>
118+
<div className="grid gap-4 md:grid-cols-2">
119+
<div className="bg-background/50 rounded-lg p-4 border border-blue-500/20">
120+
<h4 className="font-semibold mb-2">Using the AI Tool Flag</h4>
121+
<div className="space-y-2 text-sm">
122+
<div className="flex items-center gap-2">
123+
<code className="bg-muted px-2 py-1 rounded text-xs">--ai-tool cursor</code>
124+
<span className="text-muted-foreground">Cursor Rules</span>
125+
</div>
126+
<div className="flex items-center gap-2">
127+
<code className="bg-muted px-2 py-1 rounded text-xs">--ai-tool copilot</code>
128+
<span className="text-muted-foreground">GitHub Copilot</span>
129+
</div>
130+
<div className="flex items-center gap-2">
131+
<code className="bg-muted px-2 py-1 rounded text-xs">--ai-tool none</code>
132+
<span className="text-muted-foreground">No AI tools (default)</span>
133+
</div>
134+
</div>
135+
</div>
136+
<div className="bg-background/50 rounded-lg p-4 border border-blue-500/20">
137+
<h4 className="font-semibold mb-2">Interactive Mode</h4>
138+
<p className="text-sm text-muted-foreground mb-2">
139+
Use <code className="bg-muted px-1 rounded">--interactive</code> to be prompted for your AI tool
140+
preference
141+
</p>
142+
<div className="rounded bg-muted p-2">
143+
<code className="text-xs">npx create-awesome-node-app my-app --interactive</code>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
108149
<h3 className="text-xl font-semibold">Getting Started</h3>
109150
<p>
110151
Using <code>create-awesome-node-app</code> is straightforward. You can create a new project with a single
@@ -218,6 +259,14 @@ export default function DocsPage() {
218259
</td>
219260
<td className="py-2 px-4">Run in interactive mode to select options (default: false)</td>
220261
</tr>
262+
<tr className="border-b">
263+
<td className="py-2 px-4">
264+
<code>--ai-tool &lt;tool&gt;</code>
265+
</td>
266+
<td className="py-2 px-4">
267+
Specify AI tool configuration: cursor, copilot, or none (default: none)
268+
</td>
269+
</tr>
221270
<tr className="border-b">
222271
<td className="py-2 px-4">
223272
<code>--list-templates</code>
@@ -289,6 +338,36 @@ export default function DocsPage() {
289338
</pre>
290339
</div>
291340
</div>
341+
342+
<div>
343+
<p className="font-medium">Create a project with Cursor Rules:</p>
344+
<div className="rounded-md bg-muted p-4 mt-2">
345+
<pre className="text-sm">
346+
<code>npx create-awesome-node-app my-app --ai-tool cursor</code>
347+
</pre>
348+
</div>
349+
</div>
350+
351+
<div>
352+
<p className="font-medium">Create a project with GitHub Copilot Instructions:</p>
353+
<div className="rounded-md bg-muted p-4 mt-2">
354+
<pre className="text-sm">
355+
<code>npx create-awesome-node-app my-app --ai-tool copilot</code>
356+
</pre>
357+
</div>
358+
</div>
359+
360+
<div>
361+
<p className="font-medium">Create a project without AI tools (default):</p>
362+
<div className="rounded-md bg-muted p-4 mt-2">
363+
<pre className="text-sm">
364+
<code>npx create-awesome-node-app my-app --ai-tool none</code>
365+
</pre>
366+
</div>
367+
<p className="text-sm text-muted-foreground mt-1">
368+
Or simply: <code>npx create-awesome-node-app my-app</code>
369+
</p>
370+
</div>
292371
</div>
293372
</section>
294373

‎src/app/page.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -242,14 +242,15 @@ export default async function Home() {
242242
</CardHeader>
243243
<CardContent>
244244
<div className="bg-muted rounded-md p-4 font-mono text-sm overflow-x-auto">
245-
<p className="text-green-500">$ npx create-awesome-node-app \</p>
245+
<p className="text-green-500">$ npx create-awesome-node-app my-app \</p>
246246
<p className="pl-4">--template react-vite-boilerplate \</p>
247-
<p className="pl-4">--addons material-ui github-setup</p>
247+
<p className="pl-4">--addons material-ui github-setup \</p>
248+
<p className="pl-4">--ai-tool copilot</p>
248249
</div>
249250
</CardContent>
250251
<CardFooter>
251252
<p className="text-sm text-muted-foreground">
252-
This will create a React app with Material UI and GitHub setup
253+
This will create a React app with Material UI, GitHub setup, and GitHub Copilot Instructions
253254
</p>
254255
</CardFooter>
255256
</Card>

0 commit comments

Comments
 (0)