feat: Apply a Hashbrown theme

Author: MikeRyanDev

README.md

@@ -1,48 +1,125 @@
-# CopilotKit - Streaming JSON Parser + UI Renderer
+# Hashbrown + CopilotKit Starter Template
 
-I have been working on a new streaming JSON parser that manages its state within React. It preserves object identities while parsing chunks, allowing for fine-grained reactivity and improved UI performance.
+This repo is a starter for exploring how to stream structured model output into React UIs using Hashbrown, then wire that flow through CopilotKit + a LangGraph agent.
 
-This repository demos using this new streaming JSON parser along with a JSON UI renderer to let an LLM build a dynamic user interface from a fixed set of React components. It uses CopilotKit to build a user interface on top of a LangGraph agent.
+You can use it as a playground for:
 
-## Getting Started
+- Streaming JSON parsing
+- Streaming markdown with Magic Text
+- Defining UI kits the model can render
+- Exposing UI kit schemas to CopilotKit/agent runtime
+
+## Quick Start
 
 ### Prerequisites
 
-- Node.js
-- pnpm
-- Python 3 (for the LangGraph agent)
+- Node.js 20+
+- npm (or pnpm)
+- Python 3.11+ (for the LangGraph agent)
 
 ### Setup
 
-Create a `.env` file in `./agent` with an OpenAI API key:
+Set your OpenAI key for the agent in `agent/.env`:
 
-```sh
+```bash
 OPENAI_API_KEY=...
 ```
 
 Install dependencies:
 
-```sh
-pnpm install
+```bash
+npm install
 ```
 
-Start the dev server:
+Run UI + agent together:
 
-```sh
-pnpm dev
+```bash
+npm run dev
 ```
 
-## Relevant Code Paths
+App URL: `http://localhost:3000`
+
+## What To Explore
+
+### JSON Parser
+
+The parser demos show chunk-by-chunk JSON parsing with live resolved values.
+
+- Demo page: `src/app/parser/page.tsx`
+- AST visualization: `src/app/ast/page.tsx`
+- Chat renderer parser usage: `src/components/custom-message-renderer.tsx`
+  - Uses `useJsonParser(message.content ?? "", kit.schema)` to parse streaming assistant output.
+
+Routes:
+
+- `/parser`
+- `/ast`
+
+### Magic Text
+
+Magic Text renders streamed markdown while text is still arriving.
+
+- Demo page: `src/app/magic-text/page.tsx`
+  - Uses `<MagicTextRenderer>{markdownSlice}</MagicTextRenderer>`
+- Also visible in composed UI output styling in:
+  - `src/app/ui-renderer/page.tsx`
+  - `src/components/custom-message-renderer.tsx`
+
+Route:
+
+- `/magic-text`
+
+### UI Kits
+
+The UI kit defines what components the model is allowed to emit.
+
+- UI kit definition: `src/components/chat/chat-kit.tsx`
+  - `useUiKit(...)`
+  - `exposeMarkdown()`
+  - `exposeComponent(WeatherCard, { ...props })`
+- Weather component used by the kit: `src/components/weather.tsx`
+
+Route to test parsed JSON -> rendered components:
+
+- `/ui-renderer`
+
+### Exposing UI Kits To CopilotKit
+
+The flow is:
+
+1. Build schema from the Hashbrown UI kit in the frontend.
+2. Pass schema via CopilotKit runtime context.
+3. Read schema in the agent and enforce structured output.
+
+Code references:
+
+- Frontend context wiring: `src/app/page.tsx`
+  - `const chatKit = useChatKit()`
+  - `useAgentContext({ description: "output_schema", value: s.toJsonSchema(chatKit.schema) })`
+- CopilotKit runtime endpoint: `src/app/api/copilotkit/route.ts`
+  - Registers `sample_agent` with `LangGraphAgent`.
+- Agent schema consumption: `agent/main.py`
+  - `apply_structured_output_schema(...)`
+  - Applies `ProviderStrategy(schema=schema, strict=True)` when `output_schema` is present.
 
-- `./src/components/chat/chat-kit.tsx` -> Builds a UI kit of React components that the LLM can use when generating a response.
+Route:
 
-- `./src/app/page.tsx` -> Derives JSON schema from the UI kit and forwards it to the agent using `useCopilotReadable`
+- `/` (chat experience)
 
-- `./agent/main.py` -> Reads the schema from `useCopilotReadable` and applies it as a structured output.
+## Project Map
 
-- `./src/components/custom-message-renderer.tsx` -> Parses the streaming JSON and renders it into a user interface
+- `src/app/page.tsx`: Main chat page (CopilotKit + custom renderer)
+- `src/components/custom-message-renderer.tsx`: Streaming parse + kit rendering
+- `src/components/chat/chat-kit.tsx`: Hashbrown UI kit and exposed components
+- `src/app/parser/page.tsx`: JSON parser playground
+- `src/app/ast/page.tsx`: Parser AST playground
+- `src/app/magic-text/page.tsx`: Magic Text playground
+- `src/app/ui-renderer/page.tsx`: JSON-to-UI renderer playground
+- `src/app/api/copilotkit/route.ts`: CopilotKit runtime API route
+- `agent/main.py`: LangGraph agent, tools, and structured output middleware
 
 ## Troubleshooting
 
-- If the agent fails to start, confirm your Python environment can install the agent dependencies in `./agent`.
-- If you see missing API key errors, double-check that `OPENAI_API_KEY` is present in `./agent/.env`.
+- If the agent does not start, run `npm run install:agent` and confirm Python tooling is available.
+- If API calls fail, verify `agent/.env` contains `OPENAI_API_KEY`.
+- If chat cannot reach the agent, confirm LangGraph is running on `http://localhost:8123` (default in `src/app/api/copilotkit/route.ts`).

package.json

@@ -17,8 +17,9 @@
     "@copilotkit/react-core": "1.51.0",
     "@copilotkit/react-ui": "1.51.0",
     "@copilotkit/runtime": "1.51.0",
-    "@hashbrownai/core": "0.5.0-beta.3",
-    "@hashbrownai/react": "0.5.0-beta.3",
+    "@hashbrownai/core": "0.5.0-beta.4",
+    "@hashbrownai/react": "0.5.0-beta.4",
+    "figma-squircle": "^1.1.0",
     "next": "16.1.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",