jacobparis

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js"
import { Socket } from "net"
import { Readable } from "stream"
import { IncomingMessage, type ServerResponse } from "http"
import {
	subscribeToChannel,
	unsubscribeFromChannel,
	publishMessage,
} from "../redis.server.js"

jacobparis

---
description: "Use shadcn/ui components as needed for any UI code"
patterns: "*.tsx"
---

# 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.

## Finding and Using Components

jacobparis

  {
+ 	"typescript.preferences.autoImportFileExcludePatterns": [
+     "zod",
+   ]
  }

jacobparis

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <RemixBrowser />
    </StrictMode>

jacobparis

@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';

-import { cn } from '#app/utils/misc.ts';
+import { cn } from '#app/utils/misc.js';

 const buttonVariants = cva(

jacobparis

+ import '#app/tailwind.css'

jacobparis

import { z } from "zod"
import { parseWithZod } from "@conform-to/zod"
import { Submission } from "@conform-to/react"

export async function parseRequest<ZodSchema>(
  request: Request,
  { schema }: { schema: z.ZodType<ZodSchema> },
) {
  const type = request.headers.get("content-type")
  if (type === "application/json") {

jacobparis

import { invariant } from "@epic-web/invariant"
import { createCookieSessionStorage, redirect } from "@vercel/remix"
import { GitHubProfile, GitHubStrategy } from "remix-auth-github"
import { Authenticator } from "remix-auth"
import { useNavigate } from "@remix-run/react"

invariant(process.env.GITHUB_CLIENT_ID, "GITHUB_CLIENT_ID is not set")
invariant(process.env.GITHUB_CLIENT_SECRET, "GITHUB_CLIENT_SECRET is not set")
invariant(process.env.GITHUB_REDIRECT_URI, "GITHUB_REDIRECT_URI is not set")
invariant(process.env.SESSION_SECRET, "SESSION_SECRET is not set")

jacobparis

import {
	cachified as baseCachified,
	type CacheEntry,
	type Cache,
	totalTtl,
	type CachifiedOptions,
	verboseReporter,
} from '@epic-web/cachified';
import { remember } from '@epic-web/remember';
import { LRUCache } from 'lru-cache';

jacobparis

import { type IconName } from "#app/components/icons/icons.ts"
import href from "#app/components/icons/sprite.svg"

export function Icon({
  name,
  className,
  ...props
}: React.SVGProps<SVGSVGElement> & {
  name: IconName
}) {