Engineering Updates/Discussion

[ngoiyaeric]

Space to discuss ideas.

[ngoiyaeric]

Migration Guide

Renaming MapGPT to QCX.

renaming our main repository from MapGPT to QCX due to the expansion of services in automation and the growing amount of repositories with similar names.

Migration from NextJs AI-SDK-UI
We have decided to migrate our technologies from NextJs AI SDK UI to langchain’s Agent UI SDK.

Technical Reasons

Platform complexity and Scale:
With advancements in large language model APIs like the recent OpenAI Respond API https://platform.openai.com/docs/guides/responses-vs-chat-completions
Models will become progressively sufficient with support for file search, web search and computer use from the API endpoints.

Decoupling agentic workflows from user interfaces and application code is key to scaling platform utility hence enabling developers to build, test and debug the application code and agentic workflows separately for increasingly complicated multi-agent architectures.

This feature is currently not supported with NextJs AI-SDK hence our migration to langchain agent Chat UI.
We plan to further decouple our application code to work with our own multi-agent platform and architectures.

Agent Chat UI:
https://www.youtube.com/watch?v=lInrwVnZ83o
https://www.npmjs.com/package/create-agent-chat-app
https://blog.langchain.dev/ux-for-agents-part-1-chat-2/

Migration Tasks:

When porting UI features from Next.js AI SDK (which likely uses React with TypeScript) to a Vite + React environment, JSX and TypeScript are mostly interchangeable because both environments support them. However, there are a few considerations:
JSX Compatibility: Both Next.js and Vite fully support JSX syntax out of the box.
TypeScript Support: Vite supports TypeScript natively. Ensure that your Vite project is configured with the correct TypeScript settings (tsconfig.json).
Aliases and Paths: Next.js often uses aliases (e.g., @/components). You may need to configure Vite's vite.config.ts to handle these paths using the resolve.alias option.
Server-Side Features: Next.js has built-in server-side capabilities (e.g., API routes, server-side rendering). Vite is purely a frontend bundler. If your components rely on server-side logic, you'll need to handle that differently, such as using an external API or server.
React Features: Hooks, state management, and other React features will work the same. However, Next.js-specific utilities like getServerSideProps or getStaticProps won't work in Vite.
CSS Handling: Vite supports various CSS frameworks and modules. If you're using Tailwind or other styles from the Next.js project, you can bring them over with the correct configuration.

Features

MapGPT features porting onto QCX
All static non generative features previously on MapGPT are going to be ported onto QCX including the Map layout, the suggestive prompts, theming and icons as well as the attachments button and the toggle chat history sidebar on the left side now instead of the right side.
This migration should result in an identical user interface with extended functionality now possible with the decoupled multi agent computational graphs.

Infrastructure and CI/CD

Vercel fully supports CI/CD (Continuous Integration and Continuous Deployment) for Vite + React projects.
Here's how it works:
Connect your repository: Vercel integrates seamlessly with platforms like GitHub, GitLab, or Bitbucket. Once connected, Vercel automatically triggers deployments for every commit or pull request.

Automatic Build and Deployment:

Vercel automatically detects Vite as the build tool and sets the correct build command (vite build) and output directory (dist).
It supports TypeScript and environment variables out of the box.
Preview Deployments:
For each pull request or branch, Vercel generates unique preview URLs, allowing you to test and review changes before merging to production.
Custom Build Settings:
You can configure custom environment variables, build commands, and caching settings in the Vercel dashboard.
CDN and Edge Network:

Vercel deploys your Vite + React app to its global edge network, ensuring fast performance and low latency for users worldwide.
CI Integrations:

Vercel can work alongside other CI tools (like GitHub Actions) for additional testing or linting steps before deploying.
Let me know if you'd like help setting up a vite.config.ts or .vercel.json for optimized deployment.
QCX should also optionally be deployable with Docker on other cloud platforms.

[ngoiyaeric]

This will apply to the Pro and Enterprise Tiers.