Custom block examples

.changeset/eleven-monkeys-yell.md

@@ -0,0 +1,5 @@
+---
+"@llm-ui/custom": patch
+---
+
+update @llm-ui/custom readme

examples/code/nextjs/package.json

@@ -10,9 +10,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@llm-ui/code": "^0.4.0",
-    "@llm-ui/markdown": "^0.4.0",
-    "@llm-ui/react": "^0.4.0",
+    "@llm-ui/code": "^0.6.0",
+    "@llm-ui/markdown": "^0.6.0",
+    "@llm-ui/react": "^0.6.0",
     "html-react-parser": "^5.1.10",
     "next": "14.2.3",
     "react": "^18",

examples/code/vite/package.json

@@ -11,9 +11,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@llm-ui/code": "^0.4.0",
-    "@llm-ui/markdown": "^0.4.0",
-    "@llm-ui/react": "^0.4.0",
+    "@llm-ui/code": "^0.6.0",
+    "@llm-ui/markdown": "^0.6.0",
+    "@llm-ui/react": "^0.6.0",
     "html-react-parser": "^5.1.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/custom-components/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/custom-components/nextjs/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+
+.env

examples/custom-components/nextjs/README.md

@@ -0,0 +1,21 @@
+# Custom block example (Next.js)
+
+## How to use
+
+Execute create-llm-ui with pnpm, npm, bun, or yarn to setup the example:
+
+```bash
+pnpx create-llm-ui example custom-components/nextjs llm-ui-custom-components-nextjs-example
+```
+
+```bash
+npx create-llm-ui example custom-components/nextjs llm-ui-custom-components-nextjs-example
+```
+
+```bash
+bunx create-llm-ui example custom-components/nextjs llm-ui-custom-components-nextjs-example
+```
+
+```bash
+yarn create llm-ui example custom-components/nextjs llm-ui-custom-components-nextjs-example
+```

examples/custom-components/nextjs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

examples/custom-components/nextjs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "llm-ui-custom-components-nextjs-example",
+  "license": "MIT",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@llm-ui/custom": "^0.6.0",
+    "@llm-ui/markdown": "^0.6.0",
+    "@llm-ui/react": "^0.6.0",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

examples/custom-components/nextjs/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

examples/custom-components/nextjs/src/app/globals.css

@@ -0,0 +1,39 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply text-white;
+  @apply bg-gray-950;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+button {
+  @apply mr-4 rounded bg-blue-500 px-4 py-2 font-semibold text-white;
+}
+
+a {
+  @apply underline underline-offset-4;
+}
+
+pre {
+  @apply p-4;
+  @apply rounded-lg;
+  @apply overflow-x-auto;
+  @apply border;
+  @apply border-gray-800;
+  background-color: black !important;
+}
+
+.markdown {
+  @apply prose prose-invert;
+}
+
+body > div {
+  @apply m-8 mx-auto max-w-screen-md rounded-lg bg-black p-8 pt-1;
+}

examples/custom-components/nextjs/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "llm-ui-custom-components-nextjs-example",
+  description: "llm-ui-custom-components-nextjs-example",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/custom-components/nextjs/src/app/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { customBlock, parseJson5 } from "@llm-ui/custom";
+import { markdownLookBack } from "@llm-ui/markdown";
+import {
+  useLLMOutput,
+  useStreamExample,
+  type LLMOutputComponent,
+} from "@llm-ui/react";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import z from "zod";
+
+const buttonsSchema = z.object({
+  t: z.literal("btn"),
+  btns: z.array(z.object({ text: z.string() })),
+});
+
+const buttonsPartialSchema = buttonsSchema.deepPartial();
+
+// -------Step 1: Create a markdown component-------
+
+// Customize this component with your own styling
+const MarkdownComponent: LLMOutputComponent = ({ blockMatch }) => {
+  const markdown = blockMatch.output;
+  return (
+    <ReactMarkdown className={"markdown"} remarkPlugins={[remarkGfm]}>
+      {markdown}
+    </ReactMarkdown>
+  );
+};
+
+// -------Step 2: Create a buttons component-------
+
+// Customize this component with your own styling
+const ButtonsComponent: LLMOutputComponent = ({ blockMatch }) => {
+  const buttons = buttonsPartialSchema.parse(parseJson5(blockMatch.output));
+  if (!buttons) {
+    return undefined;
+  }
+  return (
+    <div>
+      {buttons?.btns?.map(
+        (button, index) =>
+          button?.text && <button key={index}>{button.text}</button>,
+      )}
+    </div>
+  );
+};
+
+// -------Step 3: Render markdown with llm-ui-------
+
+const example = `
+## Example
+
+【{t:"btn",btns:[{text:"Button 1"}, {text:"Button 2"}]}】
+`;
+
+const Example = () => {
+  const { isStreamFinished, output } = useStreamExample(example);
+
+  const { blockMatches } = useLLMOutput({
+    llmOutput: output,
+    blocks: [
+      {
+        ...customBlock("btn"),
+        component: ButtonsComponent,
+      },
+    ],
+    fallbackBlock: {
+      component: MarkdownComponent,
+      lookBack: markdownLookBack(),
+    },
+    isStreamFinished,
+  });
+
+  return (
+    <div>
+      {blockMatches.map((blockMatch, index) => {
+        const Component = blockMatch.block.component;
+        return <Component key={index} blockMatch={blockMatch} />;
+      })}
+    </div>
+  );
+};
+
+export default Example;

examples/custom-components/nextjs/tailwind.config.ts

@@ -0,0 +1,21 @@
+import typography from "@tailwindcss/typography";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [typography],
+};
+export default config;

examples/custom-components/nextjs/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

examples/custom-components/vite/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};

examples/custom-components/vite/.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
+.env