diff --git a/ai-sdk/credit-agent/.gitignore b/ai-sdk/credit-agent/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/ai-sdk/credit-agent/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/ai-sdk/credit-agent/README.md b/ai-sdk/credit-agent/README.md new file mode 100644 index 0000000..e215bc4 --- /dev/null +++ b/ai-sdk/credit-agent/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/ai-sdk/credit-agent/app/favicon.ico b/ai-sdk/credit-agent/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/ai-sdk/credit-agent/app/favicon.ico differ diff --git a/ai-sdk/credit-agent/app/globals.css b/ai-sdk/credit-agent/app/globals.css new file mode 100644 index 0000000..a2dc41e --- /dev/null +++ b/ai-sdk/credit-agent/app/globals.css @@ -0,0 +1,26 @@ +@import "tailwindcss"; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + +body { + background: var(--background); + color: var(--foreground); + font-family: Arial, Helvetica, sans-serif; +} diff --git a/ai-sdk/credit-agent/app/layout.tsx b/ai-sdk/credit-agent/app/layout.tsx new file mode 100644 index 0000000..f7fa87e --- /dev/null +++ b/ai-sdk/credit-agent/app/layout.tsx @@ -0,0 +1,34 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} + + + ); +} diff --git a/ai-sdk/credit-agent/app/page.tsx b/ai-sdk/credit-agent/app/page.tsx new file mode 100644 index 0000000..295f8fd --- /dev/null +++ b/ai-sdk/credit-agent/app/page.tsx @@ -0,0 +1,65 @@ +import Image from "next/image"; + +export default function Home() { + return ( +
+
+ Next.js logo +
+

+ To get started, edit the page.tsx file. +

+

+ Looking for a starting point or more instructions? Head over to{" "} + + Templates + {" "} + or the{" "} + + Learning + {" "} + center. +

+
+
+ + Vercel logomark + Deploy Now + + + Documentation + +
+
+
+ ); +} diff --git a/ai-sdk/credit-agent/docs/context.md b/ai-sdk/credit-agent/docs/context.md new file mode 100644 index 0000000..2f8f302 --- /dev/null +++ b/ai-sdk/credit-agent/docs/context.md @@ -0,0 +1,276 @@ +# Credit Agent Project Context + +## Project Overview + +**Credit Agent** is a Next.js web application created as part of the RunPod AI SDK examples. This is a **bare-bones starter project** that has been initialized but not yet developed with specific functionality. It serves as a foundation for building an agent-based system, likely for managing or handling credit-related operations. + +**Current Status**: Bootstrap/boilerplate phase - the project contains the default Next.js setup and requires feature development. + +--- + +## Technology Stack + +### Core Technologies + +- **Framework**: [Next.js 16.0.0](https://nextjs.org) - React meta-framework with server-side rendering, API routes, and file-based routing +- **Runtime**: Node.js (server-side) + Browser (client-side) +- **Language**: TypeScript 5.x with strict mode enabled +- **React**: Version 19.2.0 with React Compiler enabled for performance optimization + +### Styling & UI + +- **Tailwind CSS 4.x** - Utility-first CSS framework +- **PostCSS 4.x** - CSS processing via `@tailwindcss/postcss` +- **Fonts**: Geist Sans & Geist Mono (from Vercel, optimized via `next/font`) +- **Dark Mode**: Supported via CSS variables and `prefers-color-scheme` media query + +### Build & Development Tools + +- **Linting**: ESLint 9.x with Next.js specific configs + - Core web vitals rules + - TypeScript support +- **Build Tool**: Next.js built-in bundler (Webpack) +- **Module System**: ES modules with TypeScript JSX support + +### Development Dependencies + +- `babel-plugin-react-compiler@1.0.0` - Enables React Compiler for automatic memoization +- TypeScript with strict type checking (`"strict": true`) +- Type definitions for Node.js, React, and React DOM + +--- + +## Project Structure + +``` +credit-agent/ +├── app/ # Next.js App Router (main application code) +│ ├── page.tsx # Home page component (root route /) +│ ├── layout.tsx # Root layout - wraps all pages with metadata & fonts +│ ├── globals.css # Global styles, CSS variables, theme setup +│ └── favicon.ico # Browser tab icon +│ +├── public/ # Static assets served directly +│ ├── next.svg, vercel.svg, etc # Example SVG assets +│ └── ... +│ +├── docs/ # Documentation +│ └── context.md # This file - shared context for contributors +│ +├── Configuration Files +│ ├── next.config.ts # Next.js configuration (React Compiler enabled) +│ ├── tsconfig.json # TypeScript configuration +│ ├── postcss.config.mjs # PostCSS configuration (Tailwind) +│ ├── eslint.config.mjs # ESLint configuration +│ └── package.json # Dependencies and scripts +│ +├── node_modules/ # Installed dependencies (auto-generated) +├── .next/ # Build output (auto-generated, gitignored) +└── next-env.d.ts # Auto-generated Next.js TypeScript definitions +``` + +--- + +## High-Level Architecture + +### File-Based Routing (Next.js App Router) + +``` +app/page.tsx → GET / (home page) +``` + +Currently, there's only the homepage. New routes can be added by creating files in the `app/` directory. + +### Rendering Strategy + +- **Server-Side Rendering (SSR)** by default for all components +- Metadata defined in `layout.tsx` applies to all pages +- CSS-in-JS via Tailwind CSS + global CSS variables + +### Styling Architecture + +``` +globals.css (CSS variables + Tailwind imports) + ↓ +Tailwind CSS (post-processed) + ↓ +Browser-rendered styles with theme support +``` + +- Light theme: `--background: #ffffff`, `--foreground: #171717` +- Dark theme: `--background: #0a0a0a`, `--foreground: #ededed` +- Automatically switches based on `prefers-color-scheme` media query + +--- + +## Key Concepts for First-Time Contributors + +### 1. **App Router vs Pages Router** + +This project uses the **App Router** (Next.js 13+), which uses: + +- File system-based routing in the `app/` directory +- `layout.tsx` for shared layouts +- React Server Components by default +- **Not** the legacy `pages/` directory + +### 2. **TypeScript Strict Mode** + +All code must pass TypeScript strict mode checks: + +- No implicit `any` types +- Null/undefined must be explicitly handled +- Strict property initialization + +### 3. **Path Aliases** + +Configured in `tsconfig.json`: + +```typescript +"@/*": ["./*"] // Can import from root: import x from "@/app/..." +``` + +### 4. **React Compiler** + +Enabled in `next.config.ts`: + +- Automatically memoizes components and values +- Optimizes performance without manual `React.memo()` or `useMemo()` +- Requires React 19+ + +### 5. **Tailwind CSS v4** + +- Uses `@import "tailwindcss"` in CSS (new directive syntax) +- Supports dark mode via `dark:` prefix +- Responsive design via `sm:`, `md:`, `lg:`, etc. + +### 6. **ESLint Configuration** + +- Uses flat config format (ESLint 9) +- Enforces Next.js best practices and core web vitals +- TypeScript linting rules applied +- Run with: `npm run lint` + +--- + +## Development Workflow + +### Installation & Setup + +```bash +npm install # Install dependencies +npm run dev # Start development server on http://localhost:3000 +npm run build # Create optimized production build +npm start # Run production server +npm run lint # Check code for linting issues +``` + +### Adding New Features + +**Creating a new page:** + +```typescript +// app/dashboard/page.tsx +export default function Dashboard() { + return
Dashboard Page
; +} +``` + +Automatically available at `/dashboard` + +**Adding API routes:** + +```typescript +// app/api/credits/route.ts +export async function GET(req: Request) { + return Response.json({ credits: 100 }); +} +``` + +Available at `/api/credits` + +**Using server components (default):** + +```typescript +// Executes on server only +export default async function MyComponent() { + const data = await fetchFromDB(); + return
{data}
; +} +``` + +**Using client components:** + +```typescript +"use client"; // Mark as client component + +import { useState } from "react"; + +export default function MyComponent() { + const [count, setCount] = useState(0); + return ; +} +``` + +--- + +## Important Notes + +### Currently Incomplete + +- **No backend logic** - This is a UI scaffold +- **No database** - Not yet integrated +- **No authentication** - Not implemented +- **No credit management logic** - Core functionality to be built +- **Placeholder content** - Homepage has default boilerplate text + +### Next Steps for Development + +1. Define the credit agent's purpose and requirements +2. Plan API structure and data models +3. Implement backend endpoints (`app/api/`) +4. Create main agent interface/UI components +5. Add state management if needed (React Context, external library) +6. Implement authentication if required +7. Connect to database/backend services + +### Best Practices to Follow + +- ✅ Use TypeScript for all new code +- ✅ Leverage React Server Components by default (faster, more secure) +- ✅ Use Tailwind CSS for styling (avoid inline styles) +- ✅ Keep components small and focused +- ✅ Add `'use client'` only when interactivity is needed +- ✅ Run `npm run lint` before committing +- ✅ Follow Next.js recommendations in official docs + +### Common Commands + +| Command | Purpose | +| --------------- | ---------------------------------- | +| `npm run dev` | Start dev server (with hot reload) | +| `npm run build` | Create production build | +| `npm run lint` | Check for code issues | +| `npm start` | Run production build | + +--- + +## Resources + +- **Next.js Docs**: https://nextjs.org/docs +- **TypeScript Docs**: https://www.typescriptlang.org/docs/ +- **Tailwind CSS**: https://tailwindcss.com/docs +- **React 19 Docs**: https://react.dev + +--- + +## Git & Version Control + +**Current Status**: Branch is behind `origin/main` by 3 commits (run `git pull` to sync) + +When contributing: + +1. Keep commits focused and well-described +2. Test locally before pushing +3. Follow the project's TypeScript strict mode rules +4. Update this context document if adding new architectural patterns diff --git a/ai-sdk/credit-agent/eslint.config.mjs b/ai-sdk/credit-agent/eslint.config.mjs new file mode 100644 index 0000000..05e726d --- /dev/null +++ b/ai-sdk/credit-agent/eslint.config.mjs @@ -0,0 +1,18 @@ +import { defineConfig, globalIgnores } from "eslint/config"; +import nextVitals from "eslint-config-next/core-web-vitals"; +import nextTs from "eslint-config-next/typescript"; + +const eslintConfig = defineConfig([ + ...nextVitals, + ...nextTs, + // Override default ignores of eslint-config-next. + globalIgnores([ + // Default ignores of eslint-config-next: + ".next/**", + "out/**", + "build/**", + "next-env.d.ts", + ]), +]); + +export default eslintConfig; diff --git a/ai-sdk/credit-agent/next.config.ts b/ai-sdk/credit-agent/next.config.ts new file mode 100644 index 0000000..66e1566 --- /dev/null +++ b/ai-sdk/credit-agent/next.config.ts @@ -0,0 +1,8 @@ +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = { + /* config options here */ + reactCompiler: true, +}; + +export default nextConfig; diff --git a/ai-sdk/credit-agent/package.json b/ai-sdk/credit-agent/package.json new file mode 100644 index 0000000..08fabf2 --- /dev/null +++ b/ai-sdk/credit-agent/package.json @@ -0,0 +1,27 @@ +{ + "name": "credit-agent", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "eslint" + }, + "dependencies": { + "react": "19.2.0", + "react-dom": "19.2.0", + "next": "16.0.0" + }, + "devDependencies": { + "babel-plugin-react-compiler": "1.0.0", + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^19", + "@types/react-dom": "^19", + "@tailwindcss/postcss": "^4", + "tailwindcss": "^4", + "eslint": "^9", + "eslint-config-next": "16.0.0" + } +} diff --git a/ai-sdk/credit-agent/postcss.config.mjs b/ai-sdk/credit-agent/postcss.config.mjs new file mode 100644 index 0000000..61e3684 --- /dev/null +++ b/ai-sdk/credit-agent/postcss.config.mjs @@ -0,0 +1,7 @@ +const config = { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; + +export default config; diff --git a/ai-sdk/credit-agent/public/file.svg b/ai-sdk/credit-agent/public/file.svg new file mode 100644 index 0000000..004145c --- /dev/null +++ b/ai-sdk/credit-agent/public/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ai-sdk/credit-agent/public/globe.svg b/ai-sdk/credit-agent/public/globe.svg new file mode 100644 index 0000000..567f17b --- /dev/null +++ b/ai-sdk/credit-agent/public/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ai-sdk/credit-agent/public/next.svg b/ai-sdk/credit-agent/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/ai-sdk/credit-agent/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ai-sdk/credit-agent/public/vercel.svg b/ai-sdk/credit-agent/public/vercel.svg new file mode 100644 index 0000000..7705396 --- /dev/null +++ b/ai-sdk/credit-agent/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ai-sdk/credit-agent/public/window.svg b/ai-sdk/credit-agent/public/window.svg new file mode 100644 index 0000000..b2b2a44 --- /dev/null +++ b/ai-sdk/credit-agent/public/window.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ai-sdk/credit-agent/tsconfig.json b/ai-sdk/credit-agent/tsconfig.json new file mode 100644 index 0000000..3a13f90 --- /dev/null +++ b/ai-sdk/credit-agent/tsconfig.json @@ -0,0 +1,34 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react-jsx", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".next/dev/types/**/*.ts", + "**/*.mts" + ], + "exclude": ["node_modules"] +}