docs: Enhanced README with visual branding, badges, SDK docs, and MCP integration guide#1028
Conversation
SonicDMG
commented
Feb 25, 2026
- Added OpenRAG logo and animated demo GIF
- Added workflow diagram and quick start screenshots
- Enhanced badge system with for-the-badge style and social metrics
- Added Highlight Features section
- Added SDK documentation for Python and TypeScript/JavaScript
- Added MCP integration guide
- Improved structure with emojis and better organization
…ration guide - Added OpenRAG logo and animated demo GIF - Added workflow diagram and quick start screenshots - Enhanced badge system with for-the-badge style and social metrics - Added Highlight Features section - Added SDK documentation for Python and TypeScript/JavaScript - Added MCP integration guide - Improved structure with emojis and better organization
There was a problem hiding this comment.
Pull request overview
This PR updates the project’s top-level documentation and visual assets to improve README branding and onboarding, including workflow visuals and quick-start screenshots, plus sections for SDKs and MCP usage.
Changes:
- Revamps
README.mdwith logo, badges, highlight features, workflow diagram, quick-start screenshots, SDK snippets, and MCP configuration. - Adds new documentation images (logo SVG, workflow diagram SVG, and screenshots) under
docs/static/img/. - Embeds the new visual assets into the README to provide a more guided “first run” experience.
Reviewed changes
Copilot reviewed 1 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/static/img/workflow-diagram.svg | Adds a workflow diagram asset used in the README. |
| docs/static/img/uv_run_openrag.png | Adds a quick-start “launch” screenshot used in the README. |
| docs/static/img/openrag-logo-dog.svg | Adds the OpenRAG logo used at the top of the README. |
| docs/static/img/add_knowledge_openrag.png | Adds a quick-start “add knowledge” screenshot used in the README. |
| README.md | Major README restructure: branding, badges, workflow/how-it-works, quick start, SDK & MCP sections. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| [](https://github.com/langflow-ai/langflow) | ||
| [](https://github.com/opensearch-project/OpenSearch) | ||
| [](https://github.com/docling-project/docling) | ||
|
|
||
| </p> | ||
|
|
||
| <p align="center"> | ||
|
|
||
| [](https://www.youtube.com/@OpenRAG/) | ||
| [](https://github.com/langflow-ai/openrag/stargazers) | ||
| [](https://github.com/langflow-ai/openrag/network/members) | ||
|
|
||
| </p> | ||
|
|
||
| <p align="center"> | ||
|
|
||
| [](https://deepwiki.com/langflow-ai/openrag) | ||
|
|
There was a problem hiding this comment.
The badges are written using Markdown link/image syntax inside an HTML block (<p align="center">...</p>). GitHub does not render Markdown inside HTML blocks, so these will show up as literal text instead of badges. Use pure HTML for the badges (e.g., <a><img/></a>) or remove the surrounding HTML so the Markdown is parsed.
| [](https://github.com/langflow-ai/langflow) | |
| [](https://github.com/opensearch-project/OpenSearch) | |
| [](https://github.com/docling-project/docling) | |
| </p> | |
| <p align="center"> | |
| [](https://www.youtube.com/@OpenRAG/) | |
| [](https://github.com/langflow-ai/openrag/stargazers) | |
| [](https://github.com/langflow-ai/openrag/network/members) | |
| </p> | |
| <p align="center"> | |
| [](https://deepwiki.com/langflow-ai/openrag) | |
| <a href="https://github.com/langflow-ai/langflow"> | |
| <img src="https://img.shields.io/badge/Langflow-1C1C1E?style=for-the-badge&logo=langflow" alt="Langflow" /> | |
| </a> | |
| <a href="https://github.com/opensearch-project/OpenSearch"> | |
| <img src="https://img.shields.io/badge/OpenSearch-005EB8?style=for-the-badge&logo=opensearch&logoColor=white" alt="OpenSearch" /> | |
| </a> | |
| <a href="https://github.com/docling-project/docling"> | |
| <img src="https://img.shields.io/badge/Docling-000000?style=for-the-badge" alt="Docling" /> | |
| </a> | |
| </p> | |
| <p align="center"> | |
| <a href="https://www.youtube.com/@OpenRAG/"> | |
| <img src="https://img.shields.io/youtube/channel/subscribers/UCn2bInQrjdDYKEEmbpwblLQ?label=Subscribe&style=social" alt="YouTube Channel - Subscribe to OpenRAG" /> | |
| </a> | |
| <a href="https://github.com/langflow-ai/openrag/stargazers"> | |
| <img src="https://img.shields.io/github/stars/langflow-ai/openrag?style=social" alt="GitHub stars: langflow-ai/openrag" /> | |
| </a> | |
| <a href="https://github.com/langflow-ai/openrag/network/members"> | |
| <img src="https://img.shields.io/github/forks/langflow-ai/openrag?style=social" alt="GitHub forks: langflow-ai/openrag" /> | |
| </a> | |
| </p> | |
| <p align="center"> | |
| <a href="https://deepwiki.com/langflow-ai/openrag"> | |
| <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki about langflow-ai/openrag" /> | |
| </a> |
There was a problem hiding this comment.
@copilot if I give you the updated code, can you apply it here?
| | ||
| <a href="https://github.com/docling-project/docling"><img src="https://img.shields.io/badge/Docling-000000?style=flat" alt="Langflow"></a> | ||
| | ||
| <img src="./docs/static/img/openrag_readme_downsized.gif" alt="OpenRAG Demo" width="100%"/> |
There was a problem hiding this comment.
The demo GIF is referenced with width="100%", but the HTML img width attribute is a pixel value (percent is invalid in HTML5 and may be ignored). Also, the referenced openrag_readme_downsized.gif is currently ~17MB in docs/static/img, which will significantly bloat repo clones and make the README heavy to load. Consider using a smaller asset (optimize further, convert to MP4/WebM + linked thumbnail, or host the demo externally) and use CSS (e.g. style="width:100%") if you want responsive sizing.
| <img src="./docs/static/img/openrag_readme_downsized.gif" alt="OpenRAG Demo" width="100%"/> | |
| <img src="./docs/static/img/openrag_readme_downsized.gif" alt="OpenRAG Demo" style="width: 100%; max-width: 900px; height: auto;"/> |
Co-authored-by: Copilot <[email protected]>
… containing <div> is already aligned.