nochatbot-data-analyze-helper/quickstart.md at main · 21pounder/nochatbot-data-analyze-helper

generic [active] [ref=e1]:
- generic [ref=e2]:
  - banner [ref=e3]:
    - generic [ref=e4]:
      - generic [ref=e5]:
        
        link "Made with love by Vercel" [ref=e6] [cursor=pointer]:
        
        /url: https://vercel.com
        
        img [ref=e7]
        
        img [ref=e10]
        
        link "json-render" [ref=e12] [cursor=pointer]:
        
        /url: /
      - navigation [ref=e13]:
        
        link "Playground" [ref=e14] [cursor=pointer]:
        
        /url: /playground
        
        link "Docs" [ref=e15] [cursor=pointer]:
        
        /url: /docs
        
        link "11k" [ref=e16] [cursor=pointer]:
        
        /url: https://github.com/vercel-labs/json-render
        
        img [ref=e17]
        
        generic [ref=e19]: 11k
        
        button "Toggle theme" [ref=e20] [cursor=pointer]:
        
        img [ref=e21]
  - main [ref=e27]:
    - generic [ref=e28]:
      - complementary [ref=e29]:
        
        navigation [ref=e30]:
        
        generic [ref=e31]:
        
        heading "Getting Started" [level=4] [ref=e32]
        
        list [ref=e33]:
        
        listitem [ref=e34]:
        
        link "Introduction" [ref=e35] [cursor=pointer]:
        /url: /docs
        
        listitem [ref=e36]:
        
        link "Installation" [ref=e37] [cursor=pointer]:
        /url: /docs/installation
        
        listitem [ref=e38]:
        
        link "Quick Start" [ref=e39] [cursor=pointer]:
        /url: /docs/quick-start
        
        listitem [ref=e40]:
        
        link "Migration Guide" [ref=e41] [cursor=pointer]:
        /url: /docs/migration
        
        listitem [ref=e42]:
        
        link "Changelog" [ref=e43] [cursor=pointer]:
        /url: /docs/changelog
        
        generic [ref=e44]:
        
        heading "Core" [level=4] [ref=e45]
        
        list [ref=e46]:
        
        listitem [ref=e47]:
        
        link "Specs" [ref=e48] [cursor=pointer]:
        /url: /docs/specs
        
        listitem [ref=e49]:
        
        link "Schemas" [ref=e50] [cursor=pointer]:
        /url: /docs/schemas
        
        listitem [ref=e51]:
        
        link "Catalog" [ref=e52] [cursor=pointer]:
        /url: /docs/catalog
        
        listitem [ref=e53]:
        
        link "Data Binding" [ref=e54] [cursor=pointer]:
        /url: /docs/data-binding
        
        listitem [ref=e55]:
        
        link "Visibility" [ref=e56] [cursor=pointer]:
        /url: /docs/visibility
        
        listitem [ref=e57]:
        
        link "Validation" [ref=e58] [cursor=pointer]:
        /url: /docs/validation
        
        generic [ref=e59]:
        
        heading "Rendering" [level=4] [ref=e60]
        
        list [ref=e61]:
        
        listitem [ref=e62]:
        
        link "Registry" [ref=e63] [cursor=pointer]:
        /url: /docs/registry
        
        listitem [ref=e64]:
        
        link "Streaming" [ref=e65] [cursor=pointer]:
        /url: /docs/streaming
        
        listitem [ref=e66]:
        
        link "Generation Modes" [ref=e67] [cursor=pointer]:
        /url: /docs/generation-modes
        
        generic [ref=e68]:
        
        heading "Examples" [level=4] [ref=e69]
        
        list [ref=e70]:
        
        listitem [ref=e71]:
        
        link "Chat" [ref=e72] [cursor=pointer]:
        /url: https://github.com/vercel-labs/json-render/tree/main/examples/chat
        
        text: Chat
        
        img [ref=e73]
        
        listitem [ref=e75]:
        
        link "Dashboard" [ref=e76] [cursor=pointer]:
        /url: https://github.com/vercel-labs/json-render/tree/main/examples/dashboard
        
        text: Dashboard
        
        img [ref=e77]
        
        listitem [ref=e79]:
        
        link "React Native" [ref=e80] [cursor=pointer]:
        /url: https://github.com/vercel-labs/json-render/tree/main/examples/react-native
        
        text: React Native
        
        img [ref=e81]
        
        listitem [ref=e83]:
        
        link "React PDF" [ref=e84] [cursor=pointer]:
        /url: https://github.com/vercel-labs/json-render/tree/main/examples/react-pdf
        
        text: React PDF
        
        img [ref=e85]
        
        listitem [ref=e87]:
        
        link "Remotion" [ref=e88] [cursor=pointer]:
        /url: https://github.com/vercel-labs/json-render/tree/main/examples/remotion
        
        text: Remotion
        
        img [ref=e89]
        
        generic [ref=e91]:
        
        heading "Guides" [level=4] [ref=e92]
        
        list [ref=e93]:
        
        listitem [ref=e94]:
        
        link "Custom Schema" [ref=e95] [cursor=pointer]:
        /url: /docs/custom-schema
        
        listitem [ref=e96]:
        
        link "Code Export" [ref=e97] [cursor=pointer]:
        /url: /docs/code-export
        
        generic [ref=e98]:
        
        heading "Integrations" [level=4] [ref=e99]
        
        list [ref=e100]:
        
        listitem [ref=e101]:
        
        link "AI SDK" [ref=e102] [cursor=pointer]:
        /url: /docs/ai-sdk
        
        listitem [ref=e103]:
        
        link "A2UI" [ref=e104] [cursor=pointer]:
        /url: /docs/a2ui
        
        listitem [ref=e105]:
        
        link "Adaptive Cards" [ref=e106] [cursor=pointer]:
        /url: /docs/adaptive-cards
        
        listitem [ref=e107]:
        
        link "AG-UI" [ref=e108] [cursor=pointer]:
        /url: /docs/ag-ui
        
        listitem [ref=e109]:
        
        link "OpenAPI" [ref=e110] [cursor=pointer]:
        /url: /docs/openapi
        
        generic [ref=e111]:
        
        heading "API Reference" [level=4] [ref=e112]
        
        list [ref=e113]:
        
        listitem [ref=e114]:
        
        link "@json-render/core" [ref=e115] [cursor=pointer]:
        /url: /docs/api/core
        
        listitem [ref=e116]:
        
        link "@json-render/react" [ref=e117] [cursor=pointer]:
        /url: /docs/api/react
        
        listitem [ref=e118]:
        
        link "@json-render/react-pdf" [ref=e119] [cursor=pointer]:
        /url: /docs/api/react-pdf
        
        listitem [ref=e120]:
        
        link "@json-render/shadcn" [ref=e121] [cursor=pointer]:
        /url: /docs/api/shadcn
        
        listitem [ref=e122]:
        
        link "@json-render/react-native" [ref=e123] [cursor=pointer]:
        /url: /docs/api/react-native
        
        listitem [ref=e124]:
        
        link "@json-render/remotion" [ref=e125] [cursor=pointer]:
        /url: /docs/api/remotion
        
        listitem [ref=e126]:
        
        link "@json-render/codegen" [ref=e127] [cursor=pointer]:
        /url: /docs/api/codegen
      - generic [ref=e128]:
        
        button "Copy page as Markdown" [ref=e130] [cursor=pointer]:
        
        img [ref=e131]
        
        text: Copy Page
        
        article [ref=e134]:
        
        heading "Quick Start" [level=1] [ref=e135]
        
        paragraph [ref=e136]: Get up and running with json-render in 5 minutes.
        
        heading "1. Define your catalog" [level=2] [ref=e137]
        
        paragraph [ref=e138]: "Create a catalog that defines what components AI can use:"
        
        generic [ref=e139]:
        
        button "Copy code" [ref=e141] [cursor=pointer]:
        
        img [ref=e142]
        
        generic [ref=e145]:
        
        code [ref=e149]:
        
        generic [ref=e150]: // lib/catalog.ts
        
        generic [ref=e151]: "import { defineCatalog } from '@json-render/core';"
        
        generic [ref=e152]: "import { schema } from '@json-render/react';"
        
        generic [ref=e153]: "import { z } from 'zod';"
        
        generic [ref=e154]: "export const catalog = defineCatalog(schema, {"
        
        generic [ref=e155]: "components: {"
        
        generic [ref=e156]: "Card: {"
        
        generic [ref=e157]: "props: z.object({"
        
        generic [ref=e158]: "title: z.string(),"
        
        generic [ref=e159]: "description: z.string().nullable(),"
        
        generic [ref=e160]: "}),"
        
        generic [ref=e161]: "slots: ["default"],"
        
        generic [ref=e162]: "description: "Container card with optional title","
        
        generic [ref=e163]: "},"
        
        generic [ref=e164]: "Button: {"
        
        generic [ref=e165]: "props: z.object({"
        
        generic [ref=e166]: "label: z.string(),"
        
        generic [ref=e167]: "action: z.string().nullable(),"
        
        generic [ref=e168]: "}),"
        
        generic [ref=e169]: "description: "Clickable button that triggers an action","
        
        generic [ref=e170]: "},"
        
        generic [ref=e171]: "Text: {"
        
        generic [ref=e172]: "props: z.object({"
        
        generic [ref=e173]: "content: z.string(),"
        
        generic [ref=e174]: "}),"
        
        generic [ref=e175]: "description: "Text paragraph","
        
        generic [ref=e176]: "},"
        
        generic [ref=e177]: "},"
        
        generic [ref=e178]: "actions: {"
        
        generic [ref=e179]: "submit: {"
        
        generic [ref=e180]: "params: z.object({ formId: z.string() }),"
        
        generic [ref=e181]: "description: "Submit a form","
        
        generic [ref=e182]: "},"
        
        generic [ref=e183]: "navigate: {"
        
        generic [ref=e184]: "params: z.object({ url: z.string() }),"
        
        generic [ref=e185]: "description: "Navigate to a URL","
        
        generic [ref=e186]: "},"
        
        generic [ref=e187]: "},"
        
        generic [ref=e188]: "});"
        
        button "Show all" [ref=e189] [cursor=pointer]
        
        heading "2. Define your components" [level=2] [ref=e190]
        
        paragraph [ref=e191]:
        
        text: Use
        
        code [ref=e192]: defineRegistry
        
        text: to map catalog types to React components. Each component receives type-safe
        
        code [ref=e193]: props
        
        text: ","
        
        code [ref=e194]: children
        
        text: ", and"
        
        code [ref=e195]: emit
        
        text: ":"
        
        generic [ref=e196]:
        
        button "Copy code" [ref=e198] [cursor=pointer]:
        
        img [ref=e199]
        
        generic [ref=e202]:
        
        code [ref=e206]:
        
        generic [ref=e207]: // lib/registry.tsx
        
        generic [ref=e208]: "import { defineRegistry } from '@json-render/react';"
        
        generic [ref=e209]: "import { catalog } from './catalog';"
        
        generic [ref=e210]: "export const { registry } = defineRegistry(catalog, {"
        
        generic [ref=e211]: "components: {"
        
        generic [ref=e212]: "Card: ({ props, children }) => ("
        
        generic [ref=e213]:
        
        generic [ref=e214]: "<h2 className="font-bold">{props.title}"
        
        generic [ref=e215]: "{props.description && ("
        
        generic [ref=e216]: "<p className="text-gray-600">{props.description}
        "
        
        generic [ref=e217]: ")}"
        
        generic [ref=e218]: "{children}"
        
        generic [ref=e219]:
        
        generic [ref=e220]: ),
        
        generic [ref=e221]: "Button: ({ props, emit }) => ("
        
        generic [ref=e222]: <button
        
        generic [ref=e223]: className="px-4 py-2 bg-blue-500 text-white rounded"
        
        generic [ref=e224]: "onClick={() => emit("press")}"
        
        generic [ref=e225]: ">"
        
        generic [ref=e226]: "{props.label}"
        
        generic [ref=e227]:
        
        generic [ref=e228]: ),
        
        generic [ref=e229]: "Text: ({ props }) => ("
        
        generic [ref=e230]: "
        {props.content}
        "
        
        generic [ref=e231]: ),
        
        generic [ref=e232]: "},"
        
        generic [ref=e233]: "});"
        
        button "Show all" [ref=e234] [cursor=pointer]
        
        heading "3. Create an API route" [level=2] [ref=e235]
        
        paragraph [ref=e236]: "Set up a streaming API route for AI generation:"
        
        generic [ref=e237]:
        
        button "Copy code" [ref=e239] [cursor=pointer]:
        
        img [ref=e240]
        
        generic [ref=e243]:
        
        code [ref=e247]:
        
        generic [ref=e248]: // app/api/generate/route.ts
        
        generic [ref=e249]: "import { streamText } from 'ai';"
        
        generic [ref=e250]: "import { catalog } from '@/lib/catalog';"
        
        generic [ref=e251]: "export async function POST(req: Request) {"
        
        generic [ref=e252]: "const { prompt } = await req.json();"
        
        generic [ref=e253]: // Generate system prompt from catalog
        
        generic [ref=e254]: const systemPrompt = catalog.prompt();
        
        generic [ref=e255]: "const result = streamText({"
        
        generic [ref=e256]: "model: 'anthropic/claude-haiku-4.5',"
        
        generic [ref=e257]: "system: systemPrompt,"
        
        generic [ref=e258]: prompt,
        
        generic [ref=e259]: "});"
        
        generic [ref=e260]: return result.toTextStreamResponse();
        
        generic [ref=e261]: "}"
        
        button "Show all" [ref=e262] [cursor=pointer]
        
        heading "4. Render the UI" [level=2] [ref=e263]
        
        paragraph [ref=e264]:
        
        text: Use providers and the
        
        code [ref=e265]: Renderer
        
        text: "with your registry to display AI-generated UI:"
        
        generic [ref=e266]:
        
        button "Copy code" [ref=e268] [cursor=pointer]:
        
        img [ref=e269]
        
        generic [ref=e272]:
        
        code [ref=e276]:
        
        generic [ref=e277]: // app/page.tsx
        
        generic [ref=e278]: "'use client';"
        
        generic [ref=e279]: "import { Renderer, StateProvider, ActionProvider, VisibilityProvider, ValidationProvider, useUIStream } from '@json-render/react';"
        
        generic [ref=e280]: "import { registry } from '@/lib/registry';"
        
        generic [ref=e281]: "export default function Page() {"
        
        generic [ref=e282]: "const { spec, isStreaming, send } = useUIStream({"
        
        generic [ref=e283]: "api: '/api/generate',"
        
        generic [ref=e284]: "});"
        
        generic [ref=e285]: "const handleSubmit = (e: React.FormEvent) => {"
        
        generic [ref=e286]: e.preventDefault();
        
        generic [ref=e287]: const formData = new FormData(e.currentTarget);
        
        generic [ref=e288]: send(formData.get('prompt') as string);
        
        generic [ref=e289]: "};"
        
        generic [ref=e290]: return (
        
        generic [ref=e291]: ""
        
        generic [ref=e292]:
        
        generic [ref=e293]: "<ActionProvider handlers={{"
        
        generic [ref=e294]: "submit: (params) => console.log('Submit:', params),"
        
        generic [ref=e295]: "navigate: (params) => console.log('Navigate:', params),"
        
        generic [ref=e296]: "}}>"
        
        generic [ref=e297]: ""
        
        generic [ref=e298]: ""
        
        generic [ref=e299]: <input
        
        generic [ref=e300]: name="prompt"
        
        generic [ref=e301]: placeholder="Describe what you want..."
        
        generic [ref=e302]: className="border p-2 rounded"
        
        generic [ref=e303]: />
        
        generic [ref=e304]: "<button type="submit" disabled={isStreaming}>"
        
        generic [ref=e305]: Generate
        
        generic [ref=e306]:
        
        generic [ref=e307]:
        
        generic [ref=e308]:
        
        generic [ref=e309]: ""
        
        generic [ref=e310]:
        
        generic [ref=e311]:
        
        generic [ref=e312]:
        
        generic [ref=e313]:
        
        generic [ref=e314]:
        
        generic [ref=e315]: );
        
        generic [ref=e316]: "}"
        
        button "Show all" [ref=e317] [cursor=pointer]
        
        heading "Quick Start with shadcn/ui" [level=2] [ref=e318]
        
        paragraph [ref=e319]:
        
        text: If you want to skip defining components from scratch, use
        
        code [ref=e320]: "@json-render/shadcn"
        
        text: "for 36 pre-built components:"
        
        generic [ref=e321]:
        
        button "Copy code" [ref=e323] [cursor=pointer]:
        
        img [ref=e324]
        
        generic [ref=e327]:
        
        code [ref=e331]:
        
        generic [ref=e332]: // lib/catalog.ts
        
        generic [ref=e333]: "import { defineCatalog } from '@json-render/core';"
        
        generic [ref=e334]: "import { schema } from '@json-render/react/schema';"
        
        generic [ref=e335]: "import { shadcnComponentDefinitions } from '@json-render/shadcn/catalog';"
        
        generic [ref=e336]: "export const catalog = defineCatalog(schema, {"
        
        generic [ref=e337]: "components: {"
        
        generic [ref=e338]: "Card: shadcnComponentDefinitions.Card,"
        
        generic [ref=e339]: "Stack: shadcnComponentDefinitions.Stack,"
        
        generic [ref=e340]: "Heading: shadcnComponentDefinitions.Heading,"
        
        generic [ref=e341]: "Button: shadcnComponentDefinitions.Button,"
        
        generic [ref=e342]: "Input: shadcnComponentDefinitions.Input,"
        
        generic [ref=e343]: "},"
        
        generic [ref=e344]: "actions: {},"
        
        generic [ref=e345]: "});"
        
        button "Show all" [ref=e346] [cursor=pointer]
        
        generic [ref=e347]:
        
        button "Copy code" [ref=e349] [cursor=pointer]:
        
        img [ref=e350]
        
        generic [ref=e353]:
        
        code [ref=e357]:
        
        generic [ref=e358]: // lib/registry.tsx
        
        generic [ref=e359]: "import { defineRegistry } from '@json-render/react';"
        
        generic [ref=e360]: "import { shadcnComponents } from '@json-render/shadcn';"
        
        generic [ref=e361]: "import { catalog } from './catalog';"
        
        generic [ref=e362]: "export const { registry } = defineRegistry(catalog, {"
        
        generic [ref=e363]: "components: {"
        
        generic [ref=e364]: "Card: shadcnComponents.Card,"
        
        generic [ref=e365]: "Stack: shadcnComponents.Stack,"
        
        generic [ref=e366]: "Heading: shadcnComponents.Heading,"
        
        generic [ref=e367]: "Button: shadcnComponents.Button,"
        
        generic [ref=e368]: "Input: shadcnComponents.Input,"
        
        generic [ref=e369]: "},"
        
        generic [ref=e370]: "});"
        
        button "Show all" [ref=e371] [cursor=pointer]
        
        paragraph [ref=e372]:
        
        text: See the
        
        link "@json-render/shadcn API reference" [ref=e373] [cursor=pointer]:
        
        /url: /docs/api/shadcn
        
        text: for the full component list.
        
        heading "Next steps" [level=2] [ref=e374]
        
        list [ref=e375]:
        
        listitem [ref=e376]:
        
        text: Learn about
        
        link "catalogs" [ref=e377] [cursor=pointer]:
        
        /url: /docs/catalog
        
        text: in depth
        
        listitem [ref=e378]:
        
        text: Explore
        
        link "data binding" [ref=e379] [cursor=pointer]:
        
        /url: /docs/data-binding
        
        text: for dynamic values
        
        listitem [ref=e380]:
        
        text: Add
        
        link "action handlers" [ref=e381] [cursor=pointer]:
        
        /url: /docs/registry#action-handlers
        
        text: for interactivity
        
        listitem [ref=e382]:
        
        text: Implement
        
        link "conditional visibility" [ref=e383] [cursor=pointer]:
        
        /url: /docs/visibility
        
        listitem [ref=e384]:
        
        text: Use
        
        link "pre-built shadcn/ui components" [ref=e385] [cursor=pointer]:
        
        /url: /docs/api/shadcn
        
        text: for fast prototyping
- button "Ask AI" [ref=e386] [cursor=pointer]:
  - text: Ask AI
  - generic [ref=e387]:
    - generic [ref=e388]: ⌘
    - text: K
- complementary [ref=e389]:
  - generic [ref=e391]:
    - generic [ref=e392]:
      - generic [ref=e393]: json-render Docs
      - button [ref=e395] [cursor=pointer]:
        
        img [ref=e396]
    - generic [ref=e400]:
      - button [ref=e401] [cursor=pointer]: What is json-render?
      - button [ref=e402] [cursor=pointer]: How do I install it?
      - button [ref=e403] [cursor=pointer]: How does streaming work?
      - button [ref=e404] [cursor=pointer]: What components are available?
      - button [ref=e405] [cursor=pointer]: How do I create a custom schema?
    - generic [ref=e406]:
      - textbox [ref=e407]:
        
        /placeholder: Ask a question...
      - button [disabled] [ref=e408] [cursor=pointer]:
        
        img [ref=e409]
- alert [ref=e411]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

quickstart.md

Latest commit

History

quickstart.md

File metadata and controls