From b27e143ef7fb4dcf4da621998636c7cc843da982 Mon Sep 17 00:00:00 2001 From: Jack Herrington Date: Mon, 15 Dec 2025 13:23:12 -0800 Subject: [PATCH] TanStack AI features --- frameworks/react-cra/add-ons/clerk/info.json | 1 + .../react-cra/add-ons/compiler/info.json | 1 + frameworks/react-cra/add-ons/convex/info.json | 1 + frameworks/react-cra/add-ons/db/info.json | 1 + .../react-cra/add-ons/drizzle/info.json | 1 + frameworks/react-cra/add-ons/form/info.json | 1 + frameworks/react-cra/add-ons/mcp/info.json | 1 + .../add-ons/module-federation/info.json | 1 + frameworks/react-cra/add-ons/neon/info.json | 1 + frameworks/react-cra/add-ons/oRPC/info.json | 1 + frameworks/react-cra/add-ons/prisma/info.json | 1 + frameworks/react-cra/add-ons/sentry/info.json | 1 + frameworks/react-cra/add-ons/shadcn/info.json | 1 + frameworks/react-cra/add-ons/start/info.json | 1 + frameworks/react-cra/add-ons/store/info.json | 1 + .../react-cra/add-ons/storybook/info.json | 1 + frameworks/react-cra/add-ons/strapi/info.json | 1 + frameworks/react-cra/add-ons/t3env/info.json | 1 + frameworks/react-cra/add-ons/tRPC/info.json | 1 + frameworks/react-cra/add-ons/table/info.json | 1 + .../add-ons/tanstack-query/info.json | 1 + frameworks/react-cra/add-ons/workos/info.json | 1 + .../react-cra/examples/tanchat/info.json | 1 + .../react-cra/hosts/cloudflare/info.json | 1 + frameworks/react-cra/hosts/netlify/info.json | 1 + frameworks/react-cra/hosts/nitro/info.json | 1 + frameworks/react-cra/src/checksum.ts | 2 +- .../react-cra/toolchains/biome/info.json | 1 + .../react-cra/toolchains/eslint/info.json | 1 + frameworks/solid/add-ons/convex/info.json | 1 + frameworks/solid/add-ons/form/info.json | 1 + .../solid/add-ons/module-federation/info.json | 1 + frameworks/solid/add-ons/sentry/info.json | 1 + frameworks/solid/add-ons/solid-ui/info.json | 1 + frameworks/solid/add-ons/start/info.json | 1 + frameworks/solid/add-ons/store/info.json | 1 + frameworks/solid/add-ons/strapi/info.json | 1 + frameworks/solid/add-ons/t3env/info.json | 1 + .../solid/add-ons/tanstack-query/info.json | 1 + frameworks/solid/hosts/cloudflare/info.json | 1 + frameworks/solid/hosts/netlify/info.json | 1 + frameworks/solid/hosts/nitro/info.json | 1 + frameworks/solid/src/checksum.ts | 2 +- frameworks/solid/toolchains/biome/info.json | 1 + frameworks/solid/toolchains/eslint/info.json | 1 + packages/cta-engine/src/types.ts | 1 + packages/cta-ui-base/package.json | 12 +- .../src/components/ai-chat-dialog.tsx | 359 +++++ .../src/components/ai-voice-dialog.tsx | 439 ++++++ .../src/components/ai-voice-orb.tsx | 170 +++ .../src/components/cta-sidebar.tsx | 51 +- .../components/sidebar-items/project-name.tsx | 5 +- .../src/hooks/use-audio-recorder.ts | 135 ++ packages/cta-ui-base/src/hooks/use-tts.ts | 188 +++ .../cta-ui-base/src/hooks/use-vad-recorder.ts | 190 +++ packages/cta-ui-base/src/index.ts | 14 + packages/cta-ui-base/src/lib/ai-tools.ts | 36 + packages/cta-ui-base/src/lib/api.ts | 26 + packages/cta-ui-base/src/types.d.ts | 1 + packages/cta-ui/lib/ai-tools.ts | 37 + packages/cta-ui/lib/index.ts | 241 +++ packages/cta-ui/package.json | 7 +- pnpm-lock.yaml | 1351 ++++++++++++++++- 63 files changed, 3298 insertions(+), 12 deletions(-) create mode 100644 packages/cta-ui-base/src/components/ai-chat-dialog.tsx create mode 100644 packages/cta-ui-base/src/components/ai-voice-dialog.tsx create mode 100644 packages/cta-ui-base/src/components/ai-voice-orb.tsx create mode 100644 packages/cta-ui-base/src/hooks/use-audio-recorder.ts create mode 100644 packages/cta-ui-base/src/hooks/use-tts.ts create mode 100644 packages/cta-ui-base/src/hooks/use-vad-recorder.ts create mode 100644 packages/cta-ui-base/src/lib/ai-tools.ts create mode 100644 packages/cta-ui/lib/ai-tools.ts diff --git a/frameworks/react-cra/add-ons/clerk/info.json b/frameworks/react-cra/add-ons/clerk/info.json index 72097ae6..86f19d76 100644 --- a/frameworks/react-cra/add-ons/clerk/info.json +++ b/frameworks/react-cra/add-ons/clerk/info.json @@ -1,6 +1,7 @@ { "name": "Clerk", "description": "Add Clerk authentication to your application.", + "aiDescription": "Clerk is a complete authentication and user management platform optimized for React applications. It provides drop-in UI components for sign-up, sign-in, and user profiles that are fully customizable. Key features include: passwordless authentication (magic links, OTP), social login with 20+ providers (Google, GitHub, Discord, etc.), multi-factor authentication (TOTP, SMS, backup codes), and organization/team management for B2B apps. Clerk handles session management, JWT tokens, and provides React hooks like useUser() and useAuth() for easy access to auth state. Choose Clerk when you want a polished developer experience with beautiful default UI, extensive social provider support, and don't need deep enterprise SSO integration. Clerk excels at consumer-facing apps and developer tools. It includes built-in user profile pages, email verification, and can sync user data to your database via webhooks.", "phase": "add-on", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/react-cra/add-ons/compiler/info.json b/frameworks/react-cra/add-ons/compiler/info.json index 58e63ed4..c2da5abb 100644 --- a/frameworks/react-cra/add-ons/compiler/info.json +++ b/frameworks/react-cra/add-ons/compiler/info.json @@ -2,6 +2,7 @@ "name": "Compiler", "phase": "setup", "description": "Add React Compiler", + "aiDescription": "React Compiler (formerly React Forget) is an experimental build-time optimization that automatically memoizes your React components and hooks. It eliminates the need for manual useMemo, useCallback, and React.memo calls by analyzing your code and inserting memoization where beneficial. The compiler understands React's rules (like hooks rules and component purity) and optimizes re-renders automatically. Enable this when you want automatic performance optimization without manual memoization boilerplate. It's particularly valuable for large applications with complex component trees where manual optimization is tedious. Note: React Compiler is still experimental and may have edge cases. It works best with idiomatic React code that follows best practices. The compiler integrates via a Babel plugin and requires no runtime changes to your code.", "link": "https://react.dev/learn/react-compiler", "modes": ["code-router", "file-router"], "type": "add-on", diff --git a/frameworks/react-cra/add-ons/convex/info.json b/frameworks/react-cra/add-ons/convex/info.json index 1e07758b..2ba4889c 100644 --- a/frameworks/react-cra/add-ons/convex/info.json +++ b/frameworks/react-cra/add-ons/convex/info.json @@ -1,6 +1,7 @@ { "name": "Convex", "description": "Add the Convex database to your application.", + "aiDescription": "Convex is a reactive backend-as-a-service that combines a real-time database, serverless functions, and file storage into one platform. Unlike traditional databases, Convex automatically syncs data to all connected clients in real-time—when one user makes a change, all other users see it instantly without polling or manual subscriptions. Key features: TypeScript-first with end-to-end type safety from database to UI, automatic caching and optimistic updates, built-in file storage, scheduled functions (cron jobs), and ACID transactions. Convex uses a document-based data model similar to MongoDB but with a relational-like query system. Choose Convex when building collaborative apps (docs, whiteboards, chat), real-time dashboards, or any app where instant data sync matters. It eliminates the need for separate database, API layer, and WebSocket infrastructure. Trade-off: Convex is a managed service with its own query language, so you're committed to their platform.", "link": "https://convex.dev", "phase": "add-on", "type": "add-on", diff --git a/frameworks/react-cra/add-ons/db/info.json b/frameworks/react-cra/add-ons/db/info.json index 63f22173..2a8e7cde 100644 --- a/frameworks/react-cra/add-ons/db/info.json +++ b/frameworks/react-cra/add-ons/db/info.json @@ -1,6 +1,7 @@ { "name": "DB", "description": "TanStack DB", + "aiDescription": "TanStack DB is a reactive client-side database and sync engine for building local-first applications. It provides a reactive data layer that keeps your UI in sync with data changes, supports offline-first patterns, and can sync with various backends. Key features: fine-grained reactivity (only re-render what changed), optimistic updates with automatic rollback, collection-based data organization, and built-in support for live queries. TanStack DB works as a client-side cache that can persist to IndexedDB and sync with your server. Choose TanStack DB when building apps that need to work offline, require instant UI updates, or want to reduce server round-trips. It integrates seamlessly with TanStack Query for server state and TanStack Start for SSR. Note: TanStack DB is newer and still evolving—it's ideal for teams who want a TanStack-native solution for reactive local state.", "phase": "add-on", "type": "add-on", "priority": 48, diff --git a/frameworks/react-cra/add-ons/drizzle/info.json b/frameworks/react-cra/add-ons/drizzle/info.json index 771411bd..16928128 100644 --- a/frameworks/react-cra/add-ons/drizzle/info.json +++ b/frameworks/react-cra/add-ons/drizzle/info.json @@ -1,6 +1,7 @@ { "name": "Drizzle", "description": "Add Drizzle ORM to your application.", + "aiDescription": "Drizzle is a lightweight, TypeScript-first ORM that prioritizes SQL-like syntax and minimal abstraction. Unlike Prisma which uses its own query language, Drizzle queries look almost identical to SQL—if you know SQL, you know Drizzle. Key features: zero dependencies, exceptional TypeScript inference (your schema IS your types), support for PostgreSQL/MySQL/SQLite, relational queries with automatic joins, and a migrations system. Drizzle is significantly smaller than Prisma (~7KB vs ~2MB) and has no query engine overhead, making it faster for serverless deployments with cold starts. Choose Drizzle when you want SQL-like control, minimal bundle size, or are deploying to edge/serverless environments where cold start matters. Drizzle requires more manual schema definition but gives you precise control over your queries. It's the choice for developers who think in SQL and want type safety without magic.", "phase": "add-on", "type": "add-on", "priority": 46, diff --git a/frameworks/react-cra/add-ons/form/info.json b/frameworks/react-cra/add-ons/form/info.json index 5ae4a9ef..43f78ec2 100644 --- a/frameworks/react-cra/add-ons/form/info.json +++ b/frameworks/react-cra/add-ons/form/info.json @@ -1,6 +1,7 @@ { "name": "Form", "description": "TanStack Form", + "aiDescription": "TanStack Form is a headless, framework-agnostic form library focused on performance and flexibility. It provides first-class TypeScript support with inferred types from your form schema, field-level and form-level validation (sync and async), and fine-grained reactivity that only re-renders changed fields. Key features: built-in validation adapter support (Zod, Valibot, Yup), nested object and array fields, dependent field validation, and submission handling with loading states. Unlike React Hook Form which uses uncontrolled inputs by default, TanStack Form gives you explicit control over form state. Choose TanStack Form when you need complex form logic, dynamic field arrays, or want validation library flexibility. It integrates with TanStack Query for async validation and submission. The headless design means you bring your own UI components—pair it with Shadcn for beautiful accessible form elements.", "phase": "add-on", "type": "add-on", "priority": 44, diff --git a/frameworks/react-cra/add-ons/mcp/info.json b/frameworks/react-cra/add-ons/mcp/info.json index e665a19e..fc4ab05e 100644 --- a/frameworks/react-cra/add-ons/mcp/info.json +++ b/frameworks/react-cra/add-ons/mcp/info.json @@ -2,6 +2,7 @@ "name": "MCP", "phase": "setup", "description": "Add Model Context Protocol (MCP) support.", + "aiDescription": "Model Context Protocol (MCP) is an open standard for connecting AI assistants to external data sources and tools. This add-on sets up your application as an MCP server, allowing AI assistants (like Claude, Cursor, or other MCP-compatible tools) to interact with your app's data and functionality. Key features: expose your app's data to AI assistants, define tools that AI can invoke, enable AI-powered automation of app functions. Use cases include: letting an AI assistant manage todos in your app, querying your database through natural language, or building AI-powered admin interfaces. Choose MCP when you want to make your application's functionality accessible to AI assistants. Note: MCP is an emerging standard—this implementation provides a foundation that may evolve. The integration requires TanStack Start for server-side routes.", "link": "https://mcp.dev", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/react-cra/add-ons/module-federation/info.json b/frameworks/react-cra/add-ons/module-federation/info.json index c763ee73..d5f8df46 100644 --- a/frameworks/react-cra/add-ons/module-federation/info.json +++ b/frameworks/react-cra/add-ons/module-federation/info.json @@ -1,6 +1,7 @@ { "name": "Module Federation", "description": "Module Federation", + "aiDescription": "Module Federation is a webpack/Vite feature that enables micro-frontend architecture by allowing separately deployed applications to share code at runtime. Instead of building a monolith or using iframes, federated modules let you split your app into independent deployable units that load each other's components dynamically. Key features: runtime code sharing (no rebuild needed when dependencies update), shared dependencies to avoid duplication, bi-directional sharing (apps can both consume and expose modules), and version negotiation for shared libraries. Choose Module Federation when you have multiple teams working on different parts of a large application, need independent deployment cycles, or want to incrementally migrate a legacy app. It's ideal for enterprise applications, design systems shared across apps, or A/B testing different implementations. Trade-offs: adds complexity to builds and debugging, requires careful dependency version management.", "phase": "add-on", "modes": ["code-router"], "link": "https://module-federation.io/", diff --git a/frameworks/react-cra/add-ons/neon/info.json b/frameworks/react-cra/add-ons/neon/info.json index 7ccd20c8..d5011fdc 100644 --- a/frameworks/react-cra/add-ons/neon/info.json +++ b/frameworks/react-cra/add-ons/neon/info.json @@ -1,6 +1,7 @@ { "name": "Neon", "description": "Add the Neon database to your application.", + "aiDescription": "Neon is a serverless PostgreSQL database designed for modern cloud applications. Its killer feature is database branching—you can create instant copy-on-write branches of your database for development, testing, or preview deployments, just like git branches for code. Key features: scales to zero (no charges when idle), instant branching with no storage duplication, automatic connection pooling via their serverless driver, and a generous free tier. Neon separates storage from compute, allowing independent scaling and instant cold starts. Choose Neon when you want PostgreSQL compatibility with serverless scaling, need database branches for CI/CD or preview deployments, or want to minimize costs for variable workloads. It works great with Drizzle or Prisma for type-safe queries. Neon provides both standard PostgreSQL connections and an HTTP-based serverless driver optimized for edge functions with minimal latency.", "link": "https://neon.com", "phase": "add-on", "type": "add-on", diff --git a/frameworks/react-cra/add-ons/oRPC/info.json b/frameworks/react-cra/add-ons/oRPC/info.json index 47219344..7b475964 100644 --- a/frameworks/react-cra/add-ons/oRPC/info.json +++ b/frameworks/react-cra/add-ons/oRPC/info.json @@ -1,6 +1,7 @@ { "name": "oRPC", "description": "Integrate oRPC into your application.", + "aiDescription": "oRPC is a modern TypeScript RPC framework and a next-generation alternative to tRPC. It provides end-to-end type safety between your server and client, but with a focus on OpenAPI compatibility and standards compliance. Key differences from tRPC: oRPC generates OpenAPI specs automatically (great for external API consumers), supports standard HTTP semantics (GET/POST/PUT/DELETE), has built-in file upload handling, and works with any HTTP client. Key features: type-safe client generation, middleware support, input/output validation with Zod, and contract-first development option. Choose oRPC when you need both internal type-safe RPC AND external REST API access, want OpenAPI documentation, or prefer standards-based HTTP over custom protocols. It integrates with TanStack Query for client-side caching. oRPC is ideal for public APIs that also serve your own frontend.", "phase": "add-on", "modes": ["file-router"], "link": "https://orpc.unnoq.com/", diff --git a/frameworks/react-cra/add-ons/prisma/info.json b/frameworks/react-cra/add-ons/prisma/info.json index 3beca1c4..05f61768 100644 --- a/frameworks/react-cra/add-ons/prisma/info.json +++ b/frameworks/react-cra/add-ons/prisma/info.json @@ -1,6 +1,7 @@ { "name": "Prisma", "description": "Add Prisma Postgres, or Prisma ORM with other DBs to your application.", + "aiDescription": "Prisma is a full-featured ORM with a focus on developer experience and type safety. It uses a declarative schema language (schema.prisma) to define your data model, then generates a fully-typed client. Key features: intuitive data modeling with relations, automatic migrations, Prisma Studio for visual data browsing, and excellent VS Code integration. Prisma's query API is more abstracted than SQL—you work with objects and relations rather than raw queries. Choose Prisma when you want maximum productivity, are building data-heavy applications, or need visual database tools. It supports PostgreSQL, MySQL, SQLite, SQL Server, MongoDB, and CockroachDB. Trade-offs: larger bundle size and query engine overhead compared to Drizzle, which can impact serverless cold starts. Prisma also offers Prisma Postgres—their managed PostgreSQL with connection pooling and an accelerate cache layer.", "phase": "add-on", "type": "add-on", "priority": 120, diff --git a/frameworks/react-cra/add-ons/sentry/info.json b/frameworks/react-cra/add-ons/sentry/info.json index 35f0b851..7c7b2284 100644 --- a/frameworks/react-cra/add-ons/sentry/info.json +++ b/frameworks/react-cra/add-ons/sentry/info.json @@ -2,6 +2,7 @@ "name": "Sentry", "phase": "setup", "description": "Add Sentry for error monitoring, tracing, and session replays (requires Start).", + "aiDescription": "Sentry is an application monitoring platform that captures errors, performance data, and user sessions. It goes beyond simple error logging—you get full stack traces with source maps, breadcrumbs showing user actions before errors, release tracking, and performance monitoring. Key features: automatic error capture for React (including component tree), distributed tracing across frontend and backend, session replays to see exactly what users experienced, and alerts/integrations for Slack/PagerDuty/etc. Sentry helps you answer 'what went wrong?' and 'how often?' with minimal debugging effort. Choose Sentry when you need production error visibility, want to track performance regressions, or need session replays for debugging user-reported issues. It's essential for any production app where you can't reproduce bugs locally. The integration sets up both client and server-side error capture with TanStack Start.", "link": "https://sentry.com/", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/react-cra/add-ons/shadcn/info.json b/frameworks/react-cra/add-ons/shadcn/info.json index d53c446c..b77ba835 100644 --- a/frameworks/react-cra/add-ons/shadcn/info.json +++ b/frameworks/react-cra/add-ons/shadcn/info.json @@ -1,6 +1,7 @@ { "name": "Shadcn", "description": "Add Shadcn UI to your application.", + "aiDescription": "Shadcn UI is not a component library you install—it's a collection of beautifully designed, accessible components that you copy into your project and own. Built on Radix UI primitives and styled with Tailwind CSS, it provides the best of both worlds: professional design and full customization control. Key features: accessible by default (ARIA compliant), dark mode support, customizable themes via CSS variables, and components you can modify directly. Unlike traditional UI libraries, updates don't break your customizations because the code is yours. Choose Shadcn when you want beautiful, accessible components but need to customize them heavily, don't want to fight library abstractions, or want consistent design across your app. It includes form inputs, dialogs, dropdowns, data tables, and more. Shadcn is the foundation for most TanStack Create App add-ons that need UI components.", "phase": "add-on", "modes": ["file-router", "code-router"], "link": "https://ui.shadcn.com/", diff --git a/frameworks/react-cra/add-ons/start/info.json b/frameworks/react-cra/add-ons/start/info.json index 976cf247..ed38d203 100644 --- a/frameworks/react-cra/add-ons/start/info.json +++ b/frameworks/react-cra/add-ons/start/info.json @@ -2,6 +2,7 @@ "name": "Start", "phase": "setup", "description": "Add TanStack Start for SSR, API endpoints, and more.", + "aiDescription": "TanStack Start transforms your TanStack Router app into a full-stack framework with server-side rendering (SSR), server functions, and API routes. It's the 'meta-framework' layer that enables building complete applications, not just SPAs. Key features: SSR with streaming support, server functions (RPC-style calls from client to server), API routes for REST endpoints, file-based routing with loaders and actions, and multiple rendering strategies (SSR, SPA, static). Start uses Vinxi under the hood and supports deployment to Node.js, Cloudflare, Netlify, Vercel, and more. Choose TanStack Start when you need SEO (SSR), want server-side data loading, need API endpoints, or want to use add-ons like Prisma/Drizzle that require server access. Start is required for most database integrations, authentication flows, and any server-side logic. It's the foundation that enables the full-stack add-ons in this list.", "link": "https://tanstack.com/start/latest", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/react-cra/add-ons/store/info.json b/frameworks/react-cra/add-ons/store/info.json index dbc1538c..577236cb 100644 --- a/frameworks/react-cra/add-ons/store/info.json +++ b/frameworks/react-cra/add-ons/store/info.json @@ -1,6 +1,7 @@ { "name": "Store", "description": "Add TanStack Store to your application.", + "aiDescription": "TanStack Store is a lightweight, framework-agnostic state management library for client-side state. Unlike Redux or Zustand, TanStack Store is designed for fine-grained reactivity—components only re-render when the specific state they use changes. Key features: no boilerplate (just create a store and use it), derived state with automatic dependency tracking, actions as simple methods, and devtools for debugging. TanStack Store is intentionally minimal—it's not trying to replace server state solutions like TanStack Query, but complement them for UI state like modals, themes, or local preferences. Choose TanStack Store when you need simple, performant client state without the ceremony of Redux or the complexity of state machines. It's perfect for form state, UI toggles, or any local state that doesn't come from the server.", "phase": "add-on", "link": "https://tanstack.com/store/latest", "type": "add-on", diff --git a/frameworks/react-cra/add-ons/storybook/info.json b/frameworks/react-cra/add-ons/storybook/info.json index 96fab6cb..1b841a1e 100644 --- a/frameworks/react-cra/add-ons/storybook/info.json +++ b/frameworks/react-cra/add-ons/storybook/info.json @@ -1,6 +1,7 @@ { "name": "Storybook", "description": "Integrate Storybook into your application.", + "aiDescription": "Storybook is a development environment for building, documenting, and testing UI components in isolation. It renders your components outside of your main app, letting you develop them without running the full application or setting up complex state. Key features: component stories that capture different states, visual testing and interaction testing, automatic documentation generation, and accessibility checks. Storybook serves as living documentation for your component library and enables visual regression testing with tools like Chromatic. Choose Storybook when building a design system, working on a team that needs component documentation, want visual testing for UI components, or want to develop components in isolation without app context. It's invaluable for component libraries and large teams where designers and developers need a shared component catalog.", "phase": "add-on", "modes": ["file-router"], "link": "https://storybook.js.org/", diff --git a/frameworks/react-cra/add-ons/strapi/info.json b/frameworks/react-cra/add-ons/strapi/info.json index 96c10f07..fbd4aa54 100644 --- a/frameworks/react-cra/add-ons/strapi/info.json +++ b/frameworks/react-cra/add-ons/strapi/info.json @@ -1,6 +1,7 @@ { "name": "Strapi", "description": "Use the Strapi CMS to manage your content.", + "aiDescription": "Strapi is a headless CMS that lets non-developers manage content through an admin UI while developers consume it via REST or GraphQL APIs. Unlike WordPress, Strapi is 'headless'—it only provides the content API, you build your own frontend. Key features: customizable content types builder, role-based access control, media library, internationalization (i18n), and a plugin ecosystem. Strapi can run self-hosted (Node.js) or via Strapi Cloud. Choose Strapi when you have content that needs to be edited by non-developers (blogs, marketing pages, product catalogs), want to decouple content management from code deployments, or need a CMS that's more developer-friendly than WordPress. The integration sets up a Strapi client for fetching content. You'll need to set up a Strapi instance separately—either locally or on Strapi Cloud.", "link": "https://strapi.io/", "phase": "add-on", "type": "add-on", diff --git a/frameworks/react-cra/add-ons/t3env/info.json b/frameworks/react-cra/add-ons/t3env/info.json index a8d970a3..ff2c900d 100644 --- a/frameworks/react-cra/add-ons/t3env/info.json +++ b/frameworks/react-cra/add-ons/t3env/info.json @@ -1,6 +1,7 @@ { "name": "T3Env", "description": "Add type safety to your environment variables", + "aiDescription": "T3 Env provides type-safe environment variables with runtime validation. Instead of accessing process.env directly (which is always string | undefined), T3 Env validates your env vars at startup and gives you typed access. Key features: Zod-based validation, separate client and server env vars (prevents accidentally exposing secrets), build-time checking with TypeScript, and clear error messages when required vars are missing. Choose T3 Env when you want to catch missing or invalid environment variables before they cause runtime errors, need to ensure sensitive vars don't leak to the client, or want IDE autocomplete for your env vars. It's particularly valuable for teams where env var misconfigurations are a common source of deployment issues. The integration sets up a typed env.ts file that validates and exports your environment variables.", "phase": "add-on", "type": "add-on", "priority": 29, diff --git a/frameworks/react-cra/add-ons/tRPC/info.json b/frameworks/react-cra/add-ons/tRPC/info.json index c816edc3..5c08061d 100644 --- a/frameworks/react-cra/add-ons/tRPC/info.json +++ b/frameworks/react-cra/add-ons/tRPC/info.json @@ -1,6 +1,7 @@ { "name": "tRPC", "description": "Integrate tRPC into your application.", + "aiDescription": "tRPC enables end-to-end type safety between your React frontend and Node.js backend without code generation or schemas. You write TypeScript on the server, and the client automatically knows the types—change a server function's return type and TypeScript immediately catches mismatches in your frontend. Key features: automatic type inference, middleware for auth/validation, subscriptions for real-time, and seamless TanStack Query integration. tRPC uses a custom protocol optimized for internal APIs, not REST conventions. Choose tRPC when your frontend and backend are in the same repo (monorepo), you want maximum type safety with minimum setup, and you don't need to expose a REST API to external consumers. It's perfect for full-stack TypeScript apps where the API is only consumed by your own frontend. For public APIs or OpenAPI needs, consider oRPC instead.", "phase": "add-on", "modes": ["file-router"], "link": "https://trpc.io/", diff --git a/frameworks/react-cra/add-ons/table/info.json b/frameworks/react-cra/add-ons/table/info.json index 15f47da2..8495c48c 100644 --- a/frameworks/react-cra/add-ons/table/info.json +++ b/frameworks/react-cra/add-ons/table/info.json @@ -1,6 +1,7 @@ { "name": "Table", "description": "Integrate TanStack Table into your application.", + "aiDescription": "TanStack Table is a headless table library that handles all the complex table logic while you control the UI. It supports sorting, filtering, pagination, row selection, column resizing, pinning, virtualization (for huge datasets), and grouping/aggregation. Key features: server-side or client-side data, column definitions with TypeScript inference, flexible cell/header/footer rendering, and faceted filters. Unlike data grid components that come with fixed styling, TanStack Table is unstyled—you bring your own markup and CSS, making it perfect for custom designs or integrating with Shadcn UI. Choose TanStack Table when you need a complex data table with sorting/filtering/pagination, want full control over appearance, or need virtualization for large datasets. It's the go-to solution for admin dashboards, data management UIs, and any app that displays tabular data.", "phase": "add-on", "modes": ["file-router", "code-router"], "link": "https://tanstack.com/table/latest", diff --git a/frameworks/react-cra/add-ons/tanstack-query/info.json b/frameworks/react-cra/add-ons/tanstack-query/info.json index 88554b88..8660918e 100644 --- a/frameworks/react-cra/add-ons/tanstack-query/info.json +++ b/frameworks/react-cra/add-ons/tanstack-query/info.json @@ -1,6 +1,7 @@ { "name": "Query", "description": "Integrate TanStack Query into your application.", + "aiDescription": "TanStack Query is the standard for server state management in React. It handles data fetching, caching, synchronization, and updates with declarative hooks. Key features: automatic background refetching, cache invalidation, optimistic updates, infinite scroll/pagination, parallel and dependent queries, and devtools for debugging cache state. Unlike Redux or Zustand, TanStack Query specifically solves server state (data that lives on your backend and needs to stay synchronized), not UI state. Choose TanStack Query for any app that fetches data from APIs—it eliminates the need for loading/error state boilerplate, reduces duplicate requests, and keeps your UI in sync with server data. It's foundational for most TanStack apps and integrates with tRPC/oRPC for end-to-end type safety. The devtools let you inspect cache contents, trigger refetches, and debug query states.", "phase": "add-on", "modes": ["file-router", "code-router"], "type": "add-on", diff --git a/frameworks/react-cra/add-ons/workos/info.json b/frameworks/react-cra/add-ons/workos/info.json index 58a317a8..25154dc3 100644 --- a/frameworks/react-cra/add-ons/workos/info.json +++ b/frameworks/react-cra/add-ons/workos/info.json @@ -1,6 +1,7 @@ { "name": "WorkOS", "description": "Add WorkOS authentication to your application.", + "aiDescription": "WorkOS is an enterprise authentication platform focused on B2B SaaS requirements that Clerk doesn't fully address. Its core strength is enterprise SSO—connecting to your customers' identity providers (Okta, Azure AD, Google Workspace, etc.) so their employees can log in with existing credentials. Key features: SAML/OIDC SSO, SCIM directory sync (automatically provision/deprovision users), audit logs for compliance, magic link auth, and MFA. WorkOS handles the complexity of enterprise SSO protocols so you don't have to. Choose WorkOS when selling to enterprises that require SSO ('we only allow Okta login'), need directory sync for user provisioning, or have compliance requirements (SOC 2, audit logs). Unlike Clerk which focuses on consumer auth with nice UI, WorkOS focuses on enterprise protocols and features. The integration sets up WorkOS auth with session management.", "phase": "add-on", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/react-cra/examples/tanchat/info.json b/frameworks/react-cra/examples/tanchat/info.json index a071e80f..314e478f 100644 --- a/frameworks/react-cra/examples/tanchat/info.json +++ b/frameworks/react-cra/examples/tanchat/info.json @@ -1,6 +1,7 @@ { "name": "TanStack Chat", "description": "A chat example that uses TanStack Start and TanStack Store. Features chat with Anthropic Sonnet, chat history and custom prompts.", + "aiDescription": "TanStack Chat is a fully-featured AI chat example built with @tanstack/ai that you can use as a starting point for your own AI-powered applications. It demonstrates: streaming chat with Anthropic Claude (Sonnet), persistent chat history, custom system prompts, a polished chat UI with message bubbles, an AI assistant button in the header, and integration with TanStack Store for state management. This example shows best practices for building AI chat interfaces including proper streaming SSE handling, message rendering with Markdown, loading states, and error handling. Choose this example when you want to add AI chat capabilities to your app—it provides production-ready patterns for @tanstack/ai integration that you can customize for your specific LLM and use case.", "phase": "example", "modes": ["file-router"], "type": "example", diff --git a/frameworks/react-cra/hosts/cloudflare/info.json b/frameworks/react-cra/hosts/cloudflare/info.json index bc1c9ad4..10354206 100644 --- a/frameworks/react-cra/hosts/cloudflare/info.json +++ b/frameworks/react-cra/hosts/cloudflare/info.json @@ -1,6 +1,7 @@ { "name": "Cloudflare", "description": "Cloudflare deployment setup", + "aiDescription": "Cloudflare Workers/Pages provides edge deployment—your app runs in data centers worldwide, close to your users. Key features: sub-50ms cold starts, global distribution (300+ locations), built-in KV storage, Durable Objects for stateful edge apps, and integration with Cloudflare's CDN/security services. Choose Cloudflare when you need the lowest latency globally, want edge computing capabilities, or are already using Cloudflare for DNS/CDN. It excels at API endpoints that need to be fast everywhere. Trade-offs: Workers have a more constrained runtime than Node.js (no filesystem, limited Node APIs), and debugging can be trickier. Pair with Neon or another edge-compatible database for full-stack edge apps.", "link": "https://developers.cloudflare.com/workers/vite-plugin/", "phase": "add-on", "modes": ["file-router", "code-router"], diff --git a/frameworks/react-cra/hosts/netlify/info.json b/frameworks/react-cra/hosts/netlify/info.json index 8d299bbb..4722a0aa 100644 --- a/frameworks/react-cra/hosts/netlify/info.json +++ b/frameworks/react-cra/hosts/netlify/info.json @@ -1,6 +1,7 @@ { "name": "Netlify", "description": "Netlify deployment setup", + "aiDescription": "Netlify provides a streamlined deployment platform with excellent DX for frontend and full-stack apps. Key features: automatic deployments from Git, preview deployments for every PR, edge functions, serverless functions, forms handling, split testing, and a CDN. Choose Netlify when you want simple deployments with great CI/CD integration, need preview deployments for team collaboration, or want built-in features like form handling without backend code. Netlify's edge functions run on Deno at the edge for low latency. Trade-offs: serverless functions have cold starts, and complex backend needs may require additional services. Netlify excels at JAMstack/static sites with serverless functions and is very popular for frontend-focused teams.", "link": "https://docs.netlify.com", "phase": "add-on", "modes": ["file-router", "code-router"], diff --git a/frameworks/react-cra/hosts/nitro/info.json b/frameworks/react-cra/hosts/nitro/info.json index 054bae1b..ef2ec8a1 100644 --- a/frameworks/react-cra/hosts/nitro/info.json +++ b/frameworks/react-cra/hosts/nitro/info.json @@ -1,6 +1,7 @@ { "name": "Nitro (agnostic)", "description": "Nitro deployment setup", + "aiDescription": "Nitro is a universal deployment layer that lets you deploy to any platform with the same codebase. Originally from Nuxt, it's now a standalone server toolkit that adapts your app to different runtimes. Key features: deploy anywhere presets (Node.js, Cloudflare, Vercel, Netlify, Deno, Bun, etc.), automatic runtime optimization per platform, file-based routing for API endpoints, and built-in caching/storage utilities. Choose Nitro when you want deployment flexibility—start on Node.js and move to edge later without code changes. It's the default adapter because it works everywhere. Nitro abstracts away platform differences so your server code is portable. Trade-offs: adds a layer of abstraction, platform-specific features may require breaking the abstraction.", "link": "https://v3.nitro.build/", "phase": "add-on", "modes": ["file-router", "code-router"], diff --git a/frameworks/react-cra/src/checksum.ts b/frameworks/react-cra/src/checksum.ts index c7508040..d72f13fc 100644 --- a/frameworks/react-cra/src/checksum.ts +++ b/frameworks/react-cra/src/checksum.ts @@ -1,3 +1,3 @@ // This file is auto-generated. Do not edit manually. // Generated from add-ons, examples, hosts, project, and toolchains directories -export const contentChecksum = '33ec3ec7dbdb94bb6ef6d8ba9831b43fba7f3d1f88a10408684e0ba39d282142' +export const contentChecksum = '01304eaaf0cc4c2eaa0b8420e5f26e71432182ef8d0183159d49328453755f3c' diff --git a/frameworks/react-cra/toolchains/biome/info.json b/frameworks/react-cra/toolchains/biome/info.json index 79e8efdb..99319afb 100644 --- a/frameworks/react-cra/toolchains/biome/info.json +++ b/frameworks/react-cra/toolchains/biome/info.json @@ -1,6 +1,7 @@ { "name": "Biome", "description": "Biome toolchain support.", + "aiDescription": "Biome is an ultra-fast linter, formatter, and more—written in Rust. It's a unified tool that replaces ESLint + Prettier with a single dependency that's 10-100x faster. Key features: instant formatting and linting (no waiting for Node.js), JavaScript/TypeScript/JSX/JSON support, 200+ lint rules (many from ESLint), and an opinionated formatter compatible with Prettier. Choose Biome when you want faster CI times, simpler tooling setup (one tool instead of ESLint + Prettier + configs), or are frustrated with ESLint performance in large codebases. Trade-offs: smaller ecosystem than ESLint, fewer plugins, and less configuration flexibility. Biome is ideal for new projects or teams who value speed and simplicity over extensive customization.", "phase": "setup", "type": "toolchain", "priority": 2, diff --git a/frameworks/react-cra/toolchains/eslint/info.json b/frameworks/react-cra/toolchains/eslint/info.json index f3bf1bdc..00bfcae4 100644 --- a/frameworks/react-cra/toolchains/eslint/info.json +++ b/frameworks/react-cra/toolchains/eslint/info.json @@ -1,6 +1,7 @@ { "name": "ESLint", "description": "ESLint + Prettier toolchain support.", + "aiDescription": "ESLint is the industry-standard JavaScript/TypeScript linter with the largest plugin ecosystem. Combined with Prettier for code formatting, it's the most flexible and widely-adopted linting setup. Key features: extensive rule library, plugin ecosystem (React, accessibility, imports, testing, etc.), custom rule authoring, and IDE integration. ESLint catches bugs, enforces coding standards, and can auto-fix many issues. Choose ESLint when you need specific plugins (like eslint-plugin-react-hooks, eslint-plugin-jsx-a11y), want maximum customization, or are working in a codebase already using ESLint. This setup includes Prettier for formatting, configured to avoid conflicts with ESLint. Trade-off: slower than Biome and requires more configuration, but offers unmatched flexibility and ecosystem.", "phase": "setup", "type": "toolchain", "priority": 0, diff --git a/frameworks/solid/add-ons/convex/info.json b/frameworks/solid/add-ons/convex/info.json index 75a3443c..5bc6d6f3 100644 --- a/frameworks/solid/add-ons/convex/info.json +++ b/frameworks/solid/add-ons/convex/info.json @@ -1,6 +1,7 @@ { "name": "Convex", "description": "Add the Convex database to your application.", + "aiDescription": "Convex is a reactive backend-as-a-service that combines a real-time database, serverless functions, and file storage into one platform. Unlike traditional databases, Convex automatically syncs data to all connected clients in real-time—when one user makes a change, all other users see it instantly without polling or manual subscriptions. Key features: TypeScript-first with end-to-end type safety from database to UI, automatic caching and optimistic updates, built-in file storage, scheduled functions (cron jobs), and ACID transactions. Convex uses a document-based data model similar to MongoDB but with a relational-like query system. Choose Convex when building collaborative apps (docs, whiteboards, chat), real-time dashboards, or any app where instant data sync matters. It eliminates the need for separate database, API layer, and WebSocket infrastructure. Trade-off: Convex is a managed service with its own query language, so you're committed to their platform.", "link": "https://convex.dev", "phase": "add-on", "type": "add-on", diff --git a/frameworks/solid/add-ons/form/info.json b/frameworks/solid/add-ons/form/info.json index 78b9389d..c04d29ed 100644 --- a/frameworks/solid/add-ons/form/info.json +++ b/frameworks/solid/add-ons/form/info.json @@ -1,6 +1,7 @@ { "name": "Form", "description": "TanStack Form", + "aiDescription": "TanStack Form is a headless, framework-agnostic form library focused on performance and flexibility. For Solid, it provides first-class primitives that integrate with Solid's fine-grained reactivity. Key features: built-in validation adapter support (Zod, Valibot, Yup), nested object and array fields, dependent field validation, and submission handling with loading states. The Solid adapter uses Solid's signals for reactive form state, so only changed fields re-render. Choose TanStack Form when you need complex form logic, dynamic field arrays, or want validation library flexibility. It's headless—you bring your own UI components. Pair it with Solid-UI for accessible, styled form elements.", "phase": "add-on", "link": "https://tanstack.com/form/latest", "modes": ["file-router", "code-router"], diff --git a/frameworks/solid/add-ons/module-federation/info.json b/frameworks/solid/add-ons/module-federation/info.json index e825c455..8c15a340 100644 --- a/frameworks/solid/add-ons/module-federation/info.json +++ b/frameworks/solid/add-ons/module-federation/info.json @@ -1,6 +1,7 @@ { "name": "Module Federation", "description": "Module Federation", + "aiDescription": "Module Federation is a webpack/Vite feature that enables micro-frontend architecture by allowing separately deployed applications to share code at runtime. Key features: runtime code sharing (no rebuild needed when dependencies update), shared dependencies to avoid duplication, bi-directional sharing (apps can both consume and expose modules), and version negotiation for shared libraries. For Solid apps, this enables building independent deployable units that can share Solid components across applications. Choose Module Federation when you have multiple teams working on different parts of a large application, need independent deployment cycles, or want to incrementally migrate a legacy app. Trade-offs: adds complexity to builds and debugging, requires careful dependency version management.", "phase": "add-on", "modes": ["code-router"], "link": "https://module-federation.io/", diff --git a/frameworks/solid/add-ons/sentry/info.json b/frameworks/solid/add-ons/sentry/info.json index 92cda812..4721513e 100644 --- a/frameworks/solid/add-ons/sentry/info.json +++ b/frameworks/solid/add-ons/sentry/info.json @@ -2,6 +2,7 @@ "name": "Sentry", "phase": "setup", "description": "Add Sentry for error monitoring and crash reporting (requires Start).", + "aiDescription": "Sentry is an application monitoring platform that captures errors, performance data, and user sessions. For Solid apps, it provides error tracking with full stack traces, source map support, and breadcrumbs showing user actions before errors. Key features: automatic error capture, performance monitoring, session replays to see what users experienced, and alerts/integrations for Slack/PagerDuty/etc. Sentry helps you answer 'what went wrong?' and 'how often?' with minimal debugging effort. Choose Sentry when you need production error visibility, want to track performance regressions, or need session replays for debugging user-reported issues. It's essential for any production app where you can't reproduce bugs locally.", "link": "https://sentry.com/", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/solid/add-ons/solid-ui/info.json b/frameworks/solid/add-ons/solid-ui/info.json index 3d501253..6486fe6d 100644 --- a/frameworks/solid/add-ons/solid-ui/info.json +++ b/frameworks/solid/add-ons/solid-ui/info.json @@ -1,6 +1,7 @@ { "name": "Solid-UI", "description": "Add Solid-UI to your application.", + "aiDescription": "Solid-UI is a port of Shadcn UI for SolidJS—a collection of beautifully designed, accessible components that you copy into your project and own. Built on Kobalte (Solid's accessible component primitives) and styled with Tailwind CSS, it provides professional design with full customization control. Key features: accessible by default (ARIA compliant), dark mode support, customizable themes via CSS variables, and components you can modify directly. Unlike component libraries you install, updates don't break your customizations because the code is yours. Choose Solid-UI when you want beautiful, accessible components for Solid but need to customize them, don't want to fight library abstractions, or want consistent design across your app.", "phase": "add-on", "link": "https://ui.shadcn.com/", "modes": ["file-router", "code-router"], diff --git a/frameworks/solid/add-ons/start/info.json b/frameworks/solid/add-ons/start/info.json index 63fa14f9..421608d2 100644 --- a/frameworks/solid/add-ons/start/info.json +++ b/frameworks/solid/add-ons/start/info.json @@ -2,6 +2,7 @@ "name": "Start", "phase": "setup", "description": "Add TanStack Start for SSR, API endpoints, and more.", + "aiDescription": "TanStack Start transforms your TanStack Router Solid app into a full-stack framework with server-side rendering (SSR), server functions, and API routes. It's the 'meta-framework' layer that enables building complete applications, not just SPAs. Key features: SSR with streaming support, server functions (RPC-style calls from client to server), API routes for REST endpoints, and multiple rendering strategies. Start uses Vinxi under the hood and supports deployment to Node.js, Cloudflare, Netlify, and more. Choose TanStack Start when you need SEO (SSR), want server-side data loading, need API endpoints, or want to access server-only resources. Start is the foundation that enables most full-stack features in Solid apps.", "link": "https://tanstack.com/start/latest", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/solid/add-ons/store/info.json b/frameworks/solid/add-ons/store/info.json index faac463e..e97ebdaf 100644 --- a/frameworks/solid/add-ons/store/info.json +++ b/frameworks/solid/add-ons/store/info.json @@ -1,6 +1,7 @@ { "name": "Store", "description": "Add TanStack Store to your application.", + "aiDescription": "TanStack Store is a lightweight, framework-agnostic state management library that integrates beautifully with Solid's reactivity. Unlike Solid's built-in stores, TanStack Store provides a consistent API across frameworks and includes devtools support. Key features: no boilerplate, derived state with automatic dependency tracking, actions as simple methods, and devtools for debugging. TanStack Store is intentionally minimal—it complements TanStack Query for server state, handling only client-side UI state like modals, themes, or local preferences. Choose TanStack Store when you want consistent state management patterns with other TanStack libraries or need the devtools integration.", "phase": "add-on", "modes": ["file-router", "code-router"], "type": "add-on", diff --git a/frameworks/solid/add-ons/strapi/info.json b/frameworks/solid/add-ons/strapi/info.json index a9a3f0dd..cc593909 100644 --- a/frameworks/solid/add-ons/strapi/info.json +++ b/frameworks/solid/add-ons/strapi/info.json @@ -1,6 +1,7 @@ { "name": "Strapi", "description": "Use the Strapi CMS to manage your content.", + "aiDescription": "Strapi is a headless CMS that lets non-developers manage content through an admin UI while developers consume it via REST or GraphQL APIs. Unlike WordPress, Strapi is 'headless'—it only provides the content API, you build your own frontend with Solid. Key features: customizable content types builder, role-based access control, media library, internationalization (i18n), and a plugin ecosystem. Choose Strapi when you have content that needs to be edited by non-developers (blogs, marketing pages, product catalogs), want to decouple content management from code deployments, or need a CMS that's more developer-friendly than WordPress. The integration sets up a Strapi client for fetching content.", "link": "https://strapi.io/", "phase": "add-on", "type": "add-on", diff --git a/frameworks/solid/add-ons/t3env/info.json b/frameworks/solid/add-ons/t3env/info.json index d7f20837..705df9d9 100644 --- a/frameworks/solid/add-ons/t3env/info.json +++ b/frameworks/solid/add-ons/t3env/info.json @@ -1,6 +1,7 @@ { "name": "T3Env", "description": "Add type safety to your environment variables", + "aiDescription": "T3 Env provides type-safe environment variables with runtime validation. Instead of accessing process.env directly (which is always string | undefined), T3 Env validates your env vars at startup and gives you typed access. Key features: Zod-based validation, separate client and server env vars (prevents accidentally exposing secrets), build-time checking with TypeScript, and clear error messages when required vars are missing. Choose T3 Env when you want to catch missing or invalid environment variables before they cause runtime errors, need to ensure sensitive vars don't leak to the client, or want IDE autocomplete for your env vars.", "phase": "add-on", "link": "https://github.com/t3-oss/t3-env", "type": "add-on", diff --git a/frameworks/solid/add-ons/tanstack-query/info.json b/frameworks/solid/add-ons/tanstack-query/info.json index 23017a9e..fd6f6b92 100644 --- a/frameworks/solid/add-ons/tanstack-query/info.json +++ b/frameworks/solid/add-ons/tanstack-query/info.json @@ -1,6 +1,7 @@ { "name": "TanStack Query", "description": "Integrate TanStack Query into your application.", + "aiDescription": "TanStack Query is the standard for server state management, now with first-class Solid support. It handles data fetching, caching, synchronization, and updates with declarative primitives that integrate with Solid's reactivity. Key features: automatic background refetching, cache invalidation, optimistic updates, infinite scroll/pagination, parallel and dependent queries, and devtools for debugging cache state. TanStack Query specifically solves server state (data that lives on your backend and needs to stay synchronized), not UI state. Choose TanStack Query for any Solid app that fetches data from APIs—it eliminates the need for loading/error state boilerplate, reduces duplicate requests, and keeps your UI in sync with server data.", "phase": "add-on", "modes": ["file-router"], "type": "add-on", diff --git a/frameworks/solid/hosts/cloudflare/info.json b/frameworks/solid/hosts/cloudflare/info.json index bc1c9ad4..795d0055 100644 --- a/frameworks/solid/hosts/cloudflare/info.json +++ b/frameworks/solid/hosts/cloudflare/info.json @@ -1,6 +1,7 @@ { "name": "Cloudflare", "description": "Cloudflare deployment setup", + "aiDescription": "Cloudflare Workers/Pages provides edge deployment—your Solid app runs in data centers worldwide, close to your users. Key features: sub-50ms cold starts, global distribution (300+ locations), built-in KV storage, Durable Objects for stateful edge apps, and integration with Cloudflare's CDN/security services. Choose Cloudflare when you need the lowest latency globally, want edge computing capabilities, or are already using Cloudflare for DNS/CDN. Trade-offs: Workers have a more constrained runtime than Node.js. Pair with Neon or another edge-compatible database for full-stack edge apps.", "link": "https://developers.cloudflare.com/workers/vite-plugin/", "phase": "add-on", "modes": ["file-router", "code-router"], diff --git a/frameworks/solid/hosts/netlify/info.json b/frameworks/solid/hosts/netlify/info.json index 8d299bbb..86624ba2 100644 --- a/frameworks/solid/hosts/netlify/info.json +++ b/frameworks/solid/hosts/netlify/info.json @@ -1,6 +1,7 @@ { "name": "Netlify", "description": "Netlify deployment setup", + "aiDescription": "Netlify provides a streamlined deployment platform with excellent DX for Solid apps. Key features: automatic deployments from Git, preview deployments for every PR, edge functions, serverless functions, forms handling, and a CDN. Choose Netlify when you want simple deployments with great CI/CD integration, need preview deployments for team collaboration, or want built-in features like form handling. Netlify excels at frontend-focused teams and is very popular for modern web applications.", "link": "https://docs.netlify.com", "phase": "add-on", "modes": ["file-router", "code-router"], diff --git a/frameworks/solid/hosts/nitro/info.json b/frameworks/solid/hosts/nitro/info.json index 19eff4f9..53f45d77 100644 --- a/frameworks/solid/hosts/nitro/info.json +++ b/frameworks/solid/hosts/nitro/info.json @@ -1,6 +1,7 @@ { "name": "Nitro (agnostic)", "description": "Nitro deployment setup", + "aiDescription": "Nitro is a universal deployment layer that lets you deploy to any platform with the same codebase. Key features: deploy anywhere presets (Node.js, Cloudflare, Vercel, Netlify, Deno, Bun, etc.), automatic runtime optimization per platform, and built-in caching/storage utilities. Choose Nitro when you want deployment flexibility—start on Node.js and move to edge later without code changes. It's the default adapter because it works everywhere and abstracts away platform differences.", "link": "https://v3.nitro.build/", "phase": "add-on", "modes": ["file-router", "code-router"], diff --git a/frameworks/solid/src/checksum.ts b/frameworks/solid/src/checksum.ts index bc0f706b..44efae03 100644 --- a/frameworks/solid/src/checksum.ts +++ b/frameworks/solid/src/checksum.ts @@ -1,3 +1,3 @@ // This file is auto-generated. Do not edit manually. // Generated from add-ons, examples, hosts, project, and toolchains directories -export const contentChecksum = '97450d3bd15410ec0fb6553e0b2709464dbef2b643f509e73ff124a3230f44c5' +export const contentChecksum = '87e612bb17d459d191140d04ffd334c0d81cfdd4d1ac88b3f14f516be301aa62' diff --git a/frameworks/solid/toolchains/biome/info.json b/frameworks/solid/toolchains/biome/info.json index 399dccaf..02686b67 100644 --- a/frameworks/solid/toolchains/biome/info.json +++ b/frameworks/solid/toolchains/biome/info.json @@ -1,6 +1,7 @@ { "name": "Biome", "description": "Biome toolchain support.", + "aiDescription": "Biome is an ultra-fast linter, formatter, and more—written in Rust. It's a unified tool that replaces ESLint + Prettier with a single dependency that's 10-100x faster. Key features: instant formatting and linting, JavaScript/TypeScript/JSX support, 200+ lint rules, and an opinionated formatter. Choose Biome for faster CI times, simpler tooling setup, or if you're frustrated with ESLint performance. Trade-offs: smaller ecosystem than ESLint, fewer plugins, less configuration flexibility. Biome is ideal for new projects or teams who value speed and simplicity.", "phase": "setup", "type": "toolchain", "modes": ["code-router", "file-router"], diff --git a/frameworks/solid/toolchains/eslint/info.json b/frameworks/solid/toolchains/eslint/info.json index e7288942..36d7e747 100644 --- a/frameworks/solid/toolchains/eslint/info.json +++ b/frameworks/solid/toolchains/eslint/info.json @@ -1,6 +1,7 @@ { "name": "ESLint", "description": "ESLint + Prettier toolchain support.", + "aiDescription": "ESLint is the industry-standard JavaScript/TypeScript linter with the largest plugin ecosystem. Combined with Prettier for code formatting, it's the most flexible and widely-adopted linting setup. Key features: extensive rule library, plugin ecosystem (Solid-specific rules, accessibility, imports, etc.), custom rule authoring, and IDE integration. Choose ESLint when you need specific plugins, want maximum customization, or are working in a codebase already using ESLint. Trade-off: slower than Biome and requires more configuration, but offers unmatched flexibility and ecosystem.", "phase": "setup", "type": "toolchain", "modes": ["code-router", "file-router"], diff --git a/packages/cta-engine/src/types.ts b/packages/cta-engine/src/types.ts index 98357482..ca350ebe 100644 --- a/packages/cta-engine/src/types.ts +++ b/packages/cta-engine/src/types.ts @@ -32,6 +32,7 @@ export const AddOnBaseSchema = z.object({ id: z.string(), name: z.string(), description: z.string(), + aiDescription: z.string().optional(), author: z.string().optional(), version: z.string().optional(), link: z.string().optional(), diff --git a/packages/cta-ui-base/package.json b/packages/cta-ui-base/package.json index d401ce88..53d23526 100644 --- a/packages/cta-ui-base/package.json +++ b/packages/cta-ui-base/package.json @@ -34,6 +34,9 @@ "@radix-ui/react-toggle": "^1.1.2", "@radix-ui/react-toggle-group": "^1.1.2", "@radix-ui/react-tooltip": "^1.2.3", + "@tanstack/ai": "https://pkg.pr.new/TanStack/ai/@tanstack/ai@144", + "@tanstack/ai-client": "https://pkg.pr.new/TanStack/ai/@tanstack/ai-client@144", + "@tanstack/ai-react": "https://pkg.pr.new/TanStack/ai/@tanstack/ai-react@144", "@tanstack/cta-engine": "workspace:*", "@tanstack/react-query": "^5.66.5", "@uiw/codemirror-theme-github": "^4.23.10", @@ -48,9 +51,16 @@ "react": "^19.0.0", "react-codemirror-merge": "^4.23.10", "react-dom": "^19.0.0", + "react-markdown": "^10.1.0", + "rehype-raw": "^7.0.0", + "rehype-sanitize": "^6.0.0", + "remark-gfm": "^4.0.1", "sonner": "^2.0.3", "tailwind-merge": "^3.0.2", - "zustand": "^5.0.3" + "zod": "^4.1.13", + "zustand": "^5.0.3", + "@ricky0123/vad-react": "^0.0.30", + "@ricky0123/vad-web": "^0.0.30" }, "devDependencies": { "@types/react": "^19.0.8", diff --git a/packages/cta-ui-base/src/components/ai-chat-dialog.tsx b/packages/cta-ui-base/src/components/ai-chat-dialog.tsx new file mode 100644 index 00000000..68ba0c0a --- /dev/null +++ b/packages/cta-ui-base/src/components/ai-chat-dialog.tsx @@ -0,0 +1,359 @@ +import { useCallback, useEffect, useRef, useState } from 'react' +import { Send, Square, Sparkles, X } from 'lucide-react' +import ReactMarkdown from 'react-markdown' +import rehypeRaw from 'rehype-raw' +import rehypeSanitize from 'rehype-sanitize' +import remarkGfm from 'remark-gfm' +import { fetchServerSentEvents, useChat } from '@tanstack/ai-react' +import { clientTools } from '@tanstack/ai-client' +import type { UIMessage } from '@tanstack/ai-react' + +import { Button } from './ui/button' +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, +} from './ui/dialog' + +import { selectAddOnsToolDef, unselectAddOnsToolDef } from '../lib/ai-tools' + +import { useAddOns } from '../store/project' + +import type { AddOnInfo } from '../types' + +export interface AIChatDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + apiEndpoint?: string +} + +function Messages({ + messages, +}: { + messages: Array +}) { + const messagesContainerRef = useRef(null) + + useEffect(() => { + if (messagesContainerRef.current) { + messagesContainerRef.current.scrollTop = + messagesContainerRef.current.scrollHeight + } + }, [messages]) + + if (!messages.length) { + return ( +
+
+ +

How can I help you configure your app?

+

+ Ask me to add features like authentication, database connections, or + API integrations. +

+
+
+ ) + } + + return ( +
+ {messages.map((message) => { + return ( +
+
+
+ {message.role === 'assistant' && ( +
+ AI +
+ )} +
+ {message.parts.map((part, index) => { + if (part.type === 'text' && part.content) { + return ( +
+ + {part.content} + +
+ ) + } + + // Show tool calls with their status + if (part.type === 'tool-call') { + const hasOutput = part.output !== undefined + const isApprovalRequested = part.state === 'approval-requested' + return ( +
+ + {hasOutput ? '✓' : isApprovalRequested ? '⏸' : '⏳'}{' '} + {part.name} + +
+ ) + } + + return null + })} +
+
+
+
+ ) + })} +
+ ) +} + +export function AIChatDialog({ + open, + onOpenChange, + apiEndpoint = '/api/ai-chat', +}: AIChatDialogProps) { + const [input, setInput] = useState('') + const { availableAddOns, addOnState, toggleAddOn } = useAddOns() + + // Ref to keep add-on state fresh for tool callbacks + const addOnStateRef = useRef(addOnState) + addOnStateRef.current = addOnState + + // Build add-ons list for the API + const getAddOnsList = useCallback(() => { + return availableAddOns.map((addOn: AddOnInfo) => ({ + id: addOn.id, + name: addOn.name, + description: addOn.description, + aiDescription: addOn.aiDescription, + type: addOn.type, + selected: addOnState[addOn.id]?.selected ?? false, + enabled: addOnState[addOn.id]?.enabled ?? true, + })) + }, [availableAddOns, addOnState]) + + // Create client tools that interact with the add-on state + const selectAddOnsClient = useCallback(() => { + return selectAddOnsToolDef.client((args) => { + const currentState = addOnStateRef.current + const selectedAddOns: string[] = [] + for (const addOnId of args.addOnIds) { + const state = currentState[addOnId] + if (state && !state.selected && state.enabled) { + toggleAddOn(addOnId) + selectedAddOns.push(addOnId) + } + } + return { + success: selectedAddOns.length > 0, + selectedAddOns, + message: + selectedAddOns.length > 0 + ? `Successfully selected: ${selectedAddOns.join(', ')}` + : 'No add-ons were selected (may not be available or already selected).', + } + }) + }, [toggleAddOn]) + + const unselectAddOnsClient = useCallback(() => { + return unselectAddOnsToolDef.client((args) => { + const currentState = addOnStateRef.current + const unselectedAddOns: string[] = [] + for (const addOnId of args.addOnIds) { + const state = currentState[addOnId] + if (state && state.selected && state.enabled) { + toggleAddOn(addOnId) + unselectedAddOns.push(addOnId) + } + } + return { + success: unselectedAddOns.length > 0, + unselectedAddOns, + message: + unselectedAddOns.length > 0 + ? `Successfully unselected: ${unselectedAddOns.join(', ')}` + : 'No add-ons were unselected (may not be available or already unselected).', + } + }) + }, [toggleAddOn]) + + const tools = clientTools(selectAddOnsClient(), unselectAddOnsClient()) + + const { messages, sendMessage, isLoading, stop } = useChat({ + connection: fetchServerSentEvents(apiEndpoint), + tools, + body: { + addOns: getAddOnsList(), + }, + }) + + // Log messages changes + useEffect(() => { + console.log('[Chat] Messages updated, count:', messages.length) + messages.forEach((msg, i) => { + console.log(`[Chat] Message ${i}: role=${msg.role}, parts=${msg.parts.length}`) + msg.parts.forEach((part, j) => { + if (part.type === 'text') { + console.log(`[Chat] Part ${j}: text="${(part as any).content?.slice(0, 100)}..."`) + } else if (part.type === 'tool-call') { + console.log(`[Chat] Part ${j}: tool-call name=${(part as any).name} state=${(part as any).state} hasOutput=${(part as any).output !== undefined}`) + if ((part as any).input) { + console.log(`[Chat] Input:`, JSON.stringify((part as any).input)) + } + if ((part as any).output !== undefined) { + console.log(`[Chat] Output:`, JSON.stringify((part as any).output)) + } + } + }) + }) + }, [messages]) + + const handleSend = () => { + if (input.trim() && !isLoading) { + console.log('[Chat] Sending message:', input) + sendMessage(input) + setInput('') + } + } + + return ( + + + +
+
+ +
+
+ AI Assistant +

+ Powered by GPT-4o +

+
+
+ + + + + +
+ {isLoading && ( +
+ +
+ )} +
+