create-tsrouter-app v0.6: AI Chat example, Solid support and MORE!

Key Concepts

• create-ts-router-app: A tool for quickly scaffolding TypeScript-based web applications.
• SolidJS: A JavaScript framework for building user interfaces.
• Add-ons: Pre-built features and integrations that can be added to a project during creation.
• Biome: A fast toolchain for web development, including a formatter, linter, and checker.
• TanStack Chat: An example application demonstrating how to build an AI chatbot.
• Model Context Protocol (MCP): A protocol that allows AI tools like Cursor to interact with and modify codebases.
• TanStack Store: A state management library.
• TanStack Query: A data fetching and caching library (formerly React Query).
• Shadcn UI: A collection of accessible and reusable UI components.

New Features in create-ts-router-app v0.6

1. SolidJS Support

• Main Point: The tool now supports creating applications using the SolidJS framework.
• How to Use: Specify framework solid during app creation.
• Example: create-ts-router-app demo --framework solid will generate a SolidJS application named "demo".

2. Add-ons

• Main Point: Add-ons provide pre-configured integrations for common functionalities.
• Functionality: Streamlines the process of adding features like authentication, databases, form management, and UI libraries.
• Examples:
  • Clerk for authentication
  • Convex for a hosted database
  • Form for forms management
  • Netlify for production releases
  • Sentry for error tracking
  • Shadcn UI for UI components
  • TanStack Store for state management
  • TanStack Query for data fetching
• How to Use: Select add-ons through the UI or specify them on the command line.
• Process: The tool installs and configures the selected add-ons, providing demo pages to illustrate their usage. These demos are easily removable as they are prefixed with the filename "demo".

3. Biome Toolchain Support

• Main Point: Integration with the Biome toolchain for formatting, linting, and checking code.
• Benefits: Provides a consistent and efficient development workflow.
• How to Use: Select Biome in the UI or specify toolchain biome during app creation.
• Result: The tool sets up biome.json and configures scripts in package.json for formatting and linting.

4. TanStack Chat Example

• Main Point: A pre-built example demonstrating how to create an AI chatbot using TanStack Chat and an AI provider (e.g., Anthropic).
• Functionality: Includes a UI for interacting with the chatbot, settings for customizing the prompt, and data management using TanStack Store.
• Files:
  • utils/demo.a.ts: Contains the server function for connecting to the Anthropic AI.
  • store/demo.store.ts: Manages the chat data using TanStack Store.
  • components/Settings.tsx: A settings dialog for customizing the prompt.
  • routes/chat.tsx: The main chat UI, including the settings dialog.
• How to Use: Specify example tan-stack-chat during app creation.
• Customization: The example can be customized by modifying the code directly.

5. Model Context Protocol (MCP) Integration

• Main Point: Integration with the Model Context Protocol (MCP) allows AI tools like Cursor to interact with and modify create-ts-router-app projects.
• Functionality: Enables AI-powered code generation and modification.
• Process:
  1. Install a TS Router MCP server.
  2. Configure Cursor to use the TS Router MCP server.
  3. Use Cursor to generate or modify a create-ts-router-app project.
• Example: The video demonstrates using Cursor to create a Pokemon-themed AI chatbot with purple styling.
• Benefits: Streamlines the process of customizing and extending create-ts-router-app projects.

Synthesis/Conclusion

The v0.6 release of create-ts-router-app introduces several significant enhancements, including SolidJS support, add-ons for simplified integration of common features, Biome toolchain support, a TanStack Chat example, and MCP integration for AI-powered code generation and modification. These features aim to accelerate the development process and provide developers with a more streamlined and efficient workflow for building TypeScript-based web applications. The MCP integration, in particular, highlights the potential for AI to assist in code creation and customization.