skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

ask-research-agent-ui

Integrates and customizes the research-agent-ui React package for QwkSearch chat and search interfaces.

74|11|Updated Jul 4, 2024
Search Tags:#react#nextjs#chat ui#frontend integration#provider pattern#api handlers#search interface
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-research-agent-ui-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-research-agent-ui
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/skills/ask-research-agent-ui
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill ask-research-agent-ui-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers embedding or modifying the QwkSearch chat/search UI need to navigate a large React package with two entry points, a provider stack, dependency-injected API handlers, and subtle pitfalls like editor code leaking into chat-only bundles. ## Core Features & Use Cases - Entry Point Selection: Choose between the chat-only root entry and the /workspace entry that adds the REASON editor, keeping Tiptap/Plate out of chat-only bundles. - Provider & Config Wiring: Mount QwkSearchApp or compose SessionProvider, ChatProvider, and ExtractPanelProvider with configureResearchAgentUI for branding, callbacks, and Google Drive picker setup. - Server Route Handlers: Add dependency-injected API route factories (chats, messages, search, rewrite, voice) that run in any Next.js host. - Use Case: A host app wants a branded chat UI with a Ctrl-Space spotlight palette and streaming rewrite endpoint; this Skill explains which providers to mount, which config callbacks return true to handle navigation in place, and how the rewrite handler falls back across model providers. ## Quick Start Ask the assistant to mount QwkSearchApp from research-agent-ui with a custom authClient and appName config in your Next.js app.

Frequently Asked Questions about ask-research-agent-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add the QwkSearch chat UI to my Next.js app?▼

Import QwkSearchApp from research-agent-ui and pass a required authClient plus an optional config object. It wraps QwkSearchProviders and ChatWindow, giving you the full chat, reader, history, and voice experience with one component.

What is the difference between research-agent-ui and research-agent-ui/workspace?▼

The root entry contains chat, reader, history, voice, and the app shell with no editor. The /workspace entry re-exports everything plus QwkSearchWorkspaceApp and the REASON editor views, requiring react-reason-editor peer dependencies.

Why does my chat-only bundle suddenly include Tiptap and Plate?▼

Something imported an editor surface from the root entry, which pulls the entire editor tree into chat-only builds. Editor imports must live in src/workspace/ and workspace.ts only; move the offending import to the /workspace entry.

Why does the Google Drive picker return files that fail to download with 403?▼

The googleAppId config field is empty. Google only releases a picked file when the picker knows the app id, so both googleApiKey and googleAppId must be set or downloads fail with a 403.

Why does Ctrl-Space not open the spotlight palette?▼

The host either mounts its own shell instead of QwkSearchProviders or passes showSpotlight={false}. Mount SpotlightPalette inside the session, chat, and view providers, since it reads all three contexts.

How does the rewrite API endpoint choose which model to use?▼

It tries three sources in order: the caller-specified chatModel loaded via the host's loadChatModel dep, then the deployment's GROQ_API_KEY, then loadChatModel with no argument. Failures surface in the response body's error field.

Related Skills

Explore More Software Engineering Skills→
neondatabaseneondatabase
16

neon-js-react

Set up the Neon JavaScript SDK for React applications with authentication and database queries.

Official
Intermediate
aadilmallickaadilmallick

eas-hosting

Deploy Expo web apps and API routes to EAS Hosting on Cloudflare Workers.

Community
Intermediate
oguzhan18oguzhan18
6

angular-cypress

Automate Angular end-to-end and component testing with Cypress 13.x.

Community
Intermediate
MinhQuyen274MinhQuyen274

ck:tanstack

Build full-stack React apps with TanStack Start routes, server functions, forms, and AI streaming.

Community
Advanced