https://github.com/thesysdev/search-with-c1
https://github.com/thesysdev/search-with-c1
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/thesysdev/search-with-c1
- Owner: thesysdev
- Created: 2025-05-22T17:14:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-18T11:28:10.000Z (9 months ago)
- Last Synced: 2025-09-18T11:50:23.102Z (9 months ago)
- Language: TypeScript
- Homepage: https://search-with-c1.vercel.app
- Size: 2.13 MB
- Stars: 15
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Introduction
Experience the vast possibilities of web search reimagined through [Thesys](https://www.thesys.dev/), where large language models and generative UI combine to create dynamic, context-aware search experiences. From automatically generated data visualizations and interactive components to rich multimedia results and adaptive layouts, this demo showcases how generative UI transforms traditional search into an intelligent, visual, and highly engaging interface that understands and responds to your unique search intent.
## Demo
[](https://thesys.dev)
[](https://search-with-c1.vercel.app/)
## Overview
This project reimagines what web search could be if combined with Thesys GenUI:
1. **Multi-provider web search** - Support for multiple search providers including Google Search API (via Gemini) and Exa's neural search for high-quality, structured results
2. **Advanced LLM processing** - After finding relevant links, extracts key content from each webpage and uses Gemini SDK to generate concise, contextual summaries of the information
3. **Generative UI components** - Dynamic components created on-the-fly based on search context using C1
4. **Interactive results** - A responsive interface that adapts to different types of queries
Unlike traditional search engines that show a list of links or AI platforms that generate plain text, this project creates rich, visual, and interactive search results tailored to each query.
## Tech Stack
- **Frontend**: Next.js 15 with App Router
- **UI**: Tailwind CSS, SASS, and Thesys GenUI SDK
- **AI Integration**: Thesys C1 SDK, Google Gemini
- **APIs**: Google Custom Search, Google Image Search, Exa Search
- **Streaming**: Real-time response streaming using Server-Sent Events
## Getting Started
### Prerequisites
- Node.js (v20+)
- PNPM
- API keys for required services
### Setup
1. Clone the repository:
```bash
git clone https://github.com/thesysdev/search-with-c1.git
cd search-with-c1
```
2. Install dependencies:
```bash
pnpm i
```
3. Set up environment variables by copying `.env.example` to `.env`:
```bash
cp .env.example .env
```
4. Add your API keys to the `.env` file:
```
THESYS_API_KEY=[your_thesys_api_key]
GOOGLE_API_KEY=[your_google_api_key]
GOOGLE_CX=[your_google_custom_search_id]
GEMINI_API_KEY=[your_gemini_api_key]
EXA_API_KEY=[your_exa_api_key]
```
Generate an API Key by logging into https://chat.thesys.dev/console/keys
Google Keys for image & web search. Read more about generating these keys here: https://developers.google.com/custom-search/v1/introduction
Gemini for GEN-AI search. Generate a key at https://aistudio.google.com/apikey
Exa for neural web search. Generate a key at https://exa.ai/
### Development
Run the development server:
```bash
pnpm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
## Search Providers
This application supports multiple search providers to give you the best results:
### Gemini Search (Default)
- Uses Google's Gemini AI with built-in Google Search capabilities
- Provides comprehensive search results with AI-powered summaries
- Excellent for general queries and real-time information
### Exa Search
- Neural search engine optimized for high-quality, structured content
- Provides full-text content extraction from web pages
- Better for research, technical content, and detailed information retrieval
- Includes metadata like publish dates and author information
The application intelligently chooses the appropriate search provider or can be configured to use a specific provider based on your needs.
## How It Works
1. User enters a search query
2. The application sends the query to the Thesys C1 API
3. C1 utilizes configurable search providers (Gemini with Google Search or Exa neural search) to find relevant web content and retrieve images in real-time
4. The search results are processed and enhanced with summaries
5. C1 generates a dynamic UI with the appropriate components based on the content
6. The response is streamed back to the client for a smooth user experience
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- [Thesys](https://www.thesys.dev/) - Build GenUI Apps
- [C1 Documentation](https://docs.thesys.dev/welcome) - Learn how to use C1 and build AI apps
- [Example Apps](https://github.com/thesysdev/examples/tree/main) - Clone and explore more C1 example projects
- [Google](https://google.com) for their search and image APIs
- [Next.js](https://nextjs.org/) for the React framework