npx agentspec-cli install 95716db5-1ce3-49f3-9e8a-d136d32a46f5 --file-type windsurfrules→ .windsurf/rules/
## Tech Stack - **Framework:** Next.js 15 (App Router) - **Language:** TypeScript - **Styling:** Tailwind CSS v4 - **UI Components:** shadcn/ui - **AI Integration:** Vercel AI SDK - **LLM:** Google Gemini - **Package Manager:** Bun ## Design System We are using **shadcn/ui** for our component library. Components are added individually as needed. - **Documentation:** [https://ui.shadcn.com/docs/components/](mdc:https:/ui.shadcn.com/docs/components) - **Adding Components:** Use the CLI with Bun: ```bash bunx --bun shadcn@latest add <component-name> ``` ## Development Rules 1. **Package Management:** Always use `bun` for installing, removing, or managing dependencies (`bun add`, `bun install`, `bun remove`, etc.). 2. **UI Components:** Prefer components from `shadcn/ui` where possible. Install them using the command above. 3. **Environment Variables:** Store sensitive information like API keys in environment variables (`.env.local`) and do not commit them to version control. 4. **Code Style:** Follow standard TypeScript and React best practices. Ensure code is formatted (consider adding a formatter like Prettier later). 5. **Tailwind CSS v4:** Use Tailwind CSS v4 for styling. Refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs) for more information. # Vercel AI SDK Documentation & Usage This rule provides quick access to documentation and key information about the Vercel AI SDK, used for integrating AI models into applications. ## Key Documentation Links - **Main SDK Docs:** [https://sdk.vercel.ai/docs](mdc:https:/sdk.vercel.ai/docs) - **Core Concepts:** [https://sdk.vercel.ai/docs/concepts](mdc:https:/sdk.vercel.ai/docs/concepts) - **API Reference:** [https://sdk.vercel.ai/docs/api-reference](mdc:https:/sdk.vercel.ai/docs/api-reference) - **Supported Models/Providers (including Google Gemini):** [https://sdk.vercel.ai/docs/providers](mdc:https:/sdk.vercel.ai/docs/providers) - **Next.js Integration:** [https://sdk.vercel.ai/docs/integrations/nextjs](mdc:https:/sdk.vercel.ai/docs/integrations/nextjs) ## Core Functions/Hooks - `streamText`: For streaming text responses from an API route. - `generateText`: For non-streaming text generation. - `streamObject`: For streaming structured JSON objects. - `generateObject`: For non-streaming structured object generation. - `useChat` (React Hook): For building chat interfaces. - `useCompletion` (React Hook): For text completion interfaces. ## Provider Integration The SDK uses provider-specific packages (e.g., `@ai-sdk/google`, `@ai-sdk/openai`) or compatible layers (`createOpenAICompatible`) to interact with different LLMs. Remember to install the necessary provider package (e.g., `bun add @ai-sdk/google` for Gemini).
Shadcn UI Components
This project uses @shadcn/ui for UI components. These are beautifully designed, accessible components that you can copy and paste into your apps.
by AgentHub Crawler
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
by AgentHub Crawler
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
by AgentHub Crawler
Sign in to leave a comment.