Skip to content

Instantly share code, notes, and snippets.

@Cozy228
Last active August 27, 2025 09:31
Show Gist options
  • Select an option

  • Save Cozy228/96e24c4ec784cadf9b6595bf81a5ee07 to your computer and use it in GitHub Desktop.

Select an option

Save Cozy228/96e24c4ec784cadf9b6595bf81a5ee07 to your computer and use it in GitHub Desktop.
aielements.json
{"$schema":"https://ui.shadcn.com/schema/registry.json","name":"ai-elements","homepage":"https://registry.ai-sdk.dev/elements","items":[{"name":"actions","type":"registry:component","title":"Actions","description":"AI-powered actions component.","files":[{"path":"registry/default/ai-elements/actions.tsx","type":"registry:component"}]},{"name":"branch","type":"registry:component","title":"Branch","description":"AI-powered branch component.","files":[{"path":"registry/default/ai-elements/branch.tsx","type":"registry:component"}]},{"name":"code-block","type":"registry:component","title":"Code Block","description":"AI-powered code block component.","files":[{"path":"registry/default/ai-elements/code-block.tsx","type":"registry:component"}]},{"name":"conversation","type":"registry:component","title":"Conversation","description":"AI-powered conversation component.","files":[{"path":"registry/default/ai-elements/conversation.tsx","type":"registry:component"}]},{"name":"image","type":"registry:component","title":"Image","description":"AI-powered image component.","files":[{"path":"registry/default/ai-elements/image.tsx","type":"registry:component"}]},{"name":"inline-citation","type":"registry:component","title":"Inline Citation","description":"AI-powered inline citation component.","files":[{"path":"registry/default/ai-elements/inline-citation.tsx","type":"registry:component"}]},{"name":"loader","type":"registry:component","title":"Loader","description":"AI-powered loader component.","files":[{"path":"registry/default/ai-elements/loader.tsx","type":"registry:component"}]},{"name":"message","type":"registry:component","title":"Message","description":"AI-powered message component.","files":[{"path":"registry/default/ai-elements/message.tsx","type":"registry:component"}]},{"name":"prompt-input","type":"registry:component","title":"Prompt Input","description":"AI-powered prompt input component.","files":[{"path":"registry/default/ai-elements/prompt-input.tsx","type":"registry:component"}]},{"name":"reasoning","type":"registry:component","title":"Reasoning","description":"AI-powered reasoning component.","files":[{"path":"registry/default/ai-elements/reasoning.tsx","type":"registry:component"}]},{"name":"response","type":"registry:component","title":"Response","description":"AI-powered response component.","files":[{"path":"registry/default/ai-elements/response.tsx","type":"registry:component"}]},{"name":"source","type":"registry:component","title":"Source","description":"AI-powered source component.","files":[{"path":"registry/default/ai-elements/source.tsx","type":"registry:component"}]},{"name":"suggestion","type":"registry:component","title":"Suggestion","description":"AI-powered suggestion component.","files":[{"path":"registry/default/ai-elements/suggestion.tsx","type":"registry:component"}]},{"name":"task","type":"registry:component","title":"Task","description":"AI-powered task component.","files":[{"path":"registry/default/ai-elements/task.tsx","type":"registry:component"}]},{"name":"tool","type":"registry:component","title":"Tool","description":"AI-powered tool component.","files":[{"path":"registry/default/ai-elements/tool.tsx","type":"registry:component"}]},{"name":"web-preview","type":"registry:component","title":"Web Preview","description":"AI-powered web preview component.","files":[{"path":"registry/default/ai-elements/web-preview.tsx","type":"registry:component"}]},{"name":"example-actions-hover","type":"registry:block","title":"Actions Hover Example","description":"Example implementation of actions hover.","files":[{"path":"registry/default/examples/actions-hover.tsx","type":"registry:block"}]},{"name":"example-actions","type":"registry:block","title":"Actions Example","description":"Example implementation of actions.","files":[{"path":"registry/default/examples/actions.tsx","type":"registry:block"}]},{"name":"example-branch","type":"registry:block","title":"Branch Example","description":"Example implementation of branch.","files":[{"path":"registry/default/examples/branch.tsx","type":"registry:block"}]},{"name":"example-chatbot","type":"registry:block","title":"Chatbot Example","description":"Example implementation of chatbot.","files":[{"path":"registry/default/examples/chatbot.tsx","type":"registry:block"}]},{"name":"example-code-block-dark","type":"registry:block","title":"Code Block Dark Example","description":"Example implementation of code block-dark.","files":[{"path":"registry/default/examples/code-block-dark.tsx","type":"registry:block"}]},{"name":"example-code-block","type":"registry:block","title":"Code Block Example","description":"Example implementation of code block.","files":[{"path":"registry/default/examples/code-block.tsx","type":"registry:block"}]},{"name":"example-conversation","type":"registry:block","title":"Conversation Example","description":"Example implementation of conversation.","files":[{"path":"registry/default/examples/conversation.tsx","type":"registry:block"}]},{"name":"example-demo-chatgpt","type":"registry:block","title":"Demo Chatgpt Example","description":"Example implementation of demo chatgpt.","files":[{"path":"registry/default/examples/demo-chatgpt.tsx","type":"registry:block"}]},{"name":"example-demo-claude","type":"registry:block","title":"Demo Claude Example","description":"Example implementation of demo claude.","files":[{"path":"registry/default/examples/demo-claude.tsx","type":"registry:block"}]},{"name":"example-demo-grok","type":"registry:block","title":"Demo Grok Example","description":"Example implementation of demo grok.","files":[{"path":"registry/default/examples/demo-grok.tsx","type":"registry:block"}]},{"name":"example-image","type":"registry:block","title":"Image Example","description":"Example implementation of image.","files":[{"path":"registry/default/examples/image.tsx","type":"registry:block"}]},{"name":"example-inline-citation","type":"registry:block","title":"Inline Citation Example","description":"Example implementation of inline citation.","files":[{"path":"registry/default/examples/inline-citation.tsx","type":"registry:block"}]},{"name":"example-loader-custom","type":"registry:block","title":"Loader Custom Example","description":"Example implementation of loader custom.","files":[{"path":"registry/default/examples/loader-custom.tsx","type":"registry:block"}]},{"name":"example-loader-sizes","type":"registry:block","title":"Loader Sizes Example","description":"Example implementation of loader sizes.","files":[{"path":"registry/default/examples/loader-sizes.tsx","type":"registry:block"}]},{"name":"example-loader","type":"registry:block","title":"Loader Example","description":"Example implementation of loader.","files":[{"path":"registry/default/examples/loader.tsx","type":"registry:block"}]},{"name":"example-message-markdown","type":"registry:block","title":"Message Markdown Example","description":"Example implementation of message markdown.","files":[{"path":"registry/default/examples/message-markdown.tsx","type":"registry:block"}]},{"name":"example-message","type":"registry:block","title":"Message Example","description":"Example implementation of message.","files":[{"path":"registry/default/examples/message.tsx","type":"registry:block"}]},{"name":"example-prompt-input","type":"registry:block","title":"Prompt Input Example","description":"Example implementation of prompt input.","files":[{"path":"registry/default/examples/prompt-input.tsx","type":"registry:block"}]},{"name":"example-reasoning","type":"registry:block","title":"Reasoning Example","description":"Example implementation of reasoning.","files":[{"path":"registry/default/examples/reasoning.tsx","type":"registry:block"}]},{"name":"example-response","type":"registry:block","title":"Response Example","description":"Example implementation of response.","files":[{"path":"registry/default/examples/response.tsx","type":"registry:block"}]},{"name":"example-sources-custom","type":"registry:block","title":"Sources Custom Example","description":"Example implementation of sources custom.","files":[{"path":"registry/default/examples/sources-custom.tsx","type":"registry:block"}]},{"name":"example-sources","type":"registry:block","title":"Sources Example","description":"Example implementation of sources.","files":[{"path":"registry/default/examples/sources.tsx","type":"registry:block"}]},{"name":"example-suggestion-input","type":"registry:block","title":"Suggestion Input Example","description":"Example implementation of suggestion input.","files":[{"path":"registry/default/examples/suggestion-input.tsx","type":"registry:block"}]},{"name":"example-suggestion","type":"registry:block","title":"Suggestion Example","description":"Example implementation of suggestion.","files":[{"path":"registry/default/examples/suggestion.tsx","type":"registry:block"}]},{"name":"example-task","type":"registry:block","title":"Task Example","description":"Example implementation of task.","files":[{"path":"registry/default/examples/task.tsx","type":"registry:block"}]},{"name":"example-tool-input-available","type":"registry:block","title":"Tool Input Available Example","description":"Example implementation of tool input-available.","files":[{"path":"registry/default/examples/tool-input-available.tsx","type":"registry:block"}]},{"name":"example-tool-input-streaming","type":"registry:block","title":"Tool Input Streaming Example","description":"Example implementation of tool input-streaming.","files":[{"path":"registry/default/examples/tool-input-streaming.tsx","type":"registry:block"}]},{"name":"example-tool-output-available","type":"registry:block","title":"Tool Output Available Example","description":"Example implementation of tool output-available.","files":[{"path":"registry/default/examples/tool-output-available.tsx","type":"registry:block"}]},{"name":"example-tool-output-error","type":"registry:block","title":"Tool Output Error Example","description":"Example implementation of tool output-error.","files":[{"path":"registry/default/examples/tool-output-error.tsx","type":"registry:block"}]},{"name":"example-tool","type":"registry:block","title":"Tool Example","description":"Example implementation of tool.","files":[{"path":"registry/default/examples/tool.tsx","type":"registry:block"}]},{"name":"example-v0-clone","type":"registry:block","title":"V0 Clone Example","description":"Example implementation of v0 clone.","files":[{"path":"registry/default/examples/v0-clone.tsx","type":"registry:block"}]},{"name":"example-web-preview","type":"registry:block","title":"Web Preview Example","description":"Example implementation of web preview.","files":[{"path":"registry/default/examples/web-preview.tsx","type":"registry:block"}]}]}
{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"message","type":"registry:component","title":"Message","description":"AI-powered message component.","files":[{"path":"registry/default/ai-elements/message.tsx","type":"registry:component","content":"import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/components/ui/avatar';\nimport { cn } from '@/lib/utils';\nimport type { UIMessage } from 'ai';\nimport type { ComponentProps, HTMLAttributes } from 'react';\n\nexport type MessageProps = HTMLAttributes<HTMLDivElement> & {\n from: UIMessage['role'];\n};\n\nexport const Message = ({ className, from, ...props }: MessageProps) => (\n <div\n className={cn(\n 'group flex w-full items-end justify-end gap-2 py-4',\n from === 'user' ? 'is-user' : 'is-assistant flex-row-reverse justify-end',\n '[&>div]:max-w-[80%]',\n className\n )}\n {...props}\n />\n);\n\nexport type MessageContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const MessageContent = ({\n children,\n className,\n ...props\n}: MessageContentProps) => (\n <div\n className={cn(\n 'flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm',\n 'group-[.is-user]:bg-primary group-[.is-user]:text-primary-foreground',\n 'group-[.is-assistant]:bg-secondary group-[.is-assistant]:text-foreground',\n 'is-user:dark',\n className\n )}\n {...props}\n >\n {children}\n </div>\n);\n\nexport type MessageAvatarProps = ComponentProps<typeof Avatar> & {\n src: string;\n name?: string;\n};\n\nexport const MessageAvatar = ({\n src,\n name,\n className,\n ...props\n}: MessageAvatarProps) => (\n <Avatar className={cn('size-8 ring-1 ring-border', className)} {...props}>\n <AvatarImage alt=\"\" className=\"mt-0 mb-0\" src={src} />\n <AvatarFallback>{name?.slice(0, 2) || 'ME'}</AvatarFallback>\n </Avatar>\n);\n"}],"dependencies":["ai"],"devDependencies":[],"registryDependencies":["avatar"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment