BlockBridge | Devpost

Problem

LLM conversations are useful for generating text, but they are awkward when a user needs to reshape an app idea, debug a thought process, or clarify product intent after the first answer appears. BlockBridge gives LLM products a side-by-side chat and visual block surface so generated structure can be inspected, edited, and fed back into the next AI turn.

What it does

BlockBridge is a working React/TypeScript demo for a reusable LLM UI primitive. A user chats about an idea or technical workflow, the provider adapter turns the conversation into flexible visual block JSON, and a React Flow canvas renders draggable blocks and reconnectable edges. The user can edit block titles, kinds, content, arbitrary JSON fields, relationships, or imported graph JSON, then sync the updated graph back into chat as structured context.

AI usage

The app includes a deterministic Sample adapter for no-key demos, an OpenAI-compatible /chat/completions adapter with optional structured tool output, and an Ollama /api/chat adapter for local models. The core pattern is AI-generated structure plus human visual correction, then a structured context update for the next model turn.

Codex usage

Codex helped scope the product, generate the React/TypeScript implementation, add provider adapters, build the React Flow interface, write the graph schema, prepare docs, and run build/lint/browser QA.

How to try it

Live demo: https://blockbridge-ten.vercel.app Source code: https://github.com/yosun/chatxconcept Demo video: https://www.youtube.com/watch?v=rvTjz6UoOSI

Local run:

npm install
npm run dev

Then open http://127.0.0.1:5173/ and run the Sample provider flow. The browser-tested flow is: app loads, Sample provider generates a graph, the canvas updates, visual edits sync back into chat, and a Context Update appears.