import { Card } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Heading } from "@/components/typography/heading" import { CursorPrompt } from "./cursor-prompt" export default async function GetStartedConvex() { const hasConvexConfig = Boolean(process.env.CONVEX_DEPLOYMENT) const cursorPrompt = `Add a new table to convex/schema.ts. For example, to add a posts table:\n\n\`\`\`typescript\nposts: defineTable({\n title: v.string(),\n content: v.string(),\n createdAt: v.number(),\n})\n\`\`\`\n\n[ Describe the table you want to add here... ]\n\nThen run \`npx convex codegen\` to update your generated types.` if (!hasConvexConfig) { return (
Setup Required: Convex Database

To finish setting up Convex, add your CONVEX_DEPLOYMENT to your .env file:

  1. Get your deploy key from the{" "} Convex Dashboard .
  2. Add it to your .env file as: 
                    {`CONVEX_DEPLOYMENT=your_deploy_key_here`}
  3. Restart your development server after adding the environment variable.
Next: Add Your First Table

To finish setting up Convex, add your own table to convex/schema.ts:

  1. Open convex/schema.ts and add a new table. For example: 
                      {`posts: defineTable({\n  title: v.string(),\n  content: v.string(),\n  createdAt: v.number(),\n})`}
  2. Run npx convex codegen to update your generated types.
  3. (Optional) Use this prompt in Cursor or your LLM: 
                      {`Add a new table to convex/schema.ts for blog posts with fields: title (string), content (string), createdAt (number)`}
) } return (
✓ Convex is configured!

Your database is ready to use. You can now:

  • Create and manage Convex tables through schema.ts
  • Write queries and mutations in your Convex functions
  • Set up real-time subscriptions
  • Use optimistic updates for better UX

Tip: You can manage your Convex project, monitor queries, and view your data in the{" "} Convex Dashboard

) }